Autor Beitrag
jakobwenzel
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 1889
Erhaltene Danke: 1

XP home, ubuntu
BDS 2006 Prof
BeitragVerfasst: Do 10.09.09 15:02 
Hallo zusammen,

ich bastel momentan an einer Webseite, bei der die Menüeinträge so aussehen:
menü
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:
ausblenden HTML
1:
2:
3:
4:
5:
<div id="header">
  <a href="#">Home</a>
  <a href="#">bla</a>
  <a href="#">blubb</a>
</div>

ausblenden 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
Einloggen, um Attachments anzusehen!
_________________
I thought what I'd do was, I'd pretend I was one of those deaf-mutes.
Jakob_Ullmann
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1747
Erhaltene Danke: 15

Win 7, *Ubuntu GNU/Linux*
*Anjuta* (C, C++, Python), Geany (Vala), Lazarus (Pascal), Eclipse (Java)
BeitragVerfasst: Do 10.09.09 17:07 
user profile iconjakobwenzel hat folgendes geschrieben Zum zitierten Posting springen:

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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 873
Erhaltene Danke: 148

Win7
VS 2013, VS2015
BeitragVerfasst: Do 10.09.09 17:56 
Da Blockelemente immer Rechteckig sind, wirst du ohne eine Imagemap nicht weit kommen.

Code-Schönheit ja, aber nicht um jeden Preis ;)
jakobwenzel Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 1889
Erhaltene Danke: 1

XP home, ubuntu
BDS 2006 Prof
BeitragVerfasst: Do 10.09.09 19: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?

_________________
I thought what I'd do was, I'd pretend I was one of those deaf-mutes.
Yogu
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 2598
Erhaltene Danke: 156

Ubuntu 13.04, Win 7
C# (VS 2013)
BeitragVerfasst: Sa 12.09.09 13:07 
user profile iconjakobwenzel hat folgendes geschrieben Zum zitierten Posting springen:
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.

user profile iconjakobwenzel hat folgendes geschrieben Zum zitierten Posting springen:
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
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 8721
Erhaltene Danke: 191

Win95, Win98SE, Win2K, WinXP
D1S, D3S, D4S, D5E, D6E, D7E, D9PE, D10E, D12P, DXEP, L0.9\FPC2.0
BeitragVerfasst: Mo 14.09.09 10:44 
Overla\Emulation des A mit einem IMG zzgl. Imagemap wäre ne Idee ...

_________________
Anyone who is capable of being elected president should on no account be allowed to do the job.
Ich code EdgeMonkey - In dubio pro Setting.