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?

<style type="text/css">

	#container {	width: 1024px;
			height: 768px;
			margin-left:auto;
                        margin-top:auto;
                        margin-right:auto;}

	#doboz1{ 	width: 133px;
			height:100px;
			position:absolute;
			left: 736px;
			top: 662px;
			border: 0px;}

	#doboz2{ 	width: 135px;
			height:94px;
			position:absolute;
			left: 887px;
			top: 664px;
			border: 0px;}

	#menu1{		width:150px;
			height:50px;
			position:absolute;
			left:53px;
			top: 52px;
			border:0px;}
	
	#menu2{		width:150px;
			height:50px;
			position:absolute;
			left:228px;
			top: 53px;
			border:0px;}

	#menu3{		width:150px;
			height:50px;
			position:absolute;
			left:412px;
			top: 54px;
			border:0px;}

	#menu4{		width:150px;
			height:50px;
			position:absolute;
			left:594px;
			top: 55px;
			border:0px;}

			</style>
</head>





<body bgcolor="black">
			<div id="container">
				<img src="Elso dizajn.jpg"/>
				<div id="dobozok">
					<div id="doboz1"><a rel="csoport" href="1-s.jpg" title="Jelszavak :D http://www.facebook.com"><img src="1.jpg" alt="" /></a></div>
					<div id="doboz2"><a rel="csoport" href="2.jpg" title="Jelszavak :D http://www.facebook.com"><img src="2-s.jpg" alt="" /></a></div>
					<div id="doboz3"></div>
					<div id="doboz4"></div>
					<div id="doboz5"></div>
					<div id="doboz6"></div>
					<div id="doboz7"></div>
				</div>
				<div id="menu">

				<div id="menu1"><img src="fooldal_menu.jpg" name="mousetest" onMouseOver="document.images['mousetest'].src='fooldal_menu_aktiv.jpg'"
onMouseOut="document.images['mousetest'].src='fooldal_menu.jpg'" width="150" height="50"/></div>
				<div id="menu2"><img src="magamról_menu.jpg" name="mousetest1" onMouseOver="document.images['mousetest1'].src='magamról_menu_aktiv.jpg'"
onMouseOut="document.images['mousetest1'].src='magamról_menu.jpg'" width="150" height="50" /></div>
				<div id="menu3"><img src="kepek_menu.jpg" name="mousetest2" onMouseOver="document.images['mousetest2'].src='kepek_menu_aktiv.jpg'"
onMouseOut="document.images['mousetest2'].src='kepek_menu.jpg'" width="150" height="50" /></div>
				<div id="menu4"><img src="gep_menu.jpg" name="mousetest3" onMouseOver="document.images['mousetest3'].src='gep_menu_aktiv.jpg'"
onMouseOut="document.images['mousetest3'].src='gep_menu.jpg'" width="150" height="50" /></div>
				</div>
			</div>


</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