ugrás a tartalomhoz

CSS - háttér linkelés

Vrt · 2008. Jún. 6. (P), 11.27
Sziasztok!

A html fájl lábléce így fest:
.
.
<tr>
  <td colspan="7" class="lablec"><div class="email"><a href="index.php"  class=link1>Kezdőlap</a> |  <href="mail.php" class=link1>E-mail</a> </div></td>
</tr>
.
.
A css pedig:
.lablec {
        background-image: url(pic/lableckep.jpg);
        background-repeat: no-repeat;
        height: 38px;
}
.email {
        font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
        font-size: 10px;
        color: #0F5286;
        margin-left: 20px;
}
Azt szeretném, hogy a .lablec -ben beállított háttérkép egy link legyen. Ezzel próbálkoztam:
.
<tr>
  <td colspan="7" class="lablec"><div class="email"><a href="http://alink.hu" ><span>Ez a link</span></a><a href="index.php"  class=link1>Kezdőlap</a> |  <href="mail.php" class=link1>E-mail</a> </div></td>
</tr>
.

.email a {
background: #fff url(pic/lableckep.png) no-repeat;
display: block;
height: 38px;
width: 788px;
}
.email a span {
visibility: hidden;
}
De sajnos az egy soros láblécet szétvágja, több sorba és minden sorba beteszi a hátteret is.
Hogysmint kellene ezt csinálni?

Köszi
K
‹ innerHtml-lel img hozzáadás html font size VS css style font size ›
 ■
1

háttérbe állított kép soha nem lesz link

griphons · 2008. Jún. 6. (P), 11.40
háttérbe állított kép soha nem lesz link
próbálj absolute divekkel pozicionált kép-linket
2

soha ne mond hogy soha

Vrt · 2008. Jún. 6. (P), 12.17
Szerintem meg ez a leírás kb erről szól

http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/

De mivel az ismereteimet a témáról semmiképp nem nevezném túl mélynek ezért megpróbálom a javaslatod...
Persze ettől függetlenül a felvetett problémám még nem oldódot meg..
4

reszben arrol szol

toro · 2008. Jún. 6. (P), 12.35
azert az vilagos a cikkben, hogy nem a hatterkep a kattinthato, hanem a rajta levo elvarazsolt link. Tehat effektive ott van a link, ha nem is latszik, igy ha melle teszel meg masik kettot, akkor azok ott lokdosni fogjak egymast.
3

nem jon at a kerdes lenyege

toro · 2008. Jún. 6. (P), 12.25
azt szeretned, ha a lablec cella egy link lenne, amin rajta vannak a "kezdolap" es "e-mail" szoveges linkek, azaz ha a szoveg melle lattintasz akkor valami mas jon elo, mint az email, vagy a kezdolap?

Ha igen, az szerintem nem tul bolcs tervezes, mert veletlenul kicsit arreb kattintva a latogato szandeka ellenere vihet olyan helyre, amire nem akart elkerulni.

egyebirant, ha az email a definicioba beteszed a 788px szelesseget, akkor az vonatkozik minden linkre, azert kerultek a dolgok egymas ala, es hat ugye ha a linkeken van a hatterkep akkor nem csoda hogy az ismetlodik, hiszen a linkek ismetlodnek

A favago modszer, ha szetvagod a lableckepet a kezdolap es email linkek menten es minden egyes kepelemre rateszed az alink.hu-t
5

stimm..

Vrt · 2008. Jún. 6. (P), 12.59
Kiprószálom, hogy a képet szétdarabolom.
Köszi

K
6

linkelhető cella

griphons · 2008. Jún. 6. (P), 13.00
esetleg ez (csak hogy legyen építő hozzászólásom is):

<td colspan="7" class="lablec" onclick="self.location=\"valami.html\";">...
Bár az onclick eseményt inkább egy div-hez rendelném, ha mindenképp muszály...
7

kerülendő

gex · 2008. Jún. 6. (P), 13.18
ne mutassunk rossz megoldásokat! egy linkhez semmi szükség js-re.
8

rossz példa

rudo · 2008. Jún. 6. (P), 14.57
... az hagyján, de egy layouthoz pedig nincs szükség table -re ;)
9

Azt szeretném mondani hogy...

Ustak · 2008. Jún. 6. (P), 20.48
Ha az elem display:block tulajdonsággal bír, akkor "block level element (blokk színtű elem) ami azt jelenthi, hogy a document flow-ban (dokumentum folyás: ):) :) ) egyéb block elemeket maga alá nyom. Így történik a két linkel, ami egyébként inline elem lenne, de! display:block-ra lett állítva.
Javaslom a float:left tulajdonságot, a valid xhtml-t és a strict doctype-ot (doubled margins of float ie bug miatt) meg hogy ne legyen nagyon táblás, no.