Text und Grafik als Link

sven77

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

unknownsoldier

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;

sven77

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

Unregistriert

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.

unknownsoldier

Lern Grundlagen !!!
-> google

sven77

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

unknownsoldier

Es lag nicht an der Frage, sondern einfach nur daran das man gewisse Grundlagen beherrschen sollte und dann wenn man nicht weiterkommt fragen kann.

Text und Grafik als Link

Tags

Benutzer online in diesem Thema