ugrás a tartalomhoz

Sitebuild - tartalom középre igazítása

szabodani · 2011. Már. 2. (Sze), 21.52
Van egy honlapom és azt szerettem volna elérni hogy minden képernyőn középen legyen de amikor megadtam neki a margin parancsot a containerbe akkor működött is de a menük és a dobozok nem mentek vele.

Miért lehet ez?
  1. <style type="text/css">  
  2.   
  3.     #container {    width: 1024px;  
  4.             height: 768px;  
  5.             margin-left:auto;  
  6.                         margin-top:auto;  
  7.                         margin-right:auto;}  
  8.   
  9.     #doboz1{    width: 133px;  
  10.             height:100px;  
  11.             position:absolute;  
  12.             left: 736px;  
  13.             top: 662px;  
  14.             border: 0px;}  
  15.   
  16.     #doboz2{    width: 135px;  
  17.             height:94px;  
  18.             position:absolute;  
  19.             left: 887px;  
  20.             top: 664px;  
  21.             border: 0px;}  
  22.   
  23.     #menu1{     width:150px;  
  24.             height:50px;  
  25.             position:absolute;  
  26.             left:53px;  
  27.             top: 52px;  
  28.             border:0px;}  
  29.       
  30.     #menu2{     width:150px;  
  31.             height:50px;  
  32.             position:absolute;  
  33.             left:228px;  
  34.             top: 53px;  
  35.             border:0px;}  
  36.   
  37.     #menu3{     width:150px;  
  38.             height:50px;  
  39.             position:absolute;  
  40.             left:412px;  
  41.             top: 54px;  
  42.             border:0px;}  
  43.   
  44.     #menu4{     width:150px;  
  45.             height:50px;  
  46.             position:absolute;  
  47.             left:594px;  
  48.             top: 55px;  
  49.             border:0px;}  
  50.   
  51.             </style>  
  52. </head>  
  53.   
  54.   
  55.   
  56.   
  57.   
  58. <body bgcolor="black">  
  59.             <div id="container">  
  60.                 <img src="Elso dizajn.jpg"/>  
  61.                 <div id="dobozok">  
  62.                     <div id="doboz1"><a rel="csoport" href="1-s.jpg" title="Jelszavak :D http://www.facebook.com"><img src="1.jpg" alt="" /></a></div>  
  63.                     <div id="doboz2"><a rel="csoport" href="2.jpg" title="Jelszavak :D http://www.facebook.com"><img src="2-s.jpg" alt="" /></a></div>  
  64.                     <div id="doboz3"></div>  
  65.                     <div id="doboz4"></div>  
  66.                     <div id="doboz5"></div>  
  67.                     <div id="doboz6"></div>  
  68.                     <div id="doboz7"></div>  
  69.                 </div>  
  70.                 <div id="menu">  
  71.   
  72.                 <div id="menu1"><img src="fooldal_menu.jpg" name="mousetest" onMouseOver="document.images['mousetest'].src='fooldal_menu_aktiv.jpg'"  
  73. onMouseOut="document.images['mousetest'].src='fooldal_menu.jpg'" width="150" height="50"/></div>  
  74.                 <div id="menu2"><img src="magamról_menu.jpg" name="mousetest1" onMouseOver="document.images['mousetest1'].src='magamról_menu_aktiv.jpg'"  
  75. onMouseOut="document.images['mousetest1'].src='magamról_menu.jpg'" width="150" height="50" /></div>  
  76.                 <div id="menu3"><img src="kepek_menu.jpg" name="mousetest2" onMouseOver="document.images['mousetest2'].src='kepek_menu_aktiv.jpg'"  
  77. onMouseOut="document.images['mousetest2'].src='kepek_menu.jpg'" width="150" height="50" /></div>  
  78.                 <div id="menu4"><img src="gep_menu.jpg" name="mousetest3" onMouseOver="document.images['mousetest3'].src='gep_menu_aktiv.jpg'"  
  79. onMouseOut="document.images['mousetest3'].src='gep_menu.jpg'" width="150" height="50" /></div>  
  80.                 </div>  
  81.             </div>  
  82.   
  83.   
  84. </body>  
‹ Javascript - időzítő gombot aktivál Ajax - regisztráció - létezik e már a név ›
 ■
1

Használd a kódszínezőt

Poetro · 2011. Már. 2. (Sze), 22.02
Használd a kódszínezőt! A position: absolute úgy működik, hogy a hozzá képest, a DOM fában legközelebb eső relatív illetve abszolút elemhez képest lesz eltolva. Mivel ez a fenti kódban a body, ezért a #doboz1 a body-hoz képest lesz eltolva. Amennyiben azt akarod, hogy a #container-hez képest legyen eltolva, akkor a #container-nek adj egy position: relative stílust.
2

Köszönöm

szabodani · 2011. Már. 2. (Sze), 22.31
Köszönöm