ugrás a tartalomhoz

Abszolút pozicionált elem középre igazítása az oldalon

Medve · 2009. Jún. 8. (H), 20.08
hali mindenki,
A következő lenne a problémám: Akarok készíteni egy olyan weboldalt amely 1024*768-as méretű és arra gondoltam hogy mivel lehet hogy más képernyő felbontással és megnézheti bárki, így gondolom az a legkafább megoldás ha középre igazítom az egész oldalt.Na ja! A probléma ott kezdődik hogy a weblapot úgy építettem fel hogy van egy nagy DIV (egyfajta keret ha úgy tetszik) és abbba pakolgattam bele az összes többi elemet mindegyiket left-re és top-ra meghatározva. És ezt az "absolute" pozicionált nagy divet kéne valahogy középre igazítani ugy hogy a kereten belül maradjon a többi
elem is.Szerintem nem lehet valami nagyon bonyolult dolog de nekem nem sikerült rájönnöm két napnyi szarakodás után szoval gondoltam segítséget kérek valakitől aki ért hozzá.:D
Íme a prototípusom:

<HTML>
<HEAD>
	<title>Belépő oldal</title>
	<link rel="stylesheet" type="text/css" href="stilus.css" media="all">
</HEAD>


<BODY>
	
	<div name="keret" class="hatter" style="width:100%;height:100%;" align="center">
		
			<div name="cím" class="oldalcím" style="position:relative;left:200px;top:250px;">Üdvözöllek a honlapunkon!</div>
			
			<div name="belepogomb" style="position:;left:450px;top:400px;">
			<a href="fooldal.html"><img alt="belépős gomb" src="" 
			onMouseOver="document.belepogomb.src=''"
			onMouseOut="document.belepogomb.src=''"
			onMouseDown="document.belepogomb.src=''"
			onMouseUp="document.belepogomb.src=''" border=0>
			</a></div>
		
	</div>
	
</BODY>
</HTML>
előre is köszi.
‹ Több weboldal tartalma egy oldalon FF alatt lefut, IE alatt nem, cookie-val nem jó valami ›
 ■
1

A attribútum helyett használd

Török Gábor · 2009. Jún. 8. (H), 21.13
  • A name attribútum helyett használd az ID-t, mert az szolgál az elemek egyedi azonosítására, azt fogod tudni CSS-ből is elérni (pl. a külső div-et #keret kiválasztóval). Ld. még CSS cikksorozat a Weblaboron
  • A külső „keret” div-ednek állítsd át 100%-ról a szélességét arra a méretre, amit jónak látsz, amekkora helyet a weboldalad elfoglalhat.
  • Állítsd be ennél az elemnél a position tulajdonságot relative-ra, ennek hatására valamennyi benne lévő abszolút pozíciójú elem koordináta rendszere ő maga lesz.
  • Végül vedd fel hozzá a margin-left: auto; és margin-right: auto szabályokat, ennek hatására középre kerül a kereted, így a benne foglalt valamennyi elem is. Ld. még Középre igazítás IE-ben is, CSS-sel

Frissítés

Bocs, fáradt vagyok már, úgy olvastam, hogy az elemeid vannak abszolút pozíciónálva, és most látom, hogy fordítva, mert neked a kereted. Ennek fényében csak részben életképes, amit írtam, valamint elég rugalmatlan így a layoutod is. Javaslom rss CSS lépésről-lépésre: táblázatnélküli oldalfelépítés cikkét.
2

DOCTYPE

Poetro · 2009. Jún. 8. (H), 21.20
És nem utólsósorban adj meg valamilyen DOCTYPE-ot, hogy a CSS biztosan azt csinálja, amit szeretnél, jelen esetben HTML4-eset.
3

+1

Török Gábor · 2009. Jún. 8. (H), 21.35
Habár a hivatkozott „CSS középre igazítás” témában előkerül.
4

SIKER!!!

Medve · 2009. Jún. 9. (K), 20.25
Köszi mindenkinek.:D
mostmár középen van az oldalam mindenféle felbontásnál.