Manapság a felhasználók 800px (Asus EEE Surf) és 1920px (Dell Studio XPS) közötti monitor-szélességen böngészik az internetet. A weboldalak egy része fix szélességű - persze vannak akik pont ezt elkerülrve alkotnak egyedit - ezt a fix szélességet pedig középen kell tartani. Ennél mi sem egyszerűbb:

div {
margin-left:auto;
margin-right:auto;
width:800px;
}És már meg is vagyunk, oldalunk ellenállva a zoomolásnak és az átméretezésnek stabilan ül a lap közepén, csak függőlegesen csúszik el, ahogy az olvasó egyre mélyebbre ássa magát a tartalomban. És ilyenkor a jól szerkesztett menü robog felfelé majd eltűnik a képből.
 

De nem akkor, ha lehorgonyozzuk!
 

div#menu{
position:fixed;
left:100px;
top:100px;
width:150px;
height:300px;
}Ettől ugyan nem szabadul az olvasó! Igen ám, de hogyan reagál ez a doboz az ablak átméretezésére? Ragaszkodik a (100,100)-hoz. És így néha eltávolodik a középre igazított tartalomtól, néha pedig eltakarja. Hogyan lehetne szólni neki, hogy ne az oldal széléhez, hanem a közepéhez igazodjon? a

...
left:50% - 400px;
...

jó megoldás lenne, de nem helyes szintaktikailag, ezért egy másik tulajdonságot kell felhasznáni:

div#menu
{
position:fixed;
margin:0px 0px 0px -400px;
left:50%;
top:100px;
width:150px;
height:300px;
}


Így helyre kerülnek a dolgok.

A bejegyzés trackback címe:

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.