A szabványok és a trendek egyaránt arra irányulnak, hogy oldalaink layoutja ne táblázatokon alapuljon. Egy dolgot azonban táblázattal kétségtelenül nagyon egyszerű volt elérni: azt, hogy egymás melletti hasábjaink hossza mindig a leghosszabbhoz igazodjon. A táblázatnál ez automatikus, a DIV-es szerkezetben viszont az egyik DIV nem tudja, mit csinál a másik.
A különböző hackek helyett megoldás az a javascript, amit a Project7 stúdió fejlesztett ki és ingyenesen letölthetővé tett. A stúdió évek óta fejleszt Dreamweaver-hez extension-öket és template készleteket, amik a mellett, hogy nagyon könnyen kezelhetők, a nagyon látványosak is. Ki kell emelnem, hogy tapasztalatom szerint külön gondot fordítanak arra, hogy fejlesztéseik az összes elterjedt böngésző alatt azonosan működjenek! Ez a tutorial az oldalukon található leírás fordítása.
A script egyszerűen megkérdezi a böngészőtől a megjelenített magasságát két vagy több, meghatározott DIV-nek és aztán ezt az információt használja fel, hogy az egyes DIV-ek magasságát a legmagasabbhoz igazítsa – egy minden egyes hasábban meglévő tag alapján, annak alsó padding értékével.
A project7 javascript használata
1. Töltsd le a p7_eqCols2_10.js fájlt (link a cikk végén).
2. Helyezd el a site gyökérkönyvtárába.
3. Helyezz el egy linket minden oldal <head> részébe, amelyiken szükséged van rá:
1 | <script type="text/javascript" src="p7_eqCols2_10.js"></script> |
Figyelem: ha nem a site gyökérkönyvtárába helyezted a scriptet, akkor az elérési útvonalat ennek megfelelően módosítani kell!
4. Helyezz el egy onLoad meghívást az oldal
tag-jébe:1 | <body onLoad="P7_equalCols2(1,'c1','P','c2','P')"> |
A project7 javascript változói
Az első érték a megjelenítés animációját állítja be. 0 esetén nincs, 1 esetén animáltan igazodnak a leghosszabbhoz a hasábok.
A következő változók határozzák meg, hogy melyik DIV-ekre vonatkozzon a script. Mindig párokba rendeződnek!
a./ A hasáb DIV azonosítója, amely része kell, hogy legyen a kiegyenlítésnek.
b./ Annak a tag-nek a típusa, amelyikhez a szükséges függőleges térközt hozzáadjuk. Ez jellemzően a hasáb utolsó tartalmi eleme. Például a
tag megadásával arra utasítjuk a scriptet, hogy keresse meg a hasáb utolsó
elemét, majd adjon valamennyi függőleges térközt közvetlenül az aljához, ha szükséges. Ezzel bonyolultabb beágyazott DIV (hasáb) struktúrák is létrehozhatók, hiszen a térköz a hasábon belüli elemhez adódik, a szükséges mértékben lefelé tolva a hasáb alját.
A beírásnál figyeljünk rá, hogy:
– a hasáb ID-k és a tag nevek mindig párban legyenek,
– az animáció változóján kívül mindegyik két aposztrof(‘) közé kerül, vesszővel elválasztva, space nélkül,
– a tag nevét mindig nagybetűvel írjuk (‘P’, ‘H3’, ‘LI’, stb).
Mivel a script az alsó padding értékével játszik, ügyeljünk rá, hogy az elemnek vagy ne legyen alsó paddingja, vagy csináljunk egy classt, amivel 0-ra állíthatjuk. (Én általában beillesztek egy plusz tag-et az aljára és ahhoz csatolom a class-t.)
Mindenkinek ajánlom ettől függetlenül is a Project7 oldalát, ahol a fizetős extension-ök mellett tutorialok és más, ingyenesen letölthető scriptek is találhatók.
