Wie bekomme ich die Menuleiste horizontral

[Ansgarm74]

Hallo zusammen,
ich habe ein Menu (vertikal) mit CSS-Unterstützung geschrieben und möchte dies nun horizontal einfügen.
Hier die Einträge der CSS-Datei für die Steuerung:
  html, body { height: 100%;
    background-color: rgb(255, 255, 255);
    }
  #steuerung { float: left;
    height: auto;
    margin-right: 1em;
    width: 12em;
    background-color: rgb(204, 204, 204);
    }

#steuerung strong, #steuerung a { border-top: 1px solid black;
    padding: 6px 6px 6px 20px;
    color: rgb(0, 0, 0);
    display: block;
    text-decoration: none;
    background-color: rgb(204, 204, 204);
    }

#steuerung strong { background: rgb(200, 200, 200) none no-repeat scroll left 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    color: white;
    }

#steuerung ul { border-bottom: 1px solid black;
    background-color: rgb(102, 255, 153);
    }

#steuerung a:hover { border-top: 1px solid white;
    border-bottom: 1px solid white;
    color: rgb(255, 255, 255);
    background-color: rgb(204, 204, 204);
    }

Was mus ich ändern, damit das Menu horizontal wird.

Gruß
A. Müller-Wissmann

[Siri]

Hallo,

wie schaut der Style für die LI-Elemente aus?

Viele Grüße
Siri

[Ansgarm74]

Hallo,
die Zeile mit dem Li-Elemente sieht wie folgt aus:
<div id="steuerung">
<ul>
                          <li><strong>Hauptseite</strong></li>
                          <li><a href="wirueberuns.html">Wir über uns</a></li>
                          <li><a href="leistungen.html">Leistungen</a></li>
                          <li><a href="baugesuch.html">Lageplan zum Baugesuch</a></li>
                          <li><a href="projekte.html">Projekte</a></li>
                          <li><a href="referenzen.html">Referenzen</a></li>
                          <li><a href="kontakt.html">Kontakt</a></li>
                          <li><a href="impressum.html">Impressum</a></li>
</ul>
</div>

Gruß

Ansgar

[Baba]

Wie schaue das _html_ aus?

Cheers,
Baba

[Aleph Systems]

Eine horizontale Menuleiste wird dadurch erzeugt, dass man die Einträge mit dem Style Attribut float:left versieht. Beispiel:

HTML Markup:

  
<ul id="menue">  
  <li>entry nr. 1</li>  
  <li>entry nr. 2</li>  
  <li>entry nr. 3</li>  
</ul>  

Style Deklaration:

  
// verhindere das die Auflistungspunkte von ul angezeigt werden  
ul#menue {  
  list-style: none;  
}  
  
// richte Kindknoten von #menue links aus  
#menue > li {  
  float: left;  
}  

Eine detaillierte Anleitung findet sich unter http://de.selfhtml.org/css/layouts/navigationsleisten.htm
der CSS-Part ist sehr empfehlenswert, bei Javascript-Lösungen ist aber jQuery vorzuziehen.

Um verschiedene Menüefekte zu entwickeln empfehle ich die Chrome Entwicklertools. Mit diesem Tool kann man unter anderen auch gelungene Menüs anderer Webseiten analysieren. Frei nach dem Motto: "good artists copy great artists steal"

_______________________

M. Jutzi@aleph systems