Text und Grafik als Link

    Hallo zusammen,

    ich versuche gerade einen Grafiklink zu erstellen, auf dem auch noch Text liegt. Also eine Grafik als Link, aber über dieser Grafik soll auch noch ein Text liegen.

    Ich bekomme das einfach nicht hin. Der Text wird auf der Grafik angezeigt, aber der Link funktioniert nicht.

    Vielleicht wird es mit dem Code klarer:

    HTML
    <a href="http://www.musterseite/muster.php"><div style="height:136px; width:167px; background: url(http://www.musterseite/images/mustergrafik.gif);"><div style="padding:10px 0 0 10px;"><span style="font-size: 1.2em; font-family: trebuchet ms,geneva; color: #ffffff;">Text über Grafik</span></div></div></a>

    Die Grafik wird angezeigt. Der Text auf der Grafik wird auch angezeigt. Nur der Link funktioniert nicht. Es scheint so, als wenn der Browser das <a.....></a>einfach rausschmeißen würde.

    Hat jemand eine Ahnung, woran das liegen könnte oder wie man das umsetzen kann?

    Grüße Sven

    HTML
    <a href="www.google.de" style="background: url(http://www.musterseite/images/mustergrafik.gif); color: #fff; display:block; font-size:1.2em; font-family Trebuchet ms, geneva; height 136px; line-height:136px; text-align:center; width 167px;" >Text über Grafik</a>

    Kleiner Tipp:
    Lager das CSS in in den Head oder noch besser in eine externe Datei aus:

    HTML
    <a href="#" id="linkID">Text über Grafik </a>


    CSS:

    Code
    background: url(http://www.musterseite/images/mustergrafik.gif); 
color: #fff; 
display:block; 
font-size:1.2em; 
font-family Trebuchet ms, geneva; 
height 136px; 
line-height:136px; 
text-align:center; 
width 167px;

    Hallo,

    vielen Dank. Das funktioniert soweit. Allerdings habe ich nun ein weiteres Problem. Ich versuche nun zwei solcher Konstrukte nebeneinander zu platzieren. Das gelingt aber leider nicht. Sie erscheinen immer versetzt untereinander.

    Woran könnte das liegen?

    HTML
    <div style="width: 364px; height: 136px; position: relative; left: 50%; margin-left: -182px;"><div style="float: left;"><a style="background:  url('http://www.muster/images/muster.gif');  color: #ffffff; display: block; font-size: 1.3em; font-family: Trebuchet  MS,sans-serif; font-weight: bold; height: 136px; width: 167px;  text-decoration: none;" href="seite.html"></div><div style="float: left; margin-left: 30px;"><a style="background:  url('http://www.muster/images/muster.gif');  color: #ffffff; display: block; font-size: 1.3em; font-family: Trebuchet  MS,sans-serif; font-weight: bold; height: 136px; width: 167px;  text-decoration: none;" href="seite.html"></div></div>

    Das CSS werde ich in eine layout. css auslagern.

    Grüße
    Sven

    Hat dir irgend´jemand mal gesagt, dass es besser ist, eine Zeile voll zu packen bis zum geht nicht mehr? Und wenn man dann den ganzen CSS-Kram in eine externe Datei packt, könnte das so aussehen:

    Code
    <div class="class1">
  <div class="class2">
    <a class="class3" href="seite.html">
  </div>
  <div class="class4">
    <a class="class3" href="seite.html">
  </div>
</div>


    Und schon fällt auf, dass deine Links kaputt sind. Kann so einfach sein, wenn man ordentlich macht.

    Hallo,

    danke, ich habs!

    In Zukunft werde ich meine Fragen nicht mehr im Forum stellen, sondern bei Google, dann braucht ihr euch über "dumme" Fragen nicht mehr aufzuregen.;-)

    Beste Grüße