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.

Az iniciálé többé nem a kódexírók kiváltsága. Bármelyik weboldal inicializálható puszta CSS használatával.

Korábban erre a célra a <span> -taget használták, de valljuk be, nem ildomos a keresőrobotokat ilyen csúnyán megvezetni, mert többet az oldal felé sem néznek. Egy sornyi CSS-el elkerülhetjük a HTML forrás átírását és az ebből fakadó kellemetlenséget:

p:first-letter {font-size:4em;}Persze a selector-t kiegészíthetjük osztállyal is, ha nem szeretnénk minden bekezdésnek iniciálét adni. Kiemelhetjük iniciálénkat speciális betűtípussal, amit hála az Embedded Open Type egyre szélesebb támogatottságának, akár magunk is rajzolhatunk.

Mivel az első betűk általában nyomtatott nagybetűk, ezért felesleges a megnövekedett sorköz, és nem is esztétikus. Ezt egyszerűen eltűntethetjük a

line-height:0.5em;sor hozzáadásával. Meglepő módon bár a környező szöveg sormagassága 1em, ha a nagyobb méretű iniciálét is 1em-es sorközzel vettem fel, akkor visszakaptam azt a rést, amit eltűntetni kívántam.

Ha azt szeretnénk, hogy a karaktert több sornyi szöveg fussa körül, akkor lebegtethetjük

float:left;de ilyenkor vigyázni kell, hogy a lebegést a következő bekezdés előtt megállítsuk, különben egy lépcsőt kapunk.

p:first-letter {
float:left;
font-size:4em;
line-height:0.5em;
}

p {
float:none;
}Innentől a stílusnak csak a kreativitás és a rendelkezésre álló idő szab határt. 
 

Ismét weboldal készítésébe vágtam a fejszémet. Plain HTML és CSS, a lehető legkevesebb JS-sel, esetleg egy kis PHP, hogy ne kelljen annyit Copy-Paste-elni. Ezúttal semmi Ajax, azzal mindig csak a gond volt: trükközni az oda-vissza nyilakkal meg a belső oldalra hivatkozásokkal, megnyitással új fülön/ablakban.

Első lépésben néhány képernyőtervet akartam készíteni, hogy a megrendelővel legyen miről beszélni. Nem vagyok grafikus, az efféle feladatokra az Adobe Flash-t használom, ott mindennek lehet méretet adni, vannak szimbólumok,néhány egyszerű filter és gradiensek. Ezúttal azonban úgy döntöttem, hogy legyen rögtön HTML és CSS, akkor nem dolgozom kétszer.

Első feladatom egy kerek-sarkú doboz lett volna. Mivel régóta nem foglalkoztam komolyan CSS-sel, gondoltam, talán most már van ilyen. És láss csodát, tényleg van. A CSS 3-val elérkezett a web-fejlesztők Kánaánja. Kerekített sarkok, szegélyként használható képek. Nem kell többé minden DIV-et nyolc másikkal körülvenni ahhoz, hogy egy egyszerű mintát adjunk a keretnek.

Egyetlen bökkenő, hogy Microsoft megint egy lépéssel le van maradva, a minden más böngészőnél jobb CSS 3 támogatást biztosító IE 9 még nem jött ki. A kerek kereteket támogatja a Safari, az Opera és a FireFox, még a Chrome is, de a megrendelőnek ez feltehetően nem lesz elegendő.

Másoknak is nagyon hiányozhatott a kerekítés, mert készült egy htc amely képes lefaragni a csúnya szögleteket. De mint minden IE hack, ez sem működik kifogástalanul. Például nem működik z-index megadása mellett. Pedig z-index kell, ha egy fontos DIV-et egy kevésbé fontos DIV előtt szeretnék lebegtetni, hiszen ha úgy oldom meg az elé kerülést, hogy a HTML kódban később szerepeltetem, akkor CSS nélkül a fontos DIV (jelen esetben a menü) ami a HTML kódban később kap helyet, felolvasó programmal vagy egy karakteres, esetleg mobil böngészőben megtekintva csak a legvégén jelenik meg, ami frusztráló lehet.

A forrásban alulra kerülő menüre megoldás persze egy láthatatlan DIV, ami szintén tartalmazza a menüt, hiszen ha nincs CSS, megjelenik rögtön a cím alatt, ha van CSS, akkor nem jelenik meg. De szerettem volna efféle trükkök nélkül megúszni a weblap-fejlesztést, tisztán tartani a markup-ot. És persze az IE-s htc valamit a pozicionálásban sem szerethetett, mert a lebegő kerek-sarkú DIV-em rendre hátulra került.

Marad a háttérkép, akkor legalább van filter-ek nélkül is gradiensem meg árnyékom.