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:
  1. <HTML>  
  2. <HEAD>  
  3.     <title>Belépő oldal</title>  
  4.     <link rel="stylesheet" type="text/css" href="stilus.css" media="all">  
  5. </HEAD>  
  6.   
  7.   
  8. <BODY>  
  9.       
  10.     <div name="keret" class="hatter" style="width:100%;height:100%;" align="center">  
  11.           
  12.             <div name="cím" class="oldalcím" style="position:relative;left:200px;top:250px;">Üdvözöllek a honlapunkon!</div>  
  13.               
  14.             <div name="belepogomb" style="position:;left:450px;top:400px;">  
  15.             <a href="fooldal.html"><img alt="belépős gomb" src=""   
  16.             onMouseOver="document.belepogomb.src=''"  
  17.             onMouseOut="document.belepogomb.src=''"  
  18.             onMouseDown="document.belepogomb.src=''"  
  19.             onMouseUp="document.belepogomb.src=''" border=0>  
  20.             </a></div>  
  21.           
  22.     </div>  
  23.       
  24. </BODY>  
  25. </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.