Matze: [CSS] MouseOver Button Problem

Beitrag lesen

Hallo!

Matze kannst du mir vielleicht helfen. damit ich das heute nich gut hinbekomme?

Du willst es _nicht_ gut hinbekommen? ;D

<div id="menu01">
<ul>
<li><a href="/bt/html/de_wir_ueber_uns.html">Wir über uns</a></li>
...
</ul>
</div>

Da eine Liste (das ul-Element) bereits ein Block-Element zur Gruppierung von Elementen (Listenpunkten) ist, kannst du dir das Div darum sparen sofern es ausschließlich die Liste enthält.
Die Liste selbst formatierst du dann wie das Div-Element.
Eventuell noch margin und padding auf 0 setzen und die Eigenschaft list-style:none um die "Bullets" vor den Listenpunkten zu vermeiden.

Da du ein horizontales Menü haben möchtest, eine Liste für gewöhnlich aber vertikal dargestellt wird, musst du den li-Elementen die nötigen Eigenschaften geben: float:left. Anschließend gibst du den li-Elementen die Höhen- und Breitenangaben und richtest den Text darin aus. Et voilâ.

Kann man von dem CSS Code von mir noch was retten? oder soll ich nochmal komplett von vorne anfangen?

Ich kenne deinen CSS-Code nicht.
Schau dir bitte die Beispiele hier an.
Dann versuchst du dein Menü so zu basteln wie du es haben willst.
Dort wo du Probleme hast, können wir dir dann helfen.
Dazu kannst du dann die Ausschnitte deines CSS- und HTML-Codes posten,
damit wir wissen wie dein aktueller Stand ist.

Ich hab das Tutorial hier gefunden, aber da ist die breite immer anders und die verwenden auch keine Background Bilder
http://css.maxdesign.com.au/listutorial/horizontal_master.htm

Das Beispiel ist eigentlich perfekt.
Die Breite der Punkte im Beispiel kannst du hier festlegen:
#navcontainer ul li { display: inline; }
Das Beispiel verwendet auch keine Hintergrundbilder.

Noch ein Beispiel von mir:
CSS

  
ul {  
 margin:0;  
 padding:0;  
 list-style:none;}  
li {  
 float:left;  
 border:thin solid black;  
 width:50px;  
 height:40px;  
 text-align:center;}  
li:hover {  
 background:#CCCCCC;}  

HTML

  
<ul>  
  <li>test</li>  
  <li>test</li>  
  <li>test</li>  
  <li>test</li>  
</ul>  

Das ul-Element und die li-Elemente kannst du formatieren wie du willst.

Grüße, Matze