Snoggi: Problem mit Navbar bei Zeilenumbruch

Hallo
Ich habe ein Problem bei einer Navigationsbar.

Hier seht ihr das Problem. Die Navbar funktionierte gut, bis ich auf einmal einen solangen Link hatte, dass ich einen Zeilenumbruch brauchte. Jetzt weiß ich aber nicht, wie ich es hinbekomme, dass die Schrift wieder linksbündig ist und der hover und active Effekt mit dem weißen Hintergrund bis oben an den Rand gehen.

So sollte das optimalerweise aussehen.

Der CSS-Code der Navbar ist folgender:

.navbar3 {
background-color: #EDEFF7;
border: 1px solid gray;
float: right;
width: 840px;
margin: 6px;
padding: 0;
height: 54px;
}

.navbar3 ul.nav {
 list-style-type: none;
 padding: 0;
 margin: 0;
 }

.navbar3 ul.nav li {
 display: inline;
 margin: 0px 15px 0px 10px;
 padding: 3px 10px 2px 10px;
 }

.navbar3 ul.nav li {
 width: 15px;
 text-align: left;
 height: 40px;
}

.navbar3 ul.nav a {
color: gray;
text-decoration: none;
text-align: center;
padding: 1px 10px 2px 10px;
border: 1px solid #EDEFF7;
}

.navbar3 ul.nav a:hover  {
background-color: white;
color: #2C74B4;
border: 1px solid gray;
padding: 1px 10px 2px 10px;
border-top: none;
}

Weiß da jemand Rat?

  1. Hallo

    Weiß da jemand Rat?

    Jo. Nimm mal das span aus deinen li's und mach es richtig, indem du das li formatierst. Wenn du dann dem li noch eine feste breite gibst solltest du dir um solche umbrüche keine sorgen mehr machen müssen.

    1. Zusätzlich würde ich das display Inline rausnehmen und stattdessen den li's ein float:left geben.

    2. Hallo

      Habe die class jetzt im li-Element drinstehen, aber wenn ich li { width: 50px; } einfüge, erzeugt das keine Wirkung.

      1. Hi,

        Habe die class jetzt im li-Element drinstehen,

        Welche?
        Lass' uns nicht raten, was du versucht hast, sondern zeige es uns bitte ganz konkret.

        aber wenn ich li { width: 50px; } einfüge, erzeugt das keine Wirkung.

        Wenn display immer noch inline ist, *darf* width keine Wirkung haben.
        Das sind CSS-Grundlagen.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. Hi,

          Habe die class jetzt im li-Element drinstehen,

          Welche?
          Lass' uns nicht raten, was du versucht hast, sondern zeige es uns bitte ganz konkret.

          OK, sry. Bei mir steht jetzt:
          <li class="active">LINK</li>

          Vorher:
          <li><span class="active">LINK</span></li>

          aber wenn ich li { width: 50px; } einfüge, erzeugt das keine Wirkung.

          Wenn display immer noch inline ist, *darf* width keine Wirkung haben.
          Das sind CSS-Grundlagen.

          Wenn ich display:inline rausnehme, geht mir doch die ganze horizontale Navbar flöten. Wie bekomme ich den für das li immer die gleiche Größe hin, sodass ein automatischer Zeilenumbruch besteht?

          Thomas

          1. Hi,

            Wenn display immer noch inline ist, *darf* width keine Wirkung haben.
            Das sind CSS-Grundlagen.

            Wenn ich display:inline rausnehme, geht mir doch die ganze horizontale Navbar flöten.

            Natürlich, wenn du nicht anderweitig dafür sorgst, dass die LI keinen eigenen Block bilden.
            display:inline-block oder floating wären Alternativen.

            (Bei weiteren Problemen damit komm aber bitte nicht gleich wieder mit „funzt auch nicht“ oder vergleichbarem, sondern *beschäftige* dich zunächst selber etwas mehr mit der Thematik, Danke.)

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
            1. OK, habe das jetzt durch float hinbekommen.

              DANKE SCHÖN!

          2. Du hast wohl überlesen, dass ich dir geraten habe display:inline zu entfernen ;) und ein float zu nutzen