Azonos magasságú hasábok táblázat nélkül (Project7)


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.

Kapcsolódó bejegyzések:
  • Többen is gondolkodnak azon, hogyan is lehetne gyorsan és megbízhatóan átirányítani az oldalukat más internetes címre. A leírás több módszert is bemutatA …

  • A paraméter átadásnak egyszerű html-ből 3 ismert módja a sütik, a GET és a POST. Mind a 3 megoldásnak megvannak az előnyei és hátrányai. Nézzük sorra.SÜTIK …

  • Egyszerű feladat egyszerű megoldása következik. Szerettem volna a galéria képeiből kis “válogatást” a kezdőlapon, a lehető legegyszerűbb módon. A javascriptek kö …

  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Bizonyára mindenkivel előfordult már, hogy egy olyan layout-ot kellett összeraknia, ami több oszlopból áll, de nem mindig az lap alsó részéig ér le a tartalom, …

A cikket beküldte: Har_melin ()

Szólj hozzá
a Azonos magasságú hasábok táblázat nélkül (Project7) c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>