Hallo zusammen,
ich bastel momentan an einer Webseite, bei der die Menüeinträge so aussehen:
Das ist letztendlich natürlich nicht nur eine schwarze Fläche (die dann aber auch alle gleich groß sind), sondern ein etwas schöneres Bild das aus einer PNG mit transparenten Bereichen stammt.
Wenn ich bei meinen Menüeinträgen jetzt aber einfach jenes Bild als Hintergrundbild setze und sie per CSS ein wenig zusammenschiebe ist das gesamte Bild klickbar und nicht nur der nicht transparente Teil - sehr schlecht, da sich die Menüpunkte überlappen und dann öfters mal der falsche Menüpunkt selektiert wird.
Wie beschränke ich jetzt am besten den klickbaren Bereich auf den nicht transparenten Teil?
Imagemaps würden denke ich mal gehen, aber schön wäre das nicht unbedingt.
Hier noch der aktuelle Code:
HTML
1:
2:
3:
4:
5:
| <div id="header">
<a href="#">Home</a>
<a href="#">bla</a>
<a href="#">blubb</a>
</div> |
CSS
1:
2:
3:
4:
5:
6:
7:
8:
9:
| #header a{
display: inline-block;
width: 160px;
height: 140px;
background: url(button.png);
margin-right: -140px;
padding-left: 90px;
padding-top: 100px;
} |
mfg jakobwenzel
jakobwenzel
