Zeilenumbruch im a tag bzw. Link klappt nicht

  • Hallo,


    Ich möchte in einem <a infotip als mouseover einen Zeilenumbruch herbeiführen. Normalerweise geht das mit <br> oder <br />. In diesem Fall funktioniert jedoch nichts davon. Wer weiss Rat?


    Vielen Dank

  • Ich weiß nicht genau was du mit Infotip meinst. Ich gehe aber mal davon aus, du meinst das title Attribut, mit dem sich beim Mouseover ein Tooltip erzeugen lässt.


    In dem Fall werden Zeilenumbrüche, die du im Code angibst, auch im Tooltip übernommen:


    HTML
    1. <a href="#" title="Tooltip
    2. über
    3. mehrere
    4. Zeilen">Test</a>


    Nicht alle Browser nehmen das an. Für den Fall lohnt es sich, jede Zeile mit einem Leerzeichen zu beenden.

  • Hallo,


    vielen Dank für deine Antwort. Ich meine jedoch den Textumbruch im Linktext selbst, siehe folgendes Beispiel:


    HTML
    1. <a href="#" class="infotip"><img src="http://domain.de/pfad/images/info.png" /><span>Zeile 1<br />Zeile 2<br />Zeile 3</span></a>


    Es funktioniert ansonsten auch, eben bis zum 1 Absatz nach Zeile 1. Es wird kein Zeilenumbruch vorgenommen, egal ob <br> oder <br />.


    Vielen Dank

  • Hallo


    Deine Problembeschreibung ist leider sehr diffus.


    Du hast zwei Zeilenumbrüche eingefügt, beide werden von den Browsern auch angezeigt.


    Du erstellst in deinem Queltext grundsätzlich zwei Elemente (img, span). img ist eine Inline-Block-Element, span ist ein Inline-Elment. Beide erzeugen von sich aus keine Zeilenumbrüche.


    Wenn der Text unter dem Bild erscheinen soll musst du also zwischen img und span ein br einfügen. Wenn nach dem span ein Zeilenumbruch erfolgen soll musst du danach noch ein br einfügen.


    Insgesamt sollten br-Elemente aber vermieden werden. Es ist in der Regel sinnvoller direkt Block-Container zu erstellen oder durch entsprechende CSS-Anweisungen Inline- und Inline-Block-Elementen in Block-Elemente umzuwandeln, die von sich aus Zeilenbrüche mit sich bringen. So können auch Abstände besser kontrolliert werden.


    Gruss


    MrMurphy

  • Zunächst soll nur die Info-Grafik als Icon zu sehen sein. Der Text soll erst als Mouse-over erscheinen. Sorry hatte ich vergessen zu erwähnen.

  • Hallo


    Und wie soll das ganze auf Touchscreen-Bildschirmen funktionieren? Die kennen bekanntlich keinen Mouse-Over- beziehungsweise hover-Effekt und werden bereits von der Mehrzahl der Besucher verwendet.


    Gruss


    MrMurphy

  • <style>
    .infotip span{
    visibility: hidden;
    }
    .infotip:hover span{
    visibility: visible;
    }
    </style>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Unbenanntes Dokument</title>
    </head>


    <body>
    <a href="#" class="infotip"><img src="http://domain.de/pfad/images/info.png"/><br><span>Zeile 1<br />
    Zeile 2<br />Zeile 3</span></a>
    </body>
    </html>

  • Ich glaube ich habe die Lösung gefunden. Der a tag wird einfach durch einen div tag ersetzt.


    HTML
    1. Statt
    2. <a href="#" class="infotip"><img src="http://domain.de/pfad/images/info.png" /><span>Zeile 1<br />Zeile 2<br />Zeile 3</span></a>
    3. Jetzt
    4. <div class="infotip"><img src="http://domain.de/pfad/images/info.png" /><span>Zeile 1<br />Zeile 2<br />Zeile 3</span></div>


    Im CSS natürlich statt
    a.infotip
    div.infotip


    Damit sind gleich zwei Probleme gelöst.
    Man kann beliebig Zeilenumbrüche einfügen.
    Und die Bedienung auf Touch-Screen ist möglich, da bei Berühren des Info-Button die Seite nicht mehr nach oben schnappt.