• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundfarbe auf Liste

Status
Für weitere Antworten geschlossen.
D

DerMitSkill

Guest
Hallo,
ich hab mir mit einer Liste eine horizontale Navigation gemacht, aber die Hintergrundfarbe wird nicht angezeigt...

Code: 
...
<body>
    <div id="seite">
      <ul id="navigation">
        <li>
          <a accesskey="" href="">Link</a>
        </li>
        <li>
          <a accesskey="" href="">Link</a>
        </li>
        <li>
          <a accesskey="" href="">Link</a>
        </li>
        <li>
          <a accesskey="" href="">Link</a>
        </li>
        <li>
          <a accesskey="" href="">Link</a>
        </li>
        <li>
          <a accesskey="" href="">Link</a>
        </li>
      </ul>
...
Code: 
...

body {
  background-color:#373737;
  margin:10px;
}
  div#seite {
    background-color:#FFFFFF;
    margin:0 auto;
    max-width:900px;
    padding:10px;
  }
    div#seite ul#navigation {
      [COLOR=Red]background-color:#3F3F3F;[/COLOR]
      list-style:none;
      display:inline;
    }
      div#seite ul#navigation li {
        float:left;
      }
        div#seite ul#navigation li a,
        div#seite ul#navigation li a:active,
        div#seite ul#navigation li a:link {
          display:block;
        }
        div#seite ul#navigation li a:hover
        div#seite ul#navigation li a:visited {
        }

Das rote wird nicht angezeigt... wieso?
 
Werbung:
Liegt wahrscheinlich am display:inline.
Wozu brauchst Du das da?
Für ein horizontales Menu brauchst Du das in den Listenelementen, aber nicht in der Liste selbst.
 
Ich habs jetzt geändert, aber es geht immernoch nicht:

Code: 
* {
  margin:0;
  padding:0;
}

body {
  background-color:#373737;
  margin:10px;
}
  div#seite {
    background-color:#FFFFFF;
    margin:0 auto;
    max-width:900px;
    padding:10px;
  }
    div#seite ul#navigation {
      background-color:#3F3F3F;
      list-style:none;
    }
      div#seite ul#navigation li {
        display:inline;
        float:left;
      }
        div#seite ul#navigation li a,
        div#seite ul#navigation li a:active,
        div#seite ul#navigation li a:link {
          display:block;
        }
        div#seite ul#navigation li a:hover
        div#seite ul#navigation li a:visited {
        }

:(:(:(:(
 
Werbung:
Okay, es lag nicht am display:inline.
Aber vorher hats doch schon geklappt, es war kein Fehler in Deinem Code.
Alles einwandfrei, ich sehe die Hintergrundfarbe.
Dass Du Deinen Listenelementen allen eine andere Farbe gegeben hast, weißt Du, ja? Die Farbe siehst Du dann natürlich, nicht die der Liste selbst.
 
Efchen, Du sprichst mir in Rätseln. Ich sehe keine Hintergrundfarbe... wieso hab ich denen allen eine andere Farbe gegeben? :shock: Da ist doch nirgends eine Definition... du verwirrst mich :oops:
 
Hmmm...gute Frage...was rede ich? Bin ich verwirrt? Hat mir Firebug irgendwas angezeigt, was Du nicht explizit gesetzt hast?

Jedenfalls ist mit Deinem originalen Code die Hintergrundfarbe bei mir zu sehen. Aber eben nicht unter den einzelnen Listenelementen, so als würde für die eine explizite Farbe gesetzt werden...muss ich nochmal guggen...

Und es ist doch das display:inline. Gepaart mit dem float der einzelnen Listenelemente führt das dazu, dass die Listenelemente alle links am Rand nebeneinander angeordnet werden und die Liste selber rechts daneben. Klar, logisches Verhalten eines Inline-Elements.

Nimmst Du das display:inline raus, ist die Liste selbst inhaltsleer, weil ja die Listenpunkte durch float aus dem Fluss genommen werden. Wenn Du der Liste einen Rahmen gibst oder Firebug benutzt, siehst Du den Effekt, es sieht aus, als würden die einzelnen Pnkte unterhalb der Liste "kleben".

Da müsste also irgendwo ein clear hin, wenn die Liste die einzelnen Punkte umschließen soll. Das müsste aber in ein Element zwischen das letzte <li> und vor das </ul>. Und da darf in HTML doch eigentlich nichts hin.

Die sinnvollste Lösung wäre also wohl, den einzelnen Listenpunkten eine Hintergrundfarbe zu geben. Oder die <li> nicht mit float, sondern mit display:inline nebeneinander anzuordnen. Aber letzteres geht halt nicht, wenn Du dann eine feste Größe vergeben willst.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Junny hat mir geholfen:

Code: 
ul#navigation:after {
display: block;
content: ".";
clear:  both;
height: 0;
visibility: hidden;
}

Das klappt. Das meintest Du ja auch mit "Das müsste aber in ein Element zwischen das letzte <li> und vor das </ul>", oder?
 
Das :after klappt aber doch nicht in allen Browsern, oder irre ich mich da? Ich hätte jetzt gesagt, dass der IE6 das nicht kann.
 
Mhh... ja stimmt, und der IE 7 auch nicht... :(

Haste eine andere Lösung?
 
Werbung:
Die Technik hat neuroleptika mal hier beschrieben: In den "guten" Browsern klappt die Variante mit :after.
Für die IE hatte er auch eine Lösung mit hasLayout-Auslösern und verschiedenen Hacks, da bevorzuge ich Conditional Comments mit
Code: 
display: inline-block;
hatte seitdem noch nie Probleme.

Die Listeneinträge als Inlineelemente darzustellen, bringt noch weitere Probleme mit sich, wenn in einem Menü der gesamte Bereich als Link anklickbar sein soll und außerdem noch Untermenüs enthalten sind.

Gruß
Junny
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben