Az alábbi sorszámozatlan lista CSS formázás alapötletét a CSS trükkök oldalon találtam: link Kicsit átalakítva, lépésről lépésre kerül bemutatásra a lista formázása. Végeredményben egy, a könyvtárak és állományok listázásához hasonlító elrendezéshez fogunk jutni, ahogyan ezt az alábbi linken megnézhetjük:
Induljunk ki egy teljesen átlagos sorszámozatlan listából. A listaelemek egy-egy (jelenleg sehová nem mutató) hivatkozást tartalmaznak, és hogy érdekes legyen, az egyik listaelemben egy újabb sorszámozatlan listát helyeztünk el.
A továbbiakban kizárólag a CSS stílusokat írjuk le. Annak érdekében, hogy követhetőbb legyen a formázás logikája, minden új stílusnál az előzőeket is feltüntetjük. Az újonnan létrehozott stílusokat mindig a végéhez illesztjük, de többször fogjuk módosítani a már meglévőket is.
Első lépésben tüntessük el a listaelemek elől a jelölőket. Ez megtörténik a kiinduló listára, és minden <ul> utódjára is.
#hwlist, #hwlist ul {list-style: none;}
Ezután nullázzuk le az egyes listaelemek alapértelmezett behúzását, a későbbiekben a nekünk megfelelő módon fogjuk ezeket majd beállítani:
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px;}
Jól néz ki, ha az első szintű listaelemek után nagyobb térközt hagyunk (a margó méretét megnöveljük), és a betűméretüket is nagyobbra állítjuk.
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px;}
#hwlist>li {margin-bottom:15px;font-size: 20px}
Ha megnézzük az eredményét, a távolság beállítása rendben megtörtént, de a betűméret mindenhol megnőtt az öröklődés miatt. Állítsuk vissza az alsóbb szintűek betűméretét:
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px;}
#hwlist>li {margin-bottom:15px;font-size: 20px}
#hwlist>li li {font-size: 16px}
Most, hogy a betűmérettel és a távolságokkal rendben vagyunk, kódoljuk le a behúzásokat. Ehhez a sorszámozott listákat (vagyis az <ul> tag-ek) baloldali padding értékét módosítjuk.
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px;}
#hwlist>li {margin-bottom:15px; font-size: 20px;}
#hwlist>li li {font-size: 16px; padding-left:20px;}
Most már egészen jól néz ki a lista, csupán a függőleges és vízszintes vonalakat kell valahogyan megoldanunk. Ehhez egy trükköt vetünk be: Egy összesen 1 pixelből álló képet a függőleges vonalnál y irányban, a vízszintes vonalnál x irányban ismétlünk meg az <ul> elemek háttérképeként. (Ezt megtesszük mind a legfelső szintű <ul> elemnél, mind az utódainál.) Egy kis kozmetikázás után már hamar elérjük a kívánt végeredményünket. Kezdjük a függőleges vonalakkal. A pixel.png ismételjük y irányban, és baloldalról 5 pixellel behúzzuk. Emiatt a vonal az első betű alatt fog középtájon kezdődni.
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px; background: url("pixel.png") repeat-y 5px;}
#hwlist>li {margin-bottom:15px; font-size: 20px;}
#hwlist>li li {font-size: 16px; padding-left:20px;}
Ha megnézzük az eredményt azt látjuk, hogy a vonal kettémetszi az kezdőbetűket. Ennek megakadályozására a hivatkozások háttérszínét fehérre állítjuk, és így kitakarjuk a háttérkép vonalat. Ha már a hivatkozásokat formázzuk, levesszük róluk az aláhúzást, és beállítjuk a színeit. Ehhez 2 stílust is definiálnunk kell.
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px; background: url("pixel.png") repeat-y 5px;}
#hwlist>li {margin-bottom:15px; font-size: 20px;}
#hwlist>li li {font-size: 16px; padding-left:20px;}
#hwlist a {background:white; text-decoration: none; color:#725b00;}
#hwlist a:hover {color:#bc9b05;}
Most húzzuk meg a vízszintes vonalakt. Ehhez az első szintű listaelemek utód listaelemeinél (tehát az első szintűeknél nem, ott nincsen vízszintes vonal) a háttérképnél x irányban ismételve helyezzük el az egyetlen pixelből álló háttérképünket y irányban 8 pixellel lefelé eltolva (annak érdekében, hogy a sorok közepénél kezdődjenek a vonalak).
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px; background: url("pixel.png") repeat-y 5px;}
#hwlist>li {margin-bottom:15px; font-size: 20px;}
#hwlist>li li {font-size: 16px; padding-left:20px; background: url(pixel.png) repeat-x 0 8px;}
#hwlist a {background:white; text-decoration: none; color:#725b00;}
#hwlist a:hover {color:#bc9b05;}
Nem lehetünk elégedettek a végeredménnyel, mivel a vonal túl korán kezdődik, és ráadásul folytatódik a hivatkozások szövege után is. Ez utóbbi megakadályozásához a hivatkozásokat blokk szintű elemekké kell alakítanunk:
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px; background: url("pixel.png") repeat-y 5px;}
#hwlist>li {margin-bottom:15px; font-size: 20px;}
#hwlist>li li {font-size: 16px; padding-left:20px; background: url(pixel.png) repeat-x 0 8px;}
#hwlist a {background:white; text-decoration: none; color:#725b00; display:block;}
#hwlist a:hover {color:#bc9b05;}
Még a vízszintes vonalunkat kell megfelelően pozicionálnunk a baloldali margójának állításával:
#hwlist, #hwlist ul {list-style: none; margin: 0px; padding: 0px; background: url("pixel.png") repeat-y 5px;}
#hwlist>li {margin-bottom:15px; font-size: 20px;}
#hwlist>li li {font-size: 16px; padding-left:20px; background: url(pixel.png) repeat-x 0 8px; margin-left: 6px;}
#hwlist a {background:white; text-decoration: none; color:#725b00; display:block;}
#hwlist a:hover {color:#bc9b05;}
Készen is vagyunk.
