Weblabor

Weblapok készítésekor az egyik leggyakoribb feladat különböző dobozok megvalósítása. A "hagyományos" módszer táblázatok használata, a rosszabb esetben több táblázat cellát is használva a keretek összeállításához. A mai cikkünkben ezt a témakört fogjuk végigjárni, azaz megnézzük, hogyan tudunk kialakítani különböző jellemzőkkel rendelkező (fejléces és fejléc nélküli) dobozokat CSS, és szemantikus HTML segítségével.

A cikk anyaga az első szakmai Weblabor találkozón elhangzott előadásra fog építeni, de a kérdést egy kicsit részletesebben, illetve egy kicsit mélyebben járja körül.

Először vegyük sorra követelményeinket, tisztázzuk a céljainkat! Azt szeretnénk, ha a végeredmény a népszerű böngészők legfrissebb verzióban hibátlanul jelenne meg, azaz célunk, hogy Internet Explorer 6.0, Firefox 1.0 és Opera 7.5 alatt működjenek megoldásaink. Ez persze nem jelenti azt, hogy ne működne más böngészőkkel - nem fogunk hack-et, vagy böngésző specifikus elemeket használni -, így ha egy böngésző helyesen támogatja a HTML és CSS szabványt, akkor működni fog a megoldásunk is rajta. A nagyon régi böngészők esetében, mint a Netscape 4.x széria, a stíluslap nem fog megjelenni, régebbi Internet Explorerek és egyéb böngészők esetén pedig a tartalom mindenképpen látható lesz, legrosszabb esetben nem pont úgy, ahogy azt szerettük volna. Ennyi bevezető után lássuk a feladatot!

Első feladat

Két feladatot fogunk kitűzni magunk elé, s maradéktalanul megvalósítani, az első egy doboz megjelenítése lesz. A doboz fix szélességgel (283 pixel) rendelkezik, a magassága bizonyos határok között rugalmas (azaz a tartalomtól függ). Egy ilyen kimenetet szeretnénk:

Megjegyzendő, hogy a CSS 3 nagyszintű elterjedtsége esetén, vagy ha csak az lenne a követelmény, hogy Mozilla alapú böngészőkben jól jelenjen meg a végeredmény, pár CSS beállítással (border-radius) elérhetnénk a kívánt célt. Mivel azonban ez manapság nem áll fenn, illetve a lehető legtöbb böngészőt támogatni szeretnénk, egy képet is fel fogunk majd használni a megvalósításhoz.

Célunk eléréséhez először vegyük a következő HTML részletet:A megoldás egy div elemre épít, ezen belül vannak a paragrafusaink - p elemeken belül. A div elemet egy box osztályba soroltuk a class tulajdonságának a beállításával. Ezzel azonosítottuk be, s ezáltal fogunk tudni stílust rendelni CSS-ből. Használhattuk volnak az id tulajdonságot is, de esetünkben ez nem megfelelő, mert ilyen dobozból szándékaink szerint előfordulhat, hogy többet is elhelyezünk egy oldalon belül.

Ha megtekintjük, hogyan néz ki most a kódunk egy böngészőben, semmi különlegesen nem fogunk látni, csak a szövegünket:

Elsőként adjunk neki stílust, hogy láthassuk az egyes elemeket! A box osztályba sorolt elemeknek a kívánt szélességet fogjuk beállítani, továbbá egy szürke hátteret és egy fekete keretet rendelünk hozzá. A box osztályú elemeken belüli paragrafusoknak egy piros keretet fogunk beállítani:A megjelenés ekkor így alakul:

A paragrafusnak alapértelmezett esetben van egy felső és alsó margója, melyek miatt így elválik függőlegesen a doboztól. A többi tulajdonság talán magától értetődő: amit beállítottunk, azt kaptuk.

Mint említettem, egy képre lesz szükségünk a lekerekítésekhez. Ez a kép tartalmazni fogja az összes, mind a négy sarokban levő lekerekítést. Az egyszerűség kedvéért egy a kívánt dobozunkhoz nagyon hasonló, de a kívánt maximum magasságnál jóval magasabb doboz képét fogjuk használni:


A dolog szépségét az adja, hogy ilyenkor nekünk, vagy a grafikusnak egyszerű megmondani, hogy mit rajzoljon: egy olyan dobozt, amit szeretne látni. Nem kell darabolni, nem kell apró fájlokkal törődni, csak egy darab képünk lesz. Hogy hogyan? Kezdjünk neki!

Először is, ezt a képet be fogjuk állítani a div elem hátterének. Ezzel jelentősen közelebb kerülünk a célunkhoz. A CSS-ünk a következő lesz (a korábbi doboz formázásokat eltávolítottuk):Ennek hatására a következő fog megjelenni:


Tényleg kezd alakulni, de a doboz alja még hiányzik. A doboz aljának megjelenítéséhez egy trükköt fogunk alkalmazni. Egy újabb div elemet vezetünk be, melyet - jobb híján - a content osztályba sorolunk. Ennek kapcsán HTML-ünk így alakul:A trükk pedig annyi, hogy ennek a div elemnek szintén beállítjuk a hátteret, de most úgy, hogy az aljához legyen igazítva a kép:A kimenetünk nem lesz sokkal jobb, mint az előző esetben, hiszen most bár mind a felülre igazított képünk az ábrán van (lenne), mind az alulra igazított, ebből csak az utóbbi látszik, mivel eltakarja az alatt levőt:

Hogy ez ne így legyen, a külső div elemnek beállítunk egy felső kitöltést, így a belső, content osztályú div már annyival lejjebb fog kezdődni, nem fogja eltakarni. Ekkor a CSS-ünk a következő:A kódunk megjelenítése már kezd végleges formát önteni, van felső és alsó lekerekítésünk is:


Most már nincs más hátra, mint foglalkozni egy kicsit a paragrafusokkal is, be kell állítani a megfelelő távolságokat számukra, ugyanis nem túl szép, hogy a két szélükön és alul hozzáérnek a dobozhoz. A külső div esetében a kitöltést állítottuk be, ugyanezt a belső esetében is megtehetjük, itt azonban alul lesz rá szükségünk. Ha beállítjuk, akkor a bal és jobb oldalt is beállíthatjuk. A paragrafusok alapértelmezett margóját pedig - hogy legyen távolság a paragrafusok között - felül és alul 10px-re, a két oldalon pedig 0 pixelre fogjuk állítani. A következő CSS-t kapjuk:A kódunk megjelenése pedig a véglegeshez nagyon közeli lesz:

A következő lépés a szaggatott keret eltávolítása lesz, s meg is kaptuk a célul kitűzött megjelenést. Azaz nem, van még a margók kapcsán pár különbség. Ennek kapcsán a CSS a következőképpen fog alakulni (a változások megtekintését és a miérteket az olvasóra bízom - lehet próbálgatni, kicsit csaltam pár helyen):A megjelenés az, amit elképzeltünk:

Második feladat

A második feladat az előzőhöz nagyon hasonló, a különbség, hogy egy fejlécet is szeretnénk kialakítani a doboznak. Egy ilyen végeredményt szeretnénk kapni:

Ehhez a következő HTML fájlból indulunk ki (ez is változni fog menet közben, bár nem sokat):Az alap itt is egy box osztályú div, ezen belül egy h2 elem szerepel - ez lesz a fejléce a dobozunknak, s ez mellett pedig az előző megoldásban is ott levő content osztályú div, s benne a paragrafusok. Azért használunk címsor elemet erre a célra, mert ez a címe, fejléce a dobozunknak, ez alapján tudják a felolvasószoftverek megtalálni az oldalunk kulcselemeit, ez alapján fogja tudni egy kereső megfelelően leindexelni az oldalunk tartalmát. Használhatnánk képet is erre a feladatra, de pont ezek miatt a szempontok miatt nem lenne ilyen jó megoldás.

A megoldásunk hasonlítani fog a fejléc nélkülire, ezért a CSS tekintetében mindjárt egy részeredménnyel indulunk (hasonlítsuk össze az előző megoldással!):Aminek a következtében a megjelenés így alakul:

Egész jó, de pont a fejléc van még hátra. Először kiegészítjük a CSS-ünket az alábbiakkal. Ezzel a 0 margót, 0 kitöltést, a 30 pixel magasságot állítjuk be fejlécünknek, továbbá azt mondjuk meg, hogy ha a szöveg túl hosszú lenne, akkor ne lógjon túl a doboz szélességén, hanem vágja le a böngésző.A megjelenés nagyon nem változik, csak méretileg:


A CSS-hez ha hozzácsapnánk a következőt, egész jól állnánk:A megjelenés:

Ekkor azonban valamilyen módszerrel el kell tűntetnünk a szöveget, mert útban van. Ha a szöveg behúzást megfelelő nagyságú negatív értékre fogjuk állítani, a szövegünk egyből el is tűnik, s azt gondolnánk, hogy a végleges megoldás sincs távolt. A CSS-ünk így alakul:A megjelenés már tökéletes:

A viselkedés sajnos még nem. Ha egy olyan böngészőben nézzük ugyanis az oldalt, amely a CSS-t támogatja, de a képek éppen ki vannak kapcsolva, akkor a fejléc szövegéből nem fogunk látni semmit sem. Ehhez sajnos egy új HTML elemet kell bevezetnünk, de ezzel megoldjuk ezt a problémát. A HTML forrásunk így nyeri el végleges formáját:Egy apró változás van: egy üres span elem. Ezt fogjuk felhasználni a fejléc képének megjelenítéséhez. A szöveg marad a helyén - a span elemet viszont úgy állítjuk be, hogy a szöveg elé kerüljön. Beállítjuk neki a megfelelő hátteret, s így szépen el fogja takarni a szöveget. Ez így már jó lesz. Ehhez a következő CSS-re lesz szükségünk:A span elem jó pozícióban van, a position: absolute, azaz az elhelyezkedésének abszolútra állítása azért szükséges, hogy be tudjon folyni alá a szöveg. Bár a szöveg az később van, mint ez az elem, mégis a háttérbe kerül, mivel maga a span később van, mint a h2 elem. A span-nak ezen kívül még szélességet és magasságot állítottunk, mivel alapértelmezett esetben nem foglalna el semennyi helyet. A hátteret egy külön szabállyal állítottuk, ilyenből van szükségünk többre, ha több fejléccel szeretnénk megjeleníteni majd a dobozt. A HTML-ben a különbség a h2 elem osztálya lesz.

Nos, most már mind a megjelenés, mind a viselkedés tökéletes lesz:

Házi feladat

Végezetül legyen egy házi feladat is, aki szeretne egy kicsit foglalkozni a témával, s a lehetőségekkel: alakítsunk ki egy olyan megoldást, mely lehetővé teszi, hogy ugyanazzal a CSS-sel egyszer fejléccel, egyszer pedig fejléc nélkül jelenhessen meg a doboz. A HTML-ben lehetőség szerint minél kevesebb különbség legyen, azaz gyökér elemként mindenképp a box osztályú div szerepeljen, s az egyik esetben legyen egy h2 elem, a másik esetben pedig ne. Aki ezt meg tudja valósítani, biztos vagyok benne, hogy megértette, hogy hogyan működnek a fentiek. Jó próbálgatást!