Entwickler-Ecke
Beschreibungssprachen - Html: Nicht rechteckige Menüeinträge
jakobwenzel - Do 10.09.09 16:02
Titel: Html: Nicht rechteckige Menüeinträge
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
Jakob_Ullmann - Do 10.09.09 18:07
 jakobwenzel hat folgendes geschrieben  : |
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. |
Wäre jetzt eigentlich die einzige Möglichkeit, die mir einfällt. Oder aber, du teilst die Bilder auf (so wie beim DF-Logo). Aber das wäre auch nicht wirklich schön.
jfheins - Do 10.09.09 18:56
Da Blockelemente immer Rechteckig sind, wirst du ohne eine Imagemap nicht weit kommen.
Code-Schönheit ja, aber nicht um jeden Preis ;)
jakobwenzel - Do 10.09.09 20:09
Ich hab jetzt Imagemaps für den Bereich hinzugefügt und die Bilder per CSS aneinander geschoben.
Ergebnis: Im überlappenden Bereich ist keine Verlinkung mehr vorhanden.
Hat jemand noch ne Idee oder muss ich die Grafik mehrmals aneinanderhängen und eine große Imagemap nehmen?
Yogu - Sa 12.09.09 14:07
| jakobwenzel hat folgendes geschrieben : |
Ich hab jetzt Imagemaps für den Bereich hinzugefügt und die Bilder per CSS aneinander geschoben.
Ergebnis: Im überlappenden Bereich ist keine Verlinkung mehr vorhanden. |
Hm, ist ja eigentlich auch logisch - eine Imagemap ist ja immer noch ein Rechteck, auch wenn man sie nur an bestimmten stellen anklicken kann. Den Hintergrund verdeckt sie trotzdem.
| jakobwenzel hat folgendes geschrieben : |
| Hat jemand noch ne Idee oder muss ich die Grafik mehrmals aneinanderhängen und eine große Imagemap nehmen? |
Mir fällt jetzt auch keine andere Möglichkeit ein. CSS hat eben auch so seine Macken ;)
Aber sieh's positiv: Lieber eine Imagemap als ein Flash-Objekt, das viele Firmen stattdessen verwenden, um ihr möchtegern-schönen Menüs zu gestalten :roll:
BenBE - Mo 14.09.09 11:44
Overla\Emulation des A mit einem IMG zzgl. Imagemap wäre ne Idee ...
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!