Link mit Bild und mehrzeiligem Text

[Barbara Samel]

Hallo meine Lieben!!

Ich habe folgendes Problem:

Ich möchte gerne einen Link auf meiner Seite anbringen, der so aussehen soll, dass links ein Bild und daneben ein mehrzeiliger Text steht. Beim überfahren des Links soll sich ein Hintergrundgrafik laden.

Ich stehe jetzt vor dem Problem, dass wenn ich ein <a>-Element nehme und dort ein Bild einsetze und daneben den Text schreibe, ich keine Zeilenumbrüche im Text erzeugen kann. Denn wenn ich das <br> Tag benutze läuft der Text unter dem Bild weiter. Außerdem soll der Text neben dem Bild in der vertikalen Mitte des Bildes zentriert sein!!

Vorläufig habe ich nun eine Alternative mit Tabellen und JavaScript ausprobiert, aber ich würde es gerne auch mit einem <a>-Element schaffen, da das erstens besser ist und zweitens hoffentlich kein Javascript erfordert.

Wisst ihr Rat?

Grueße,
Babsii

[Marc]

Hallo meine Liebe,

Hallo meine Lieben!!

Ich habe folgendes Problem:

Ich möchte gerne einen Link auf meiner Seite anbringen, der so aussehen soll, dass links ein Bild und daneben ein mehrzeiliger Text steht. Beim überfahren des Links soll sich ein Hintergrundgrafik laden.

Dazu muss das Link-Element zu einem Block-Element werden.

Dann kannst Du so etwas machen:

p {
 width:25.5em;
}

a {
  display:block;
}

a:hover {
  background-image:url(http://de.selfhtml.org/css/eigenschaften/anzeige/hund.gif);
}

a span {
 display:block;
 padding-top:17px;
}

a img {
  float:left;
}

p {
 clear:both;
}

Dazu folgendes HTML:

<p>
 <a href="http://www.mhis.de/">
  <img src="http://www.mhis.de/images/logo.gif" alt="" />
  <span>Text (ganz viel Text) und noch sehr viel mehr Text - für alle die mehrere zeilen benötigen...</span>
 </a>
</p>

<p>Normaler Text innerhalb eines gewöhnlichen Absatzes....</p>

Hier kannst Du es in Funktion bewundern:

http://www.mhis.de/self/mehrzeiligerLinkNebenBild/mehrzeiligerLinkNebenBild.htm

Wisst ihr Rat?

Vielleicht - nützt dir die Lösung etwas? - jedenfalls einfacher als JavaScript und Tabellen...

Viele Grüße,
Marc.

[Zeromancer]

Hallo Barbara,

Beim überfahren des Links soll sich ein Hintergrundgrafik laden.

Wo soll sich ein Hintergrundbild laden?

Ich stehe jetzt vor dem Problem, dass wenn ich ein <a>-Element nehme und dort ein Bild einsetze und daneben den Text schreibe, ich keine Zeilenumbrüche im Text erzeugen kann. Denn wenn ich das <br> Tag benutze läuft der Text unter dem Bild weiter.

Normalerweise bricht HTML automatisch um, wenn der Platz nicht ausreicht. Solltest du innerhalb deines Textesumbrüche wollen, bietet sich evtl. die Fortführung des Textes in einem neuen Element an.

Außerdem soll der Text neben dem Bild in der vertikalen Mitte des Bildes zentriert sein!!

Nun ja:

element {
  text-align:center;
}

kennst du, oder? Weiterhin hat mir gerade das Archiv mit einem Beitrag weiter geholfen.

Mit freundlichen Grüßen,
André