ugrás a tartalomhoz

CSS háttere, mint link

szotsaki · 2006. Szep. 2. (Szo), 11.33
Azt szeretném megtudni, hogy hogyan lehet a CSS hátterét linkké tenni.

A kódom most így néz ki:

<a href="abcd.php"><li id="abcd"></li></a>
<a href="efgh.php"><li id="efgh"></li></a>
A CSS-ben van egy sima háttér az "abcd" id elemhez, és van egy másik háttér a :hover állapothoz is.

Ez még így működik is Operában (máshol egyelőre nem próbáltam), de a validátor figyelmeztet, amiben egyébként igaza van, hogy nem lehet keverni az inline elmenteket (az <a>) a block-level elementekkel (<li>).

Kipróbáltam az 
<a id="abcd" href="abcd.php">&nbsp;</a>
-t is, de ez csak addig rajzolja meg a hátteret, amíg a link tart. Tehát ha telerakom nem törhető szóközökkel, akkor a háttér felső sora még kirajzolódik, de a szóközök alatt már semmi.

Van-e erre valami megoldás?
‹ accept-charset="iso-8859-2" IE vs fx,opera Ne mozaikozódjon az eredetileg 1024x768-as honlap hátterem ›
 ■
1

display:block

Jano · 2006. Szep. 2. (Szo), 11.43
A validátornak valóban igaza van. A LI-be kell tenni az A elemet.
A blokk és inline elemeknek meglehet változtatni a kinézetkori viselkedését a display:block vagy display:inline segítségével.

Háttér váltásra van egy ügyes módszer: mindkét képet egy képre teszük fel és a háttér pozició állítással oldjuk meg, hogy mikor melyik látszódjon. Itt találsz erről pár linket:
CSS Kép csere linkek
2

Megvan a megoldás!

szotsaki · 2006. Szep. 2. (Szo), 12.11
A linket köszönöm, nagyon sok hasznos dolog van rajta.

Viszont, ha az A taget beviszem a listán belülre, akkor a CSS háttérkép ugyan átvált, de nem lesz kattintható.
Tehát így csak az "abcd" szöveg jelenik meg rajta a képen, az válik kattinthatóvá:

<li id="abcd"><a href="abcd.php">ABCD</a></li>
Viszont találtam egy megoldást rá:

<div id="abcd" onmouseover="this.style.cursor='pointer';" onclick="window.location.href='abcd.php'"></div>
Még egyszer köszönöm a választ!
3

diszkrét js

erenon · 2006. Szep. 2. (Szo), 12.25
a{ 
height: 100%;
}
4

NEEEEEE onclicket a valós link helyet!

Jano · 2006. Szep. 2. (Szo), 12.28
Ilyet ne csinálj!! Azért van az A elem, hogy az legyen a link! A te kavarásoddal nem fog működni a link ha nincs javascript engedélyezve, nem fogja tudni követni a Goole, nem lehet pl középső gombbal új tabra nyitni és általában semmi olyasmit nem lehet majd vele csinálni amit egy valódi linkkel lehet!

A megoldás az, hogy az A elemnek a méretét a háttérkép méretéhez igazítod.

Még egy lépéssel érdemes egyébként tovább menned! A te nbsp-s, üres linked helyett egy valódi szöveges linkkel és egy span elemmel megoldható az is, hogy egy szöveges linket lecserélj képesre. Fent is linkelt oldalamon erre is találsz leírást!
5

Megvan! (immár másodszor :))

szotsaki · 2006. Szep. 2. (Szo), 13.38
Köszi szépen, erre nem gondoltam, hogy ekkora gubancot okozok a JS-sel, de néhány óra próbálgatás után rájöttem, hogy nem húsz, harminc új sort kell beírni a CSS és a HTML fájlba, majd mindent módosítani, hanem a CSS fájlban lévő "a"-hoz kell ezt az egy sort hozzáadni:

display:block;
Mert eme egy sor nélkül nem működik a link. De hogy miért van ez, azt még nem tudom :D

Viszont most már van CSS háttér linkem, ami változik, ha fölé ér a mutató, és még "a" tagben is van :) Jah, persze a szabványosságról se feledkezzünk meg.

Köszönöm szépen, még egyszer!