Wie XHTML-konform Zeilenumbruch unterdrücken ohne nobr?

    Hallo!

    Wie kann ich XHTML-konform den Zeilenumbruch ohne nobr-Attribut unterdrücken?

    In meinem Blog möchte ich interne und externe Hyperlinks durch kleine Pfeilgrafiken unterscheidbar machen.
    [Pfeil, der nach rechts zeigt] (Grafik für internen Link)
    [Pfeil, der nach rechts oben zeigt] (Grafik für externen Link)
    Wie kann ich es schaffen, dass der Zeilenumbruch zwischen der Grafik und dem Linktext unterdrückt wird?

    Lösungsansätze:

    1) Nach einigen Fehlversuchen hatte ich mit folgendem Code Erfolg:

    Code
    [url="http://de.wikipedia.org/wiki/Arbeitsspeicher"]<nobr>[img]/bilder/bild-174.gif[/img]Arbeitsspeicher</nobr>[/url]


    Der Zeilenumbruch zwischen dem kleinen Grafiksymbol und dem im Firefox angezeigten Linktext »Arbeitsspeicher« wird unterdrückt. <nobr></nobr> ist aber nicht mit XHTML kompatibel! Das ergibt sich aus einer Überprüfung mit dem XML Validator unter diesem Link.

    2) Schattendings hat in Beitrag 11366 eine Lösung angedeutet:

    Zitat

    Pfeilen für interne und externe Links:
    Ich habe bei meinem Blog allen Links eine CSS class="external" oder class="internal" zugewiesen, da wird dann entsprechend eine Hintergrundgrafik für den Link geladen.

    3) Vielleicht kann man auch mit dem Codeschnipsel »style="white-space:nowrap;"« arbeiten, den ich unter diesem Link gefunden habe?

    4) Ein weiterer Lösungsansatz unter diesem Link sieht folgendermaßen aus:

    Code
    address {
    white-space: nowrap; 
}

    :?: Wie müsste HTML-Code aussehen, damit er mit XHTML kompatibel ist? Welcher Codeschnipsel muss in die »style.css«-Datei eingetragen werden?

    Meine Passwörter verwalte ich mit KeePass.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    ich denke variante 2 dürfte die sicherste sein. da musst du dann zwar jedesmal die klasse noch in den link eintragen, aber wenn dich das nicht stört:

    Code
    a.external {
   background: url(pfad/zu/external.gif);
}


a.internal {
   background: url(pfad/zu/internal.gif);
}

    aufrufen geht dann mit class="internal" oder class="external"

    a.external und a.internal

    Vielen Dank für deinen Hinweis, ratterobert. Ich habe die Datei »wp-content/themes/default/style.css« um den folgenden Code ergänzt:

    Code
    a.external {
   padding-left: 11px; 
   background: url(http://www.vorname-nachname.de/bilder/bild-174.gif) no-repeat;
}


a.internal {
   padding-left: 11px;
   background: url(http://www.vorname-nachname.de/bilder/bild-175.gif) no-repeat;
}

    Meine Passwörter verwalte ich mit KeePass.

    Einmal editiert, zuletzt von FinanzenTomate (5. Dezember 2005 um 16:58)

    Noch eine ganz andere Überlegung: wie wäre es wenn du den Links entsprechende Klassen gibst und das Ganze über CSS folgendermaßen löst?

    Code
    .extern a:first-child:before
{
	content: url(../pics/pfeil.gif);
}

    Was spricht dagegen?

    Zitat von clemisan

    Noch eine ganz andere Überlegung: wie wäre es wenn du den Links entsprechende Klassen gibst und das Ganze über CSS folgendermaßen löst?

    Code
    .extern a:first-child:before
{
	content: url(../pics/pfeil.gif);
}

    Was spricht dagegen?

    bedauerlicherweise der IE :(

    lg
    Monika

    Pfeil-Symbole etwas weiter nach unten

    Ich habe eine weitere Frage: wie kann ich es erreichen, dass die beiden Pfeil-Symbole etwas weiter nach unten verschoben werden? Ich habe es einmal mit dem folgenden Code ausprobiert, der nicht ganz richtig zu sein scheint:

    Zitat

    a.external {
    padding-left: 11px;
    margin-top:4px;
    background: url(http://www.vorname-nachname.de/bilder/bild-174.gif) no-repeat;
    }


    Wie lautet die richtige Angabe, um das jeweilige Pfeilsymbol in Bezug auf den Text ein wenig nach unten zu schieben? Mit »margin-top:4px;« funktioniert es nicht.

    Meine Passwörter verwalte ich mit KeePass.

    Setze eine Absolutposition :

    Code
    background: url(http://www.server.com/bild.gif) 0px 0px no-repeat;

    Erste Ziffer Position von Links,
    zweite Ziffer Position von Oben.

    "Whoever controls the media, controls the mind." J.Morrison

    Interne und externe Links

    Danke, telekommander. Es funktioniert. Der Code sieht jetzt folgendermaßen aus:

    Code
    /* (Bildgröße: 11 x 11 Pixel) */
background: url(http://www.name.de/bilder/282.gif) 0px 2px no-repeat; 


/* (Bildgröße: 9 x 9 Pixel) */
background: url(http://www.name.de/bilder/283.gif) 0px 3px no-repeat;

    Meine Passwörter verwalte ich mit KeePass.

    schau dir mal den quelltext des gentle_calm themes von ifelse.co.uk an (header.php) da siehst du wie du dir das class=in-/external sparen kannst. praktisch eine art if-else selektion anhand des mit href verlinkten ziels. ist die url nicht gleich der bloginfo(url) so handelt es sich um einen externen link -> background-image: url(external.gif)

    so grob umschrieben...
    mfg

    Code für interne und externe Hyperlinks

    Hallo Monika,
    px funktioniert gut, warum sollte ich daran etwas ändern?

    Hallo Erik,
    So eine Lösung wäre die optimale Lösung. Sollte es das irgendwann einmal als Plugin geben, werde ich es mir überlegen. So schlimm ist meine jetzige Lösung auch nicht, weil ich den Code für interne und externe Hyperlinks per Diktierkürzel mit DNS 8 Preferred einfüge.

    Meine Passwörter verwalte ich mit KeePass.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden