Azok, akik weboldalak készítésére adják fejüket, szinte menetrendszerűen jutnak el néhány típuskérdéshez. Az egyik ilyen, hogy hogyan lehet a legegyszerűbben lekerekített sarkú dobozokat létrehozni? A válasz természetesen az, hogy nagyon sokféleképpen. Az egyik legrégebbi, már-már „atombiztosnak” mondható, ám legkevésbé sem elegáns megoldás, hogy a létrehozunk egy 3×3 cellából álló táblázatot, amelynek a négy sarokmezőjébe elhelyezzük a megfelelő képeket, a többinél pedig megadjuk a szükséges háttérszínt. E módszer legnagyobb előnye, hogy szinte minden böngészőn, és majdnem minden esetben tökéletes megoldást ad – az egyetlen probléma az lehet, ha a képek valamiért nem tudnak letöltődni –, ugyanakkor több mint macerás minden egyes doboz esetében új és új táblázatot létrehozni, arról nem is beszélve, hogy egy dizájnváltás esetén majdnem a teljes HTML-kódot ki kell cserélni.
CSS-kódunkon alig-alig kell módosítani a hírdobozok sarkainak lekerekítéséhez
Remélhetőleg a Weboldalkészítő suli hallgatóinak az az egyszerű eset nem okoz(na) problémát, amikor előre meg tudjuk határozni a dobozok egyenméretét. Hiszen ilyenkor nem kell mást tennünk, mint a hir osztályú ‹div›-nek megadni a pontos méretét, és mögé illeszteni a pixelpontossággal előre megrajzolt háttérképet:
div.hir {
width: 730px;
height: 520px;
margin-bottom: 20px;
padding: 10px;
background: url(../images/bg_hir.gif);
}
Ezzel a megoldással csak egyetlen apró probléma van: a fehér hollónál is ritkább, hogy a dobozoknak a szélességét és a magasságát is előre meg tudjuk határozni. Sőt, mint azt hamarosan látni fogjuk, már az is nagy segítség, ha dobozunknak legalább az egyik méretét – jellemzően a szélességét – tudjuk előre.
Ha mindent jól csináltunk, akkor a változó magasságú „dobozaink” szép lekerekített sarkokat kapnak
Fix szélességű dobozok
Miután konferenciánk oldala – egyelőre – legalább 1024 pixel szélességű képernyőkre optimalizált (s mint ilyen, a legutóbbi adatok szerint a felhasználók kb. 94–96 százalékának megfelelő), rögzített szélességű elrendezésen alapszik, így pontosan tudjuk, hogy a hírblokkok szélessége pontosan 734 képpont. Ezenkívül azt is tudjuk – hiszen mi csináltuk –, hogy minden hírblokk, vagyis hir osztályú ‹div› egy harmadik szintű címsorral (‹h3›) kezdődik, amit pontosan egy bekezdés (‹p›) követ. Igazából számunkra elegendő lenne már az is, hogy van egy címsorunk, ha Balázs korábban nem találta volna ki azt a szép világoskék átmenetet a középső panel tetejére. Ez esetben ugyanis nem kellene átlátszó hátterű GIF-ekkel „játszadoznunk”, de csak azért, hogy leegyszerűsítsük a dolgunkat, nem fogjuk az eredeti dizájn dekorcsíkját eltávolítani!
Az biztos, hogy szükségünk lesz egy háttérképre, amelynek pontosan 734 pixel szélesnek és legalább 400–500 pixel magasnak, vagy még magasabbnak kell lennie, a biztonság kedvéért. Ezt a háttérképet – amit akár pixelgrafikus, akár vektorgrafikus rajzolóprogrammal létrehozhatunk – természetesen egy lekerekített sarkú téglalap fogja kitölteni, és hogy az első hír se bántsa a már említett dekorcsíkot, átlátszó GIF-ként kell létrehoznunk.
Főoldalunk HTML-kódjához hozzá sem nyúlunk, az jelen pillanatban pont jó úgy, ahogy van – hiszen munkánk egyik célja ugyebár pont az, hogy oldalaink (X)HTML kódja minél egyszerűbb és rövidebb legyen.
Egy kis változtatás a stílusokon, és dobozaink még mutatósabbak lesznek
Vegyük hát elő CSS-ünket, és azon belül keressük meg a hírek ‹div›-jeinek stílusát leíró részt. Magában a div.hir-ben csak annyit tegyünk meg, hogy beleírjuk a pontos szélességet (width: 734px;). Ettől még sok változást nem fogunk látni, hiszen eddig is pontosan ennyi volt, de ennyit megtehetünk azért, hogy egy esetleges későbbi változtatás miatt nehogy „kitüremkedjenek” a szövegek a dobozból, vagy esetleg eltűnjön a jobb felső és alsó sarkok kerekítése. A hírblokkon belüli címsornak (div.hir h3) eddig meghatároztuk a betűtípusát, -méretét és -stílusát, valamint húztunk alatta egy vékony világoskék vonalat. Ezen most annyit változtatunk, hogy a vonalat vagy megszüntetjük, vagy egy kicsit megvastagítjuk és fehérre színezzük – ízlés kérdése, érdemes mind a két változatot kipróbálni. Természetesen ettől még a sarkokkal semmi nem fog történni, ahhoz szükségünk lesz a háttérkép beállítására: background: url(../images/bg_hir.gif) no-repeat top center;
Tulajdonképpen a háttér definiálásakor a GIF kép pontos elérési útja mellett csak a felülre történő igazítás (top) a fontos, hiszen a kép úgyis pontosan olyan széles, mint a ‹h3› elem. Ennélfogva teljesen mindegy, hogy vízszintesen balra, középre vagy jobbra igazítjuk, ugyanakkor az is biztos, hogy a kép a magasabb, így semmi esélye sincs ismétlődni – ám sok esetben jól jöhet, ha az abszolút biztonságra törekszünk, mivel kisebb az esélye annak, hogy nem kívánt jelenségekkel találkozunk oldalainkon.
A mintaoldalon eljátszadozunk a háttérképekkel és a padding értékeivel
Ahhoz, hogy a szöveg ne lógjon ki a lekerekítésből, és ne tapadjon rá a tetejére, szükségünk lesz egy kis belső eltartásra, amelynek a mérete természetesen függ a lekerekítési sugártól is. A lemezmellékleten is megtalálható példánál elég volt fent és lent 2-2, míg oldalt 8-8 pixel (padding: 2px 8px;). Ezzel készen is van dobozunk teteje, esetleg annyi módosításra lehet még szükség, hogy sötétebb háttérképre érdemesebb világos színnel írni, mint ahogy a végső változatnál is sötétkék háttérhez fehér betűszínt választottunk (a normál szövegeknél és a linkeknél is).
Innentől kezdve sejthető, hogy mi következik: a hírblokk bekezdésénél is beállítjuk ugyanazt, vagy legalábbis ugyanakkora méretű, lekerekítésű, legfeljebb más színű hátteret – ugyanakkora belső eltartással:
div.hir p {
padding: 2px 8px;
background: url(../images/bg_hir.gif) no-repeat bottom center;
}
Abban az esetben, ha híreink több bekezdésből állnának, akkor egy kicsit módosítani kellene ezen a „felálláson”. Akkor ugyanis a köztes bekezdéseknél elegendő lenne egy sima egyszínű hátteret megadni (a szín természetesen megegyezne a képen lévő színnel), némi oldalsó eltartással, és csak az utolsó bekezdésnél (amit természetesen a HTML-kódban külön osztállyal kellene ellátnunk) használni a háttérképet.
Mint korábban említettük, jelentős mértékben leegyszerűsíthetjük azzal a helyzetet, ha oldalunknak – vagy legalábbis a híreket tartalmazó panelnek – egyszínű a háttere. Ez esetben ugyanis a hír ‹div›-hez rendelhetnénk hozzá az alulra igazított háttérképet, amit fölül a címsor – vagy legalábbis az első elem – háttere „zárna le”. De miután a címsor benne van a hírblokk elemben, így a ‹div› háttere egyben háttere a ‹h3›-nak is, amit egy nem átlátszó kép gyönyörűen ki is takarna, de az átlátszó részek nem. És miután nekünk a felső dekorcsík miatt átlátszó GIF-et kellett használnunk, ezt a megoldást ennél az oldalnál el kellett vetnünk.
Amikor a szélesség sem állandó
Egy kicsit nehezebb a helyzetünk akkor, amikor vagy nem tudjuk előre pontosan megmondani, hogy milyen széles is lesz egy-egy doboz, vagy – és szerencsére ma már ez is egyre gyakoribb eset – olyan oldalt készítünk, amelyben az (egyes) elemek szélessége a böngészőablak szélességének függvényében változik. Ilyenkor vagy feldaraboljuk előre a háttérképet és ezekkel a darabokkal „játszadozunk”, vagy – és mi több ok miatt is inkább ezt javasoljuk – akkora hátteret kell előkészíteni, amelynek a szélessége és magassága is biztosan nagyobb, mint amekkora doboz létrejöhet az oldalon.
Mindössze néhány extra span elemre van szükség, hogy a szélességekkel se legyen semmi probléma
Ami sajnos rossz hír, hogy ilyen esetben bizony hozzá kell nyúlnunk az (X)HTML-állományunkhoz is. Azért annyira nem vészes a helyzet, mindössze arról van szó, hogy a jobb felső és alsó sarkok pontos illesztéséhez szükségünk lesz két tároló elemre, jellemzően egy-egy üres ‹span›-ra (vagyis ‹span›‹/span› párosra) a címsor és a bekezdés végére. (Miután ez esetben nagyon ellenjavallt az átlátszó hátterű képek használata, ezért elviekben az egyik ‹span›-t tehetnénk a ‹div›-be is, azaz a bekezdésen kívül, de a megoldás lényege így is látszani fog.) Az üres ‹span›-ek miatt a Firefox HTML Validator reklamálni fog, de a W3C ellenőrzőprogramjának semmi kifogása nem lesz ezek ellen, ettől még oldalunk tökéletesen valid marad.
Miután az (X)HTML-kódban elhelyeztük az üres ‹span›-eket, nekikezdhetünk a stíluslap beállításainak. A mintában a ‹div› elemünknek csak azért adtunk meg szélességet a 123. sorban, hogy a későbbiekben ennek átírásával könnyen ellenőrizhető legyen, a dobozok kerete a megváltozott szélességekhez is pontosan illeszkedik.
Mielőtt tovább lépnénk a stílusok „finomhangolásával”, ismerkedjünk meg egy kicsit alaposabban a megoldás kulcselemével, a position stílustulajdonsággal! Ez a tulajdonság négy értéket vehet fel: static, relative, absolute és fixed. E négyből a static az alapértelmezett; azt jelenti, hogy az elem az ún. normálfolyamban (normal flow) elfoglalt helyén jelenik meg. A fixed pozicionálás mindig a böngésző ablakához rögzítve történik, vagyis ha egy elemnek azt adjuk meg, hogy position: fixed; top: 0; right: 0;, akkor az – az oldal görgetésétől függetlenül – mindig a böngészőablak jobb felső sarkában lesz. Mondhatni természetesen ez alól kivétel az Internet Explorer 6-os és régebbi változatok, amelyeknél a fix valahogy nem igazán jelent rögzítést. Az elem elsőre valóban a megadott helyen fog megjelenni, de a görgetéstől – rögzítés ide, rögzítés oda – szépen el elmozdul az oldal többi elemével együtt.
A relative tulajdonságú elemeket a böngészők a normálfolyamban elfoglalt helyükhöz képest a top, bottom, left és right tulajdonságoknál megadott mértékben relatív mértékben mozgatják el. Például a position: relative; left: 20px; azt jelenti, hogy az adott elemet az eredeti pozíciójához képest 20 pixellel jobbra eltolva kell megjeleníteni, de ugyanezt a hatást érhetjük el a right: -20px; megadásával is. (A left és right vagy a top és bottom egyidejű megadásakor böngészőnként változik, hogy az egyes elemek hol is jelennek meg.)
Az absolute pozícionálás esetén a kiválasztott elem elhelyezése az adott objektum azon közvetlen vagy legközelebbi közvetett szülőeleméhez képest történik, amelyet korábban kivettünk a normálfolyamból, vagyis a position tulajdonságát relative-ra, absolute-ra vagy fixed-re állítottunk. Amennyiben nincs ilyen elem, úgy az elhelyezés a body elemhez képest történik.
Játék a stílusokkal, avagy egy technika végtelen lehetőségekkel
Most már tudjuk, hogy mit kell tennünk ahhoz, hogy dobozaink jobb felső és alsó sarkait a helyükre illesszük. Először is a hír blokk ‹h3› és ‹p› elemeinek stílustulajdonságai közé fel kell vennünk a positiont is relative értékkel, ám miután nem adunk meg további pozicionáló tulajdonságot (top, bottom, left, right), így ezek nem fognak elmozdulni. A bennük található ‹span›-oknak ugyanakkor fix pontot jelentenek (div.hir h3 span és div.hir p span), amelyek position tulajdonságait természetesen absolute-ra állítjuk. Ezenkívül mindkét ‹span›-nak a magasságát 100%-ra kell állítanunk, hiszen különben üres elemként nulla pixel magasak lennének, és úgy nem sokat látnánk a később beléjük kerülő háttérképekből. Mindkét ‹span›-t a befoglaló elem jobb széléhez kell igazítanunk, vagyis mindkettőnél adjunk meg right: 0;-t. A két ‹span› között szinte csak annyi lesz a különbség, hogy a címsorét (div.hir h3 span) fentre kell igazítanunk (top: 0;), míg a bekezdését (div.hir p span) lentre (bottom: 0;).
Ezenkívül még mindkettőbe megy a háttérkép – természetesen a címsornál fentre, a bekezdésnél lentre igazítva –, valamint némi paddinggal gondoskodunk arról, hogy a szövegek ne lógjanak ki a keretből, esetleg ne lógjanak rá a keret grafikájára.
A háttérképeket – még az ilyen egyszerűeket is – érdemes „célprogramokkal” létrehozni
Ahogyan az a példánkon – és a CSS-kódrészleten – is jól látszik, ezzel a módszerrel nemcsak lekerekített sarkú téglalapokat, hanem szinte tetszőleges háttérképeket használhatunk dobozaink díszítésére, mindössze a háttérkép elérési útjának, a belső eltartásoknak, és helyenként a képtől függően a fejléc vagy a benne elhelyezett ‹span› magasságának és/vagy szélességének pontos megadásával. Ahogyan a lemezmellékleten is megtalálható példa alaposabb szemrevételezéséből kiderül, sajnos az Internet Explorer kisebb hibáit egy kiegészítő CSS-sel, valamint az IE6 és régebbi változatok (ezt jelenti az egy későbbi leckében sorra kerülő feltételes megjegyzésben az „lte”) valamivel súlyosabb hibáját egy pársoros JavaScripttel kell korrigálnunk.
Címsorok képpel helyettesítve
Másik tipikus vissza-visszatérő kérdés a webes oldalakat készítők részéről: hogyan lehet legalább a címeket, címsorokat díszesebb (vagy legalábbis más) betűtípussal és/vagy látványos(abb) effektussal megjeleníteni? Természetesen a legegyszerűbb, és emiatt is a legtöbbször használt megoldás, hogy ezeket a szövegeket képpel helyettesítjük – azonban nagyon nem mindegy, hogy ezt miképpen tesszük. Már csak azért sem, mert az oldal kódjának írásakor több szempontot is figyelembe kell vennünk. Például hogyan fog megjelenni oldalunk, ha a képek valamiért nem töltődnek le a felhasználó böngészőjébe? (például kikapcsolta a képek letöltését, valamiért a webszerver csak akadozva érhető el stb.) Az sem utolsó szempont, hogy a keresők nem igazán szeretik a képes címsorokat (még az alt attribútum kitöltésével együtt sem), így oldalunk az egyébként hasznos tartalomtól függetlenül nem fog jó helyen szerepelni a találati listákon.
Egy probléma, öt különböző megoldás – hogyan helyettesítsük a képpel a címsorokat
Az évek során több jó és kevésbé jó megoldással találkozhattunk a honlapokon, mi ezek közül hat plusz egy megoldást szeretnénk bemutatni – előnyeikkel és hátrányaikkal egyetemben.
Így jelenik meg a mintaoldal kikapcsolt CSS-sel, ha még a képet sem találja a böngésző
A lista élére természetesen az a klasszikus, ám nem igazán javasolt megoldás kerül, amikor egy ‹img›-vel helyettesítjük a címsort. Túl a már említett keresőproblémán, ez a megoldás azért sem mondható tökéletesnek, mert ha a kép valamiért nem tud letöltődni, akkor az alternatív szöveget egyedül a Firefox jeleníti meg normálisan, a többi böngészőben igencsak csúnya lesz az eredmény.
A CSS még mindig hiányzik, de legalább már a kép megvan
A következő, csak egy kicsit jobb megoldás, hogy a szöveget ‹b›‹/b› vagy ‹span›‹/span› elemek közé zárják, majd a címsor háttereként jelenítik meg képet, a befoglaló elem láthatóságát pedig megszüntetik egy display: none; stílustulajdonsággal. E megoldás előnye, hogy a keresők látják a címsor szövegét, ami ráadásul meg is jelenik, még ha nem is a várt szépségében, ha a CSS valamiért tiltott az adott böngészőben. Ugyanakkor gondot jelent, ha a CSS engedélyezett, de a kép nem tud letöltődni, mivel ekkor bizony üresen marad a helye, és a felolvasó programok is figyelmen kívül hagyják a láthatatlanná tett szöveget.
A CSS-t bekapcsoltuk, de a képet nem találja a böngésző
A harmadik megoldás e két problémából ez utóbbit küszöböli ki azzal, hogy nem láthatatlanná, csak láthatatlanul kicsivé, egész pontosan 0×0 pixel méretűvé kicsinyíti a szöveg rendelkezésére álló helyet, így az semmit nem fog kitakarni a megjelenő háttérképből.
Amikor minden tökéletes: a CSS bekapcsolva és a kép is megvan
A negyedik módszer a képpel történő helyettesítésre arra a klasszikus esetre hasonlít, amikor „valaki még az övhöz is nadrágtartót visel”. Vagyis a címsorban elhelyezzük a helyettesítő képet ‹img› elemként, majd mögé írjuk szövegesen is, például ‹span›‹/span›-ok közé ágyazva, majd ez utóbbit eltüntetjük a CSS-ből. Ennél a megoldásnál „érdekes” eredményt hozhat, ha a kép nincsen meg, és még a CSS sem tud betöltődni, ugyanis ilyenkor a szöveg kétszer fog megjelenni: egyszer az alternatív szöveg és egyszer az utána írt változat – ezért ennél az ‹img›-ben érdemes üresen hagyni az alt attribútumot.
Az (X)HTML-kód szempontjából még az ötödik megoldás a legszebb és legkorrektebb, ennél ugyanis nem kell semmilyen befoglaló elemet sem használunk a szöveg eltüntetéséhez, helyette a címsor text-indent stílustulajdonságát állítjuk extrém értékűre, például -9999px-re. Így a szöveg nem jelenik meg, hanem szépen helyet hagy a háttérképnek. Probléma ebben az esetben is csak akkor lesz, ha a CSS eltünteti a szöveget, ám a kép nem töltődik le.
A jelenlegi ismeretek szerint az egyik, vagy még inkább a legjobb megoldás, ha – a sarok lekerekítéshez hasonlóan – egy üres ‹span›-t helyezünk el a címsorban. Ezt követően a címsor-pozicionálást a CSS-ben relatívra állítjuk (position: relative;), a benne levő ‹span›-ét pedig abszolútra (position: absolute;). Mivel pedig az alapértelmezett pozíciója top: 0; left: 0; lesz, így a böngésző pontosan a címsor bal felső sarkába fogja igazítani, és a 100%-os szélességnek és magasságnak (width: 100%; height: 100%;) köszönhetően pontosan le is fogja azt fedni. Innentől kezdve csak arra kell figyelnünk, hogy a kép háttere ne legyen átlátszó, és valóban tökéletesen takarja ki az alatta levő szöveget.
Képhelyettesítés websuli módra
Természetesen – leszámítva a legelső és a negyedik változatokat – mindehhez az is szükséges, hogy a címsorokat egyedi azonosítóval lássuk el azért, hogy a CSS-ben mindegyikhez a megfelelő képet tudjuk hozzárendelni.
Kissé macerás minden egyes kép méretét beállítani a stíluslapon
E módszerrel 4–5 címsornál még nincs is semmi probléma, de amikor mindezt egy hosszabb és több címsort tartalmazó írásban kell megtenni, akkor ez több mint nehézkessé válik, főként, hogy minden egyes képnél be kell(ene) állítani a háttérkép pontos méretét. Mondjuk, ez utóbbit még ki lehet úgyis váltani, hogy a címsoroknak – akár szintenként, akár egységesen – 100%-os szélességet és akkora magasságot állítunk be, amekkorába minden kép befér, majd a képeket balra felülre igazítjuk, és megadjuk, hogy a böngésző a képet ne akarja ismételni, az egyes nevesített címsoroknál pedig csak a háttérképet kell definiálni:
h1 {
width: 100%;
height: 50px;
background-position: top left;
background-repeat: no-repeat;
}
h1#h1_011 {
background-image: url(h1_011.png);
}
Ez a kis program megkeresi a címsorok képeit, és beállít mindent, ami szükséges a megjelenítésükhöz
Viszont mennyivel szebb és elegánsabb azonban, ha – egy megfelelő névkonverziót betartva – mindezt egy JavaScript programra bízzuk! E kis program a tartalomjegyzékhez hasonlóan – ám ezúttal egy kicsit megint másként – végignézi a cikkek h1, h2 és h3 elemeit (275–298. sorok), és azokat szó szerint a megfelelő képpel helyettesíti (288–296. sor). Itt csak a képek betöltését indítjuk el (és illesztjük be a címsorba), ezért külön ellenőrizzük, hogy a kép betöltődött-e (loadHeadImg), vagy valamilyen hiba történt (errorHeadImg) a betöltéskor. Előbbi esetben távolítsuk el a felesleges alt attribútumot (ha megvan a kép, semmi szükség nincs rá), míg ha hiba történt (pl. a kép nem található), akkor töröljük a képobjektumot, és írjuk vissza a címsor eredeti szövegét.
A program minden (megtalált) címsorképet beilleszt a helyére
A cikkben bemutatott példaprogramok, HTML és CSS fájlok letölthetők innen.
Egy hasznos segédprogram: szövegből kép – automatikusan
Amíg csak 2–3–5 címsor van egy-egy dokumentumban, addig még nincs is gond azzal, hogyan készítsük el ezek képes változatát, hiszen ez olyan léptékű feladat, amit gyakorlatilag bármilyen képszerkesztőben vagy vektorgrafikus illusztrációs programban meg lehet könnyedén oldani. Azonban ha van mondjuk egy tucat dokumentumunk, amelyek mindegyikében 30–40 címsor található, akkor már egy átlagos webtervező elgondolkodik azon, hogy jó ötlet volt-e kitalálni, hogy ezek a címsorok díszesebb betűkkel, vagyis képként jelenjenek meg az oldalon? De ha kéznél van például egy CorelDRAW (és egy makróírásban kicsit is jártas személy), akkor még ez a mennyiség sem okoz különösebb problémát.
Az aktuális leckéhez tartozó letölthető példák közé most odatettünk egy CorelDRAW-ban írt minialkalmazást is, aminek segítségével bárki tetszőleges számú címsort képpé tud alakítani.
Ebben először is létre kell hozni minden egyes címke „sablonját”: vagyis egy-egy grafikus szöveget (artistic text) kell készítenünk, amit igény szerint lehet formázni (betűtípus, -méret, -stílus, szín stb.), és amelynek alapértelmezett szövege a címke pontos neve, amire alkalmazni szeretnénk (például h1, h2, h3 stb.). Ezt követően lépjünk be a CorelDRAW Visual Basic szerkesztőjébe (Tools -› Visual Basic -› Visual Basic Editor), és az ExportHeads VBAProjecten belül keressük meg a ThisDocumentshez tartozó kódot. Ebben át kell írni a 10. sorban a cFile változó definiálásánál, hogy melyik HTML-állomány címsorait is akarjuk képként létrehozni (az állománynak alapértelmezés szerint az ExportHeads.cdr fájllal azonos mappában kell lennie). Ezt követően nincs is más dolgunk, mint megnyomni a Run Sub/UserForm gombot, majd megvárni, amíg a program pár másodperc alatt végigolvassa a HTML-állományt, megkeresi a beállított címkéket (ezeken belül lehetőleg ne használjunk további formázásokat), és azok alapján egyesével elkészíti a szöveggel azonos nevű átlátszó hátterű GIF-eket.
A CorelDRAW-makró a mintaszövegek alapján készíti el a szükséges képeket
