✔ DIV als quasi hyperlink

Status
Nicht offen für weitere Antworten.
C

CSS Depp

Mitglied
vielleicht eine blöde frage.

man sieht manchmal seiten, wo z.b. die navigation einen moseover effekt hat,
der art, dass der bereich die farbe wechselt.
die 5 arten wie man das realisieren kann, sind mir bekannt.

was mir nicht bekannt ist, ist wie man es schafft. das der GANZE BEREICH,
und nicht nur darin befindliche p oder font text, auch ein hyperlinks ist.

in der regel sind diese seiten sehr dynamisch, so dass ich das nie erkennen
konnte, ich vermute mal dass der hyperlink von js gestert wird, über die
mausposition, und gar kein href ist. oder doch ?

bilder möchte ich nicht nehmen - denn bilder könnte ich dann nicht mehr
via css bei mousover auswechseln ...


nochmal auf deutsch was ich will:
ich hätte gerne dass ein table/div/span ein link sein kann, grad so
wie auch img oder p.
 
Ein DIV kann kein Link sein.... umgekehrt wird eher etwas daraus:

Da ein DIV ein Blockelement ohne spezielle Eigenschaften ist, stelle deinen Link auch als Blockelement dar: (style="display:block")
 
Du meinst so ?

<body>
<div id="Layer1"
style=
"position:absolute;
width:101px;
height:25px;
z-index:1;
top: 91px;
background-color: #99CCFF;
layer-background-color: #99CCFF;
border: 1px none #000000;">
<div align="center">
<a style="display:block" href="///">link</a></div>
</div>
</body>


Toll was alles funktioniert, wenn man nur weiss wie.

Der "Linkbereich" scheint allerdings die Unterlängen des Textes zu ignorieren,
er orientiert sich wohl an der line height des textes und nich an der höhe des
übergeordneten divs.
Aber das bekomm ich dann grad noch hin.

thanks!
 
Lasse das DIV ganz weg:
HTML: 
<a id="Layer1" style="position:absolute;width:101px;height:25px;z-index:1;top: 91px;background-color: #99CCFF;layer-background-color: #99CCFF;border: 1px none #000000;display:block;text-align:center;" href="///">link</a>
 
.CSS

.taste-div {
width:120px;
height:20px;
position:center;
background-color: #993333;
}

.taste {
width:120px;
height:20px;
position:center;
background-color: #33CC22;
font-family: Verdana, sans-serif;
color: #444444;
font-size: 14px;
line-height: 16px;
font-style: normal;
text-decoration: none;
letter-spacing: 1px;
text-align: center;
line-heigh: 20px;
}

.taste:hover {
background-color: #88FF77 ;
color: #000000;
text-decoration: none;
}



.HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK REL="stylesheet" TYPE="text/css" href="billi.css">
</head>

<body bgcolor="#006600" vlink="#000000">
<div
class="taste-div"
style="position:absolute; z-index:1; left: 20px; top: 60px;">
<a class="taste" " href="///">zu weit oben</a></div>

<div
class="taste-div"
style="position:absolute; z-index:1; left: 20px; top: 100px;">
<a class="taste" " href="///">mozilla ?</a></div>

<a class="taste" " href="///">ohne div</a>

</body>
</html>


kleines Problem:
ich würde den Text gerne 2 Pixel nach unten schieben (im Verhältnis zur Oberkante des a)

grösseres Problem:
das ganze funktioniert nicht mit Mozilla.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück