Class bei <li>-Tag

[sartOrial]

Guten Tag

Ich habe ein kleines Problem mit meiner Navigation, welche ich CSS machen möchte.
Sie aus einer Liste bestehen und horizontal angeordnet sein. So weit, so gut. Ich möchte jedoch dem aktiven Listenpunkt ein anderes Hintergrund geben. Ich dachte, dass dies mit <li class="aktiv">... geht. Jedoch wird einfach nichts angezeigt.
Mein Beispiel:
HTML:

Code: Alles auswählen

<div id="navi">
  <ul>
    <li class="aktiv">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div> <!-- end navi -->


CSS:

Code: Alles auswählen

#navi   {
  padding: 10px 0 10px 0;
  }

#navi ul {
  margin: 0 0 0 5px;
  padding: 0;
  list-style: none;
  }

#navi li {
  display: inline;
  border: 1px solid #black;
  padding: 10px 40px 10px 40px;
  margin-left: -5px;
  background: #ffffff url("../images/navi.png") repeat-x;
  }

#navi li.aktiv {
  background: #ffffff url("../images/navi_aktiv.png") repeat-x;
  }


Ich hoffe, ich mache das nicht komplett falsch...?
Danke für eure Hilfe und freundliche Grüsse
sartOrial

[Executor]

also das mit dem aktiven link geht so nicht. du willst ja dass es für jeden menüpunkt zutrifft, also machs am besten so:

Code: Alles auswählen

<div id="navi">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div> <!-- end navi -->


und css:

Code: Alles auswählen

#navi   {
  padding: 10px 0 10px 0;
  }

#navi ul {
  margin: 0 0 0 5px;
  padding: 0;
  list-style: none;
  }

#navi li {
  display: inline;
  border: 1px solid #black;
  padding: 10px 40px 10px 40px;
  margin-left: -5px;
  background: #ffffff url("../images/navi.png") repeat-x;
  }

#navi li:active {
  background: #ffffff url("../images/navi_aktiv.png") repeat-x;
  }


liebe grüße, exe

[sartOrial]

Danke für die schnelle Antwort. Ich möchte eigentlich nicht, dass es beim aktiven Klicken geändert wird. Wenn der Benutzer z.B. auf der Seite "Kontakt" ist, so wird gerade der Listenpunkt der Navigation herausgehoben. Dies muss ich ja immer manuell ändern.

Danke nochmals.

[Executor]

active ist die eigenschaft des IM MOMENT aktiven links, also nicht nur wenn du mit der maus über ihn fährst. Das wäre "hover".

http://de.selfhtml.org/html/verweise/definieren.htm

Wieso solltest du es für jeden einzeln definieren? Einfach die eigenschaft die du willst für alle <li> in dem entsprechenden <div> definieren. Ich verstehe die problematik irgendwie nicht so ganz^^

[sartOrial]

Danke, ich habe es absurderweise direkt mir dem oben genannten Code geschafft. Da hat sich doch ein Fehler eingeschlichen. Auf http://tinyurl.com/ndfhfy ist das Beispiel. Wenn man auf der Seite "Startseite" ist, dann ist der Hintergrund vom Punkt "Startseite" in der Navigation anders.

Ich habe jetzt jedoch ein anderes Problem. Ich möchte eine Sidebar realisieren (mit float: left). Doch wenn die Sidebar länger als der Content wird, dann überlappt die Sidebar das main-div, welches die Siebar und den Content enthält. Falls jedoch das Content-div länger ist, so wird korrekterweise das main-div auch grösser. Die divs sollten korrekt geschlossen sein.

Bild ist im Anhang.

HTML

Code: Alles auswählen

<link rel="stylesheet" type="text/css" href="style.css" />

<div id="main">

  <div id="sidebar">
    <h1>Sidebar</h1>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div> <!-- end sidebar  -->

  <div id="content">
    <h1>Startseite</h1>
    <p>Startseite</p>
  </div> <!-- end content -->

</div> <!-- end main -->

CSS

Code: Alles auswählen

#main {
   border: 1px solid red;
   }

#sidebar {
   border: 1px solid green;
   float: left;
   padding: 10px;
   width: 100px;
   }

#content {
   border: 1px solid blue;
   margin-left: 122px;
   padding: 10px;
   }