Weblabor

A mai nap (a múlt hetihez hasonlóan) egy új sorozat indul útjára, CSS lépésről-lépésre címmel. A sorozat keretében minden alkalommal egy-egy CSS alapú megoldással fogunk megismerkedni, melyek mind a CSS rugalmasságát, illetve lehetőségeit fogják bemutatni. Első alkalommal egy olyan listaválasztó kialakításával ismertet meg minket P][G, melynél a szöveges felsorolás mellett képek is megjelennek, s ezáltal - például - kategóriák közül "WYSIWYG" módon választhatunk. Boogie.

Az ötlet

Nemrégiben, saját használatunkra készített portálrendszer adminisztrációs felületének kialakításakor, a hírek rovat kategóriáinak kialakításánál az jutott eszembe, milyen jó is lenne, ha a kategóriákba sorolásnál egy listapanelből választhatnék, és a választáskor mindjárt magában a listapanelban látnám is a kategóriához tartozó képet. A képkiválasztást már jó pár helyen láttam rádiógombokkal vagy felugró ablakok segítségével megvalósítani - de én direkt nem így akartam. Pár perc kísérletezgetés után elértem a kívánt eredményt:


A sasszeműek észrevehetik, hogy a kép bizony nem Internet Explorerben készült, és igazuk is van. A következőkben leírtak csakis Mozillában (illetve a Gecko alapú böngészőkben: Firefox, Galeon, Camino, stb.) voltak hajlandóak működni. Mivel - mint fentebb is írtam - saját, belső használatra készült oldalon használom a bemutatott eljárást, és amúgy is Mozillát használunk, ezért különösebben nem izgatott a dolog.

A megvalósítás

A megvalósítást természetesen szokásos HTML elemekkel és CSS definíciókkal képzeltem el. Lehetséges lenne akár JAVA appletet, Flash megoldást is készíteni, vagy netán többoldalas Javascript kódokat kiagyalni, de valahogy úgy éreztem, ezekhez nem lenne idegzetem. A kezdetekben még csak agyamban létező CSS-es megoldás pedig olyan elegánsnak és pofátlanul egyszerűnek tűnt, hogy nem bírtam ellenálni a kísértésnek és nekiálltam.

A select elem létrehozása

Kiindulásként egy mezei lista szolgál:Nos, eddig még nem túl izgalmas, de legalább Internet Explorerben is működik! :-))

Lista méreteinek meghatározása

Mivel képeim 48x48-as méretűek, ezért a lista (select) magasságát ehhez alkalmazkodva határoztam meg (size="3" - tehát 3x48px=144px), a szélességet pedig hasraütésszerűen 200px-ben. Ne feledjük a 48px széles képecskének is el kell férnie, valamint a szövegnek is, és az sem árt, ha pár pixel helyet hagyunk a kettő között! Miután a listapanel befoglaló méretei megvannak, nekiláthatunk az egyes <option> elemek megformázásának is. Ismét a kép méretéből kiindulva a magasság 48px magas lesz. Stíluslapunk, illetve listapanelünk tehát a következőképp fest:Internet Explorert használó barátaink már most nem azt látják, amit kéne, ugyanis az <option> elem magassági beállításának nincs hatása (az én IE-mben biztos nincs!). De lépjünk tovább!

A képek - végre!

Végre elértünk a képek elhelyezéséhez. CSS szabályainkat tovább finomítva rövidesen széles mosollyal nyugtázhtajuk, hogy a végeredmény olyan, mint mi magunk - azaz tökéletes. :-)

Tehát a képecskék elhelyezéséhez vagy a <select> elem <option> elemeit látjuk el id-vel, és a stíluslapban később ezekre hivatkozunk, vagy magukat az <option> elemeket módosítjuk a megfelelő stílusjellemzőkkel. A következőkben az utóbbi megoldást láthatjuk:Könnyen rájövünk innentől kezdve, hogy nem kellene a háttérképnek ismétlődnie, és a szöveg pedig kezdődhetne beljebb, hogy ne fedje el a képet. Pont ezt tudjuk a background-repeat és a padding tulajdonság segítségével beállítani! Stíluslapunkat ennek megfelelően átalakítva:

Utolsó simítások

Bár már azt hinnénk készen vagyunk, utolsó simításként azért próbáljuk meg a listaszöveget a képek közepéhez igazítani függőlegesen. A függőleges igazítás problémás dolog, ha nem táblázatcellán belül vagyunk. Jelen esetben is hiába próbálkoztam a vertical-align: middle beállítással, eredménye nem volt. Így a jó hasraütéses hagyományokat követve a padding-top értékét állítottam át, úgy kábéra. Ez a betűméret függvényében változhat, de ha pontosan pixelre megadunk font-size segítségével egy méretet is, akkor nagy meglepetés nem fog érni minket. Ezzel együtt persze a height értéket csökkenteni kellett, hogy az összesített magasság továbbra is az eredeti 48px maradjon.Ha még ez sem elég, akkor az option:hover pszeudo kiválasztó esetében adjunk meg még egy szabályt: option:hover { background-color: #F0F8FF; }. Így egérrel a listaelemek fölött a listaelemek háttérszíne megváltozik.

A tökéletes végeredményt elérve paskoljuk meg vállunkat, dőljünk hátra és mosolyodjunk el, mert olyant vittünk véghez, amit az internetező társadalom kb. 10% tud majd megcsodálni, értékelni pedig még annyi sem!

A tökéletesnél is tökéletesebb

Rövid pihenő és megfelelő mennyiségű öndicséret után térjünk vissza még egy kicsit a tettek mezejére! Miért is?, kérdezhetitek, hiszen már készen vagyunk. Igaz, de ez a megoldás még nem aknázza ki teljes mértékben a CSS 2 lehetőségeit. Mivel Internet Explorerben a megoldásunk úgyse működik, Mozilla alatt pedig igen, ezért itt szabadon használhatunk olyan dolgokat is, amik tekintetében egyébként vissza kellene fognunk magunkat. Aki kicsit nézegette már a szabvány, az tudja, hogy HTML tulajdonság alapján is megadható szabály. Jelen példánkban az <option> elem attribútuma a value, mely 0 és 4 közti intervallumban vesz fel értékeket. A tulajdonság kiválasztó segítségével igen sokféleképpen behatárolhatjuk azon elemeket, melyekre a szabályt alkalmazzuk. Lássunk ebből néhányat:

Internet Explorert használók már csak a fejüket kapkodják, és sehogy sem akar összejönni nekik. Nem is fog - a hiba a "készülékükben van", sajnos ez a lehetőség az egyik, mely náluk nem működik.

A kezdetekhez visszakanyarodva HTML kódunk ismét legyen a következő:Stíluslapunkat a tulajdonság kiválasztók kipróbálására a következőként módosítsuk (helytakarékosság miatt a szabályokat egy sorba tördeltem, de aki idáig követte a cikket azt már nem hiszem, hogy ez megzavarja!):Most, hogy többféle megoldást is találtunk a kezdeti problémára, nem marad más hátra, mint a további kísérletezés. Lehet az egészet külső stíluslapra helyezni, melyet valamilyen programmal, adatbázisból generálunk, lehet játszani a formázási lehetőségekkel, s lehet gondolkodni még újabb lehetőségeken is. Ehhez sok sikert kívánok!

Külön köszönet Boogie-nak az építő kritikáért :-)

Források

• CSS-el kapcsolatos infók: http://www.w3.org/Style/CSS/#specs
  
• Az attribútum kiválasztóról: http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-selectors
  
• Ikonok: http://www.kde-look.org