nicht angemeldet
Href und Divs kombinieren
Hallo,
ich habe das folgende Problem.
Ich lade ein Produktbild und lege auf das Produktbild eine Transparentes Gif mit "Sonderangebot" drauf. Leider Funktioniert dadurch mein Href auf das Bild nicht mehr.
<div class="AngebotProduktBild">
<a href='#test1'>
<img src='produktbild.jpg' width='140' height='140'/>
</a>
</div>
<!-- dann noch das transparente Sonder.gif drüber -->
<div class="AngebotHighlighter"></div>
Im css habe ich das so gemacht:
.AngebotProduktBild
{
width:140px;
height:140px;
z-index:0;
}
.AngebotHighlighter
{
border: 1px dotted #C0C0C0;
background: url(images/AngebotHighlighter.gif);
position: relative;
top: -140px;
left: 1px;
width: 140px;
height: 140px;
z-index: 1;
background-repeat: no-repeat;
}
Ich denke, weil das transpartent Sonder.gif einen höhern z-index hat, funktioniert der Link nicht mehr.
Ich muss also im "oberen" div das ahref machen ... Ich habe das so versucht:
<div class="AngebotProduktBild">
<img src='produktbild.jpg' width='140' height='140'/>
</div>
<div class="AngebotHighlighter">
<a href="#" style="height: 140px; width: 140px; border: 1px solid black; z-index: 2; top:-60;">Zur nächsten Seite</a>
</div>
Leider funktioner es nicht!
Wo liegt mein Denkfehler?
Danke für die creative mitdenkthilfe!!!
Joachim
-
Hi,
Ich lade ein Produktbild und lege auf das Produktbild eine Transparentes Gif mit "Sonderangebot" drauf. Leider Funktioniert dadurch mein Href auf das Bild nicht mehr.
Pack das Sonderangebot-Bildchen direkt in den Link mit hinein.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Wo liegt mein Denkfehler?
Dein a-Element sollte alles umschliessen, was klickbar sein soll.
Du hast zu berücksichtigen, dass a-Elemente nur inline Elemente enthalten dürfen.
ferner wirkt sich z-index bei position:static nicht aus.
Dein CSS war also teils wirkungslos oder unvollständig dokumentiert.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
Hi Folks,
<div class="AngebotProduktBild">
<a href='#test1'>
<img src='produktbild.jpg' width='140' height='140'/>
</a>
</div><!-- dann noch das transparente Sonder.gif drüber -->
<div class="AngebotHighlighter"></div>> > Im css habe ich das so gemacht: > ~~~css > .AngebotProduktBild > { > width:140px; > height:140px; > z-index:0; > } > .AngebotHighlighter > { > border: 1px dotted #C0C0C0; > background: url(images/AngebotHighlighter.gif); > position: relative; > top: -140px; > left: 1px; > width: 140px; > height: 140px; > z-index: 1; > background-repeat: no-repeat; > } >Probier das doch mal so:
.AngebotProduktBild { width:140px; height:140px; z-index:0; } .AngebotHighlighter { border: 1px dotted #C0C0C0; position: relative; left: -140px; width: 140px; height: 140px; z-index: 1; } </style> ~~~~~~html </head> <body> <div> <a href='#test1'> <img class="AngebotProduktBild" src='produktbild.jpg' width='140' height='140'/> <img class="AngebotHighlighter" src='AngebotHighlighter.gif' width='140' height='140' </a> </div>Zwar ungetestet, aber so sollte es egtl gehen.
Gruß Sascha
--
-----------------------
<a href="http://www.bohrmedia.de" target="_blank">BohrMedia.de</a>