Tina: Abstand zwischen nebeneinander liegenden Links

Hallo zusammen,

ich habe auf einer Seite mehrere Links die nebeneinander dargestellt werden sollen. Das ganze schaut so aus:

<a href="">Link1</a>
<a href="">Link2</a>
<a href="">Link3</a>
<a href="">Link4</a>

Diese Links haben eine Hintergrundfarbe. Das Problem das ich nun habe ist, dass zwischen den Links ein Abstand von 4px entsteht der nicht dahingehört. Die Ursache ist die, dass die Links im Quellcode jeweils in eine Zeile geschrieben werden.

Ich habe dank der Suchfunktion auch bereits einen Workaround gefunden: Wenn ich vor dem schließenden </a> ein Leerzeichen einfüge schaut alles wieder gut aus.

Da ich aber nicht weiß wie diese Links entstehen (manuell oder generiert) und ich auch nicht der einzige bin der solche Links erstellt kann ich nicht davon ausgehen, dass immer ein Leerzeichen eingefügt wird.

Nun meine Frage: gibt es andere Möglichkeit den Abstand zu eliminieren? Z.B. mittels CSS?

Danke im Voraus

Liebe Grüße
Tina

  1. Hallo zusammen,

    ich habe auf einer Seite mehrere Links die nebeneinander dargestellt werden sollen. Das ganze schaut so aus:

    Nun meine Frage: gibt es andere Möglichkeit den Abstand zu eliminieren? Z.B. mittels CSS?

    genau

    entweder:
    <a href="" style="margin-left:-4px;">Link1</a>
    <a href="" style="margin-left:-4px;">Link2</a>
    <a href="" style="margin-left:-4px;">Link3</a>
    <a href="" style="margin-left:-4px;">Link4</a>

    oder:
    <div style=".a{margin-left:-4px;}">
    <a href="">Link1</a>
    <a href="">Link2</a>
    <a href="">Link3</a>
    <a href="">Link4</a>
    </div>

    1. Hallo Milian,

      Danke für die Antwort. Ist das denn eine korrekte Schreibweise? Wofür ist der Punkt vor dem a?

      <div style=".a{margin-left:-4px;}">
      <a href="">Link1</a>
      <a href="">Link2</a>
      <a href="">Link3</a>
      <a href="">Link4</a>
      </div>

      Einen Einwand hätte ich noch.
      Wenn nämlich die Links generiert werden und sie alle in einer Zeile stehen dürfte man eigentlich die 4px nicht anwenden. Die 4px sollten nur dann gelten wenn die Links jeweils in einer Zeile stehen.

      Gruß
      Tina

      1. Hallo Milian,

        Danke für die Antwort. Ist das denn eine korrekte Schreibweise? Wofür ist der Punkt vor dem a?

        <div style=".a{margin-left:-4px;}">
        <a href="">Link1</a>
        <a href="">Link2</a>
        <a href="">Link3</a>
        <a href="">Link4</a>
        </div>

        Einen Einwand hätte ich noch.
        Wenn nämlich die Links generiert werden und sie alle in einer Zeile stehen dürfte man eigentlich die 4px nicht anwenden. Die 4px sollten nur dann gelten wenn die Links jeweils in einer Zeile stehen.

        Meiner Meinung nach darf es bei inline-Elementen wie eben auch a gar keinen Außenrand geben.

        Aber vielleicht täusche ich mich ja...

        MfG

        Gruß
        Tina

        --
        ie:{ fl:{ br:> va:{ ls:# fo:| rl:( n4:( ss:( de:> js:{ ch:{ sh:} mo:? zu:)
      2. Hi Tina,

        Einen Einwand hätte ich noch.
        Wenn nämlich die Links generiert werden und sie alle in einer Zeile stehen dürfte man eigentlich die 4px nicht anwenden. Die 4px sollten nur dann gelten wenn die Links jeweils in einer Zeile stehen.

        korns Vermutung ist prinzipiell richtig. Der Abstand nach rechts entsteht hier dann auch nicht durch die <a> tags selbst, sondern durch deine Zeilenumbrüche im Code.

        Also entweder hintereinander schreiben oder

        div a {
        margin-right: -4px;
        }

        Gruß
        Antipitch

        1. Grüße,

          div a {
          margin-right: -4px;
          }

          wenn es sich um ein unerwünschtes leerzeichen handelt, wäre vllt em bessere einheit?

          MFG
          bleicher

          --
          __________________________-
          Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
          Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
          Boccaccio
          1. Moin bleicher,

            wenn es sich um ein unerwünschtes leerzeichen handelt, wäre vllt em bessere einheit?

            das seh ich eher nicht so. Im Gegenteil, die em passen im Zweifelsfall nicht mehr, wenn die Schriftgröße der Links geändert wird. Die beste Lösung wäre aber wohl eine liste mit floatenden <li>s.

            Unbhängig davon ist mir aufgefallen, dass Tina offensichtlich einen "Fehler" beheben will, den sie vorher bewußt erzeugt hat. Wenn sie die links in eine Zeile schreibt, sollte ein Backendprogrammierer (oder sonst wer) die auch so ausgeben lassen. Fragt sich nur noch, welchen Sinn/ Nutzwert Textlinks ohne Wortabstand haben...

            Gruß
            Antipitch

            1. Grüße,

              das seh ich eher nicht so. Im Gegenteil, die em passen im Zweifelsfall nicht mehr, wenn die Schriftgröße der Links geändert wird.

              bisher verstand ich em als die größe eines buchstaben - das entsrechend mitskaliert wird - oder habe ichs missverstanden? sollte es sich aber um die link-schriftgröße handeln..
              die einzige wirklich wirkende lösung wäre dann auch werde em noch px sondern ein span zischen den links der an beiden seiten -2em aht und die gleiche klasse wie die links hat - theoretsich zumindest - hab das nie ausprobiert^^

              MFG
              bleicher

              --
              __________________________-
              Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
              Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
              Boccaccio