ugrás a tartalomhoz

Hírek oldalon belüli kiemelése

LacKac · 2004. Ápr. 23. (P), 17.58
Érdekes és hasznos ötlettel találkoztam Derick Rethans blogjában. Ha valaki egy konkrét hírre mutató linkkel érkezik az oldalra, például mert egy RSS feedben levõ hivatkozást követ (pl. Dátumok elemzése), akkor az oldalon ez a hír ki lesz emelve, a többi szöveg pedig egy világosabb szürke színnel lesz megjelenítve. Ez nagyban segíti, hogy minél hamarabb megtaláljuk, amire szükségünk van.

A megvalósítás nagyon egyszerû, csupán PHP és CSS kell hozzá. Létrehozunk egy olyan CSS osztályt, ami felelõs lesz a többi szöveg elhalványításáért. Ebben color értékként egy háttérhez közelebbi színt adunk meg. Az oldal generálásakor pedig a paraméterként megkapott hír kivételével minden más hírhez tartozó blokkban ezt az osztályt adjuk meg. Ha pedig nincs meghatározva paraméterben egy konkrét hír sem, akkor nem végzünk sehol sem halványítást.

Ez a trükk fõképp akkor lehet hasznos, ha a hírek teljes szövege nem egy külön oldalon van, hanem be vannak építve a fõoldalba. Ilyenkor viszont nagyban megkönnyíti az oldal használatát valamilyen hasonló technika igénybevétele.
 
1

:target használatával CSS-sel is megoldható

Jano · 2004. Ápr. 23. (P), 19.18
Van a CSS alosztályok között egy :target nevü dolog amivel arra az elemre hivatkozhatunk aminek azonositója az URL-ben található # karakter utáni rész! Tehát a lapon belüli link célpontja.
http://www.twisty.com/bandwagon/archives/2003/12/17/191336

Igaz így a többi hír nem lesz elhalványítva de egy jól eltalált kiemelés már így is sokat segíthet.
A fenti példa például nem túl jó.

És mivel nem csak szineket, hátteret használhatunk hanem mondjuk pozicionálást is. Akár lapozas effektet is megoldhatunk pusztán CSS felhasználásával!
http://www.w3.org/Style/Examples/007/target.html

De vicces lehet az is, hogy mondjuk egy :before generálta elembe amit az elem elé pozicionélunk, a contenttel belerakunk egy, az éppen linkelt elemre mutató nyilat. "Ezt keresed!" :)

Egyébként startlapon is van ilyen oldalon belüli kijelölés (amikor oldal tetején kategória linkekből kiválasztjuk a doboz fejléce pirosra vált), de ott javascripttel oldották meg. Sajnos úgy, hogy magát az ugrást is javascripthez kötötték...