suit: ul li format Probleme

Beitrag lesen

Ich fange gerade an mich mit css zu beschäftigen und habe ein Problem mit der ul li Formation.

Kann mir jemand helfen wo ich den Fehler hier habe, es wird nämlich keine Formation angezeigt.

Du formatierst ein ul-Elemente mit der ID "menu" obwohl diese in deinem HTML nicht exsitieren.

Du formatierst li-Elemente mit der ID "menu" obwohl diese in deinem HTML nicht exstieren.

Nebst dessen kann in demselben Dokument unmöglich ein li-Element und ein ul-Element mit derselben ID vorkommen (bzw. darf nicht).

#menu{background:#fff}

ul#menu {list-style-type: none;margin:0;padding:0;}
li#menu{width:120px; height:40px; border: 1px solid #000; float:left;}
li#menu a:hover{background:#c0c0c0}


>   
>   
> ~~~html

<div id="titel">  

> <ul>  
> <li><a href="URI">titel</a></li>  
> <li><a href="URI">titel</a></li>  
> <li><a href="URI">titel</a></li>  
> <li><a href="URI">titel</a></li>  
> </ul>  
> </div>

Ich denke dein HTML sollte eher so ausehen[1]

<div id="menu">  
  <ul>  
    <li><a href="/foo/">foo</a></li>  
    <li><a href="/bar/">bar</a></li>  
    <li><a href="/baz/">baz</a></li>  
    <li><a href="/qux/">qux</a></li>  
  </ul>  
</div>

alternativ in HTML5 auch so

<nav id="menu">  
  <ul>  
    <li><a href="/foo/">foo</a></li>  
    <li><a href="/bar/">bar</a></li>  
    <li><a href="/baz/">baz</a></li>  
    <li><a href="/qux/">qux</a></li>  
  </ul>  
</nav>  

[1] ja, ich bin mir der Redundanz des div-Elemens bewusst, es erleichtert aber die Migration auf HTML5 und erlaubt zudem Spielereien wie etwas das hier (um bei Screenreader zumindest eine sinnvolle Überschrift zu haben).

<div id="menu">  
  <h2>Hauptmenü</h2>  
  <ul>  
    <li><a href="/foo/">foo</a></li>  
    <!-- ... -->  
  </ul>  
</div>