Div als Link definieren

[excess]

hoi,

ich werd grad irgendwie zu hirsch! ich habe in einem div eine grafik (button). jetzt möchte ich das bei klick der link (pdf) in einem neuem fenster erscheint. leider tut sich da nix. ich glaube ich hab da mächtigen murks gebaut. hoffe ihr könnt mir helfen.

html code des divbuttons:

<div id="button"; class="button"; onclick="location.href='../pdf/Seminaranmeldung2011.pdf';"></div>

css code des divbuttons:

#button{
         background: url('../img/button.png');
         position:absolute;
         display: block;
         width: 173px;
         height: 173px;
         left:410px;
         top: 220px;
         cursor: pointer;
}

ich danke schon mal im vorraus!

[Valide]

Warum machst du das nicht mit dem normalen <a href....?

[excess]

kann ich das dann auch positionieren wie ein div?

[th2409]

Ja. Mit CSS geht das schon - per display: block kann man sich ein "ordentliches Blockelement daraus machen und mit einem sonstigen Erscheinungsbild versehen wie ein div auch.

[excess]

sorry, aber irgendwie bekomme ich das nicht hin. ich blick grad einfach nicht mehr durch. wie muss das css aussehen, und wie verbinde ich das dann mit dem link im html code?

[excess]

ok, jetzt hab ich es, ich weiss nur nicht ob das die beste lösung ist

html code des buttons:

<div id="button">
<a href="pdf/Seminaranmeldung2011.pdf" onFocus="this.blur"; target="_blank";><img src="img/button.png" style="0px none;" /></a>
</div>


der dazugehörige css code:

#button{
position:absolute;
display: block;
width: 173px;
height: 173px;
left:410px;
top: 220px;
cursor: pointer;
text-decoration:none;
}


falls man da noch was verbessern kann, bin ich über jeden tipp dankbar!

gruss

[jayjay]

hmm, im img würde ich noch das style mit border etc definieren, nicht einfach "0px none" - oder direkt über css:
img {
border:none;
}
im link die ; 1 nach links

<a href="pdf/Seminaranmeldung2011.pdf" onFocus="this.blur;" target="_blank"><img src="img/button.png" /></a>

[excess]

super, danke hat funktioniert. was mir jetzt im internetexplorer aufgefallen ist, das um den runden button hier eine graue fläche hinterlegt ist. anscheinend hat der ie probleme mit transparenten png´s, wenn ich das noch gelöst bekomme, is meine woche gerettet

[Thomas]

yep, transparente pngs und IE - zwei Dinge, die sich nicht vertragen (Netscape 4.0 von 1998 kam hingegen damit schon klar ...)

es gibt einen speziellen IE-Hack dafür ... oder nimm ein gif statt png, gif kapiert dann auch Microsoft

[excess]

könnte funktionieren, ich glaub kaum das mit dem schatten nach aussen beim button mehr wie 256 farben zusammenkommen, aber gif kann doch nur harte transparenz. mal schauen wie das rauskommt.

[Thomas]

oder ignorieren, die neueren IE kapieren jetzt auch png, ansonsten hack

[excess]

hoi,

ignorieren find ich gut, macht momentan am wenigsten aufwand. ausserdem müssen eh irgendwann alle umsteigen auf die neueren versionen.