Najlepsza odpowiedź Yeoman , 06 kwietnia 2015 - 18:46
Generalnie powinneś troche uporządkowac kod.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>strona</title> <link rel="stylesheet" href="css/style.css"> </head> <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'"> <div id="wrappaer"></div> <div class="body"></div> <div class="top"></div> <div class="flag1"></div> <div class="flag2"></div> <div class="flag3"></div> <div class="butt"></div> <div class="line"></div> <footer></footer> </body> </html>
Następnie sugerowałbym dodać elementy flag oraz button do jakiegoś diva w którym będą się znajdować, zamiast dodawać to jeden pod drugim. Przykładowo:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>strona</title> <link rel="stylesheet" href="css/style.css"> </head> <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'"> <div id="wrappaer"></div> <div class="body"></div> <div class="top"> <div class="flag1"></div> <div class="flag2"></div> <div class="flag3"></div> <div class="butt"></div> </div> <div class="line"></div> <footer></footer> </body> </html>
I z tego poziomu nadać dla klasy top pozycję relatywną, a dla jego elementów pozycję absolutną i je pozycjonować. Wtedy zawsze będą miały ograniczenie jakim jest szerokość elementu o klasie top.
.top{ width: 804px; height:143px; margin-left: auto; margin-right: auto; background-image: url(../images/1.png); position: relative; }
.top .flag1 { width: 24px; height: 24px; position: abosulte; right: 0; top: 0; background-image: url(../images/4.png); } .top .flag2 { width: 24px; height: 24px; float: left; absolute; right: 24px; top: 0; background-image: url(../images/5.png); } .top .flag3 { width: 24px; height: 24px; position: absolute; right: 48px; top: 0; background-image: url(../images/6.png); } .top .butt { width: 95px; height: 26px; position: absolute; right: 72px; top: 0; background-image: url(../images/7.png); }
Pozycjonuj wedle uznania za pomocą top i right
Przejdź do postu