css kodok & HTml kodok a hotdogra és más weblapokra is !

weblap Fejlesztés csak a hotdogon !!

számlálo léc CSS lépésről-lépésre: képválasztás listapanel segítségével


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.

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 végeredmény


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:

 
  1. <select name="icon" id="icon" size="3">  
  2.  <option value="0">Hírek</option>  
  3.  <option value="1">Karbantartás</option>  
  4.  <option value="2">Fontos</option>  
  5.  <option value="3">Mozilla</option>  
  6.  <option value="4">Firefox</option>  
  7. </select>  

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:

 
  1. <style type="text/css">  
  2. select {  
  3.   height: 144px;  
  4.   width: 200px;  
  5. }  
  6. option {  
  7.   height:48px;  
  8. }  
  9. </style>  

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:

 
  1. <select name="icon" id="icon" size="3">  
  2.  <option style="background-image:url(images/news.png);" value="0">Hírek</option>  
  3.  <option style="background-image:url(images/cog.png);" value="1">Karbantartás</option>  
  4.  <option style="background-image:url(images/important.png);" value="2">Fontos</option>  
  5.  <option style="background-image:url(images/mozilla.png);" value="3">Mozilla</option>  
  6.  <option style="background-image:url(images/firefox.png);" value="4">Firefox</option>  
  7. </select>  

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:

 
  1. <style type="text/css">  
  2. select {  
  3.   height: 144px;  
  4.   width: 200px;  
  5. }  
  6. option {  
  7.   height: 48px;  
  8.   padding-left: 60px;  
  9.   text-align: left;  
  10.   background-repeat: no-repeat;  
  11. }  
  12. </style>  

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é



Weblap látogatottság számláló:

Mai: 23
Tegnapi: 10
Heti: 33
Havi: 369
Össz.: 79 202

Látogatottság növelés
Oldal: számlálo léc CSS lépésről-lépésre: képválasztás listapanel segítségével
css kodok & HTml kodok a hotdogra és más weblapokra is ! - © 2008 - 2024 - csskodok.hupont.hu

Az ingyenes honlapkészítés azt jelenti, hogy Ön készíti el a honlapját! Ingyen adjunk: Ingyen Honlap!

ÁSZF | Adatvédelmi Nyilatkozat

X

A honlap készítés ára 78 500 helyett MOST 0 (nulla) Ft! Tovább »