bjoern: Links formatieren

Hallo Leute.

Ich möchte per css meine Links formatieren. Hierzu benutze ich folgenden Code:

a:link, a:visited, a:active{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#ffffff;
 text-decoration:none;
 border-bottom: 1px solid #464444;
 padding-bottom:5px;
 line-height:25px;
 width:200px;
}

Schaut euch die Links unter Mozilla, Firefox oder Opera auf schwarzen Hintergrund an (Sieht gut aus, wenn mehrere Links untereinander gelistet sind).

DAnn seht Ihr, wie es aussehen sollte. Hierbei habe ich allerdings zwei Probleme: 1. Problem: Der IE spielt nicht mit, weil er hier nicht mit dem line-height zurecht kommt. 2. Problem: der der Unterstrich (border-bottom) ist immer nur so lang wie der Linktext. Wie schaffe ich es, dass der Strich über die ganze Seite geht?

Gruß Björn

  1. hallo bjoern,

    Schaut euch die Links unter Mozilla, Firefox oder Opera auf schwarzen Hintergrund an

    Ja, gerne, wenn du noch so gut sein wolltest, eine Adresse anzugeben, bei der das umgesetzt wurde.

    Der IE spielt nicht mit, weil er hier nicht mit dem line-height zurecht kommt

    doch, das kann der IE durchaus.

    der Unterstrich (border-bottom) ist immer nur so lang wie der Linktext. Wie schaffe ich es, dass der Strich über die ganze Seite geht?

    Gib ihm ein eigenes <hr>-Element.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. Hallo Christoph,

      der Unterstrich (border-bottom) ist immer nur so lang wie der Linktext. Wie schaffe ich es, dass der Strich über die ganze Seite geht?

      Gib ihm ein eigenes <hr>-Element.

      <a> darf <hr> nicht enthalten. Korrekt wäre display:block mit einer width-Angabe.

      Grüße
       Roland

      1. Hi Roland!

        <a> darf <hr> nicht enthalten. Korrekt wäre display:block mit einer width-Angabe.

        Danke, display hat geholfen. Folgender Code klappt:

        a:link, a:visited, a:active{
          font-family:Arial, Helvetica, sans-serif;
          font-size:12px;
          color:#ffffff;
          text-decoration:none;
          border-bottom: 1px solid #464444;
          padding:5px 0px 5px 0px;
          display:block;
          width:138px;
        }

        Gruß
        Björn

    2. Ja, gerne, wenn du noch so gut sein wolltest, eine Adresse anzugeben, bei der das umgesetzt wurde.

      Ups, sorry. Zu sehen unter http://testlap.serveftp.org/http://testlap.serveftp.org/[/link].

      Damit ihr nicht lange suchen müsst, hier nochmal der dazugehörige css code:

      a:link, a:visited, a:active{
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        color:#ffffff;
        text-decoration:none;
        border-bottom: 1px solid #464444;
        padding-bottom:5px;
        line-height:25px;
      }

      Währe spitze, wenn mir jemand den code modifizieren könnte und kurz erklären wie es denn richtig zu machen ist (dass die unterstriche über die ganze seite gehen und auch der IE die links fröhlich ohne fehler zeigt).

      danke im vorraus
      Björn