hdesign blog&portfolio

Minap találtam egy szép gyűjteményt navigációs megoldásokra. Voltak köztük szépek, és voltak olyanok, amiért pénzt is kértek. Nos, én ezek közül párat megcsináltam, és közzéteszem teljesen ingyen és bérmentve (természetesen CC licenc alatt).

Rögtön négy verziót is készítettem, közös tulajdonságuk, hogy azonos HTML vázra épülnek, azonos ikonokat használnak, JavaScript mentesek, kizárólag CSS-ből történik az “animálás”.

Nézzük meg őket közelebbről is.

1. Az első megoldásnál csak akkor jelenik meg a navigáció szövege, ha fölé viszed az egeret.
2. A másodiknál szimplán csak a háttere változik a navigációs menünek.
3. A harmadik verziónál a kép pozíciója változik, így egy kicsit izgalmasabbá teszi.
4. A negyedik verzióban az ikonok mérete változik, ezzel tovább fokozva a harmadik verziót. (Itt megjegyzendő, hogy ha ezt élesben szeretnéd alkalmazni, akkor ilyenkor inkább cseréld ki a képet egy nagyobbra, mert így elég pixeles lesz a nagyítástól.)

Ezek kombinálása, és felhasználása már a Te feladatod lesz . Nyomja a Tetszik gombra, ha tényleg tetszett, de csak akkor!

Egy WordPress alapú fejlesztést általában lokális gépen szoktam elkezdeni, és ha a projekt 95% környékén jár, akkor kerül fel a végleges helyére. Ez minden esetben domain név változással jár.

Nincs is ezzel semmi gond, az alábbi forgatókönyv szerint zajlik a költöztetés:

• beállítások menüpont alatt átírom az url-eket,
• mentés,
• SQL dump mentése az adatbázisból,
• fájlok felmásolása a végleges szerverre,
• SQL dump feltöltése az adatbázisba,
• konfigurációban (wp-config.php) átírom az adatbázishoz való konnekciókat.

Ez eddig minden esetben működött, de mi van akkor ha bajba kerülünk mert megszűnik a domainnév?

Egyik ügyfelemnél jártunk így. Felhúztuk neki a véglegesnek mondott szerverre az elkészült WordPress-t, amit átmenetileg egy IP címen értünk el. Ha lesz domain név, akkor majd ráérünk bekonfigolni akkor. Gondoltuk… aztán szóltak hogy nem megy, mert elköltözött a szerver, és az IP címe is megváltozott.

Szerencsére van megoldás erre is. Az admin felület két url mezőjét ki lehet vezetni a wp-config.php-ba. Így nem kell az adatbázist berhelni, hogy minden egyes mező értékét módosítsuk ami beégetve tartalmazza az url-t.

define('WP_HOME', 'http://uj-domain-neve.hu');
define('WP_SITEURL', 'http://uj-domain-neve.hu');

Szóval ha hasonló helyzetbe kerülsz nyugalom, van egyszerű megoldás!

Ha hasznos volt számodra ez a bejegyzés, nyomj lájkot!

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;
}