hdesign blog&portfolio

Egy összetett weboldalnak szüksége van breadcrumbs, vagy más néven kenyérmorzsa navigációra. Segíti a felhasználókat, hogy visszataláljanak a kiindulási pontra, ezzel is növelve az oldal ergonómiáját.

Csináljunk egy egyszerű szerkezetű, kis méretű, és könnyen felhasználható breadcrumbs navigációt:

Lista szerkezetet fogunk alkalmazni, úgy hogy az aktuális oldalt nem linkeljük.

HTML kód

<ul id="crumbs">
	<li><a href="#">Főoldal</a></li>
	<li><a href="#">Szolgáltatások</a></li>
	<li><a href="#">Árvíztűrő szolgáltatás</a></li>
	<li>Leírás</li>
</ul>

Látszik, hogy a listánkból, csak az ul kap egy ID-it, a többi elemet ezen keresztül fogjuk megszólítani css-ből.

CSS kód

Először is kinullázzuk az ul és li elemeket.

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

Ezután jöhet a #crumbs elemünk, aminek adunk egy border tulajdonságot, megadjuk a szélességét és a magasságát.

#crumbs {
	border: 1px solid #CCC;
	height: 30px;
	width: 580px;
}

Most formázzuk meg az ul-ben lévő li elemeket. Ugye ennek nem kell adni külön szelektort, mivel az ul-nek már adtunk, így azon keresztül megszólíthatjuk.

A float-olás azért kell, hogy egymás mellé kerüljenek a li elemek, megadjuk a magasságát, a sorközt (line-height), ami azért kell, hogy ne kelljen belső margót használnunk majd a linknél, mert akkor nem látszana a háttérkép. Viszont nem tudjuk teljesen elkerülni a belső margó használatát, a link nélküli li elem miatt. Ahhoz hogy bal oldalról távolságot tartsunk, kell adni neki egy padding-left tulajdonságot, így ez közvetve a linkre is igaz lesz.

#crumbs li {
	float: left;
	height: 20px;
	line-height: 30px;
	padding-left: 10px;
}

Most megformázzuk az a elemünket. Blokk szintű elemmé kell tenni, hogy az a teljes felületén kattintható legyen. Itt is megadjuk a magasságát, ami jelen esetben 30 pixel. Jobb oldalról kell adni neki egy belső margót, hogy a háttérképre ne lógjon rá. Végezetül megadjuk neki a háttérkép útvonalát, azt hogy ne ismételje, majd a jobb-közép igazítást.

#crumbs li a {
	display: block;
	height: 30px;
	padding-right: 10px;
	background: url(img/crumbs.png) no-repeat right center;
}

Ahhoz hogy felhasználóbarát dolgot hozzunk létre, adjunk a linknek színt, és aláhúzással jelöljük hogy az bizony kattintható…

#crumbs li a {
	text-decoration: underline;
	color: #666;
}

…majd csináljunk hover állapotot is neki, hogy a felhasználóval érzékeltessük: “ha rám kattintasz, valami történni fog”.

#crumbs li a:hover {
	color: #0C6;
}

Naponta találkozunk lapozókkal, ám ezek nem mindig helyeznek hangsúlyt a felhasználóbarátságra. Ebben a bejegyzésben bemutatok egy olyan megoldást, amivel a felhasználó, és mi is jól járunk.

Nos, akkor nézzük, a célunk az hogy a felhasználó felismerje hol jár, mutassuk neki, hogy még milyen lehetőségei vannak, legyen egyszerű a html szerkezete, és kevés css kód is elegendő legyen hozzá.

Lapozónál a legszebb, ha felsorolást (ul li) alkalmazunk, nézzük is a html kódot:

<ul id="pagination">
	<li class="previous-off">« Előző</li>
	<li class="active">1</li>
	<li><a href="page2">2</a></li>
	<li><a href="page3">3</a></li>
	<li><a href="page4">4</a></li>
	<li><a href="page5">5</a></li>
	<li><a href="page6">6</a></li>
	<li class="next"><a href="page2">Következő »</a></li>
</ul>

Nézzük mit kell majd css-ben formáznunk: A felsorolásunkban az ul kap egy “pagination” ID-t, ezzel tudjuk majd css-ből formázni a benne levő elemeket. Ha több lapozót is szeretnénk egy oldalon belül, akkor kerüljük az ID használatát, változtassuk osztályra (class=”padination”), amiből lehet több azonos is egy oldalon belül. Ezen belül, az “Előző” és “Következő” gomboknak lesznek aktív és inaktív állapotai, az oldalszámoknál az aktuális oldal kijelölt állapota, valamit a többi lehetséges oldalt tartalmazó li elemek formázása.

#pagination {
    display: block;
    width: 600px;
    list-style: none;
}
 
#pagination li{
    float: left;
    border:0;
    margin:0;
    padding:0;
    list-style:none;
}
 
#pagination .previous-off,
#pagination .next-off {
    color:#666666;
    display:block;
    float:left;
    font-weight:bold;
    padding: 3px 4px;
    border:solid 1px #CCC;
    margin-right: 2px;
    background: #CCC;
}
 
#pagination .next a,
#pagination .previous a {
    font-weight:bold;
    border:solid 1px #CCC;
    margin-right: 2px;
}
 
#pagination .active{
    display:block;
    float:left;
    padding: 3px 6px;
    color: #000;
    font-weight:bold;
    border:solid 1px #666;
    margin-right: 2px;
}
 
#pagination a {
    color: #666;
    display:block;
    float:left;
    padding:3px 6px;
    margin-right: 2px;
    text-decoration:none;
    border:solid 1px #CCC;
}
 
#pagination a:hover {border:solid 1px #999;}

Ez a mű a Creative Commons Nevezd meg!-Ne add el!-Így add tovább! 2.5 Magyarország licensz alatt készült.

Egy weboldal grafikai tervezésénél, ha a SEO és Accessibility szempotokat is figyelembe veszünk,  nem használunk olyan szöveges elemeket, melyeket majd képként kell megjelentíteni, nem használunk például élsimítást a szöveghez, hogy az a valóságban is szövegként (pl: <h1>Lorem Ipsum Kft.</h1>) jelenhessen meg.

Ez azért fontos, ha a keresők ráfutnak az oldalra, akkor ezeket szövegnek “lássa”, mert ugye ha az egy kép, akkor nem “látja”, illetve a látássérülteknek készült olvasóprogramok sem “látják”.

Ám nem mindíg tudjuk elkerülni ezek használatát, például egy a fejlécben levő logó esetében.

Erre létezik egy megoldás amit alább részletesen ismertetek.

Elfogadott megoldás a text-indent CSS tulajdonság használata ennek megoldására.

A következő példáben egy képzeletbeli cég logóját fogjuk ezzel a módszerrel felhelyezni a weboldalára.

A text-indent tulajdonság
Ezzel a tulajdonsággal a tömbszerű elemekben levő tartalom első sorának behúzását lehet megadni. Leggyakrabban tabulátorhatás keltésére használják. (Megadható hosszérték, százalék, és öröklés. Alapértéke: 0) (forrás: O’REILLY – CSS zsebkönyv)

A trükk lényege hogy beleírjuk egy h1 tag-be a cég nevét, és css-ben megadjuk a hátterét – ami a cég logója lesz – majd a text-indent tulajdonsággal a beleírt szöveget mínusz értékkel kitoljuk a megjeleníthető területről.

HTML kód:

<div id="header">
<h1>Lorem Ipsum Kft.</h1>
</div>

CSS kód:

#header{
width: 980px;
height: 200px;
}
 
#header h1{
display: block;
width: 300px;
height: 30px;
background: url(img/logo.png) no-repeat;
text-indent: -9999px;
}