Upline: Infos & Dokus Programmierung Webentwicklung css - Cascading Stylesheet HowTo

Listenformatierung WordPress-like

Fast jeder, der sich mit der Erstellung von Webseiten beschäftigt, der ist auch schon mal dem Content Mangament System WordPress begegnet. Auch wenn es sich bei WordPress vorrangig darum geht, Blogs zu erstellen, so kann man damit doch auch normale Seiten erstellen und selbst wenn man dies nicht möchte, so kann man sich dort zumindest eine interessante Variante der Listenformatierung abschauen. In WordPress werden die Menüeinträge mit Hilfe von Listen dargestellt. Um mit Listen ein Menü aufzubauen, ist es aus optischen Gründne meist unerwünscht, die für Listen üblichen Stichpunktsymbole zu deaktivieren. Dies macht man mit Hilfe von list-style. In WordPress wird aber trotz der Abschaltung der Standardsymbole etwas vor den Links angezeigt, nämlich ein "\00BB \0020" und wem das so gefällt, der bekommt ein solches Menü mittels folgenden Stylesheet-Codes hin:

div#menu{
 font-size: 12px;
 background: #d5d6d7;
 margin:16px 0 4px 4px;
 padding: 4px 0px 0 8px;
 float:right;
 width:160px;
 height:420px;
}
div#menu ul li:before{
 content: "\00BB \0020";
 list-style-type: none;
 list-style-image: none;
 margin-bottom: 15px;
}
div#menu ul{
 margin:0;
 padding:0;
 list-style:none;
}

Das Ergebnis

Unter menu wird in diesem Beispiel festgelegt, wie das Menü aussehen soll. Um gleich noch einige weitere wichtige Parameter vorzuführen, werden für das Menü Farbe, Abstände und Größe definiert. Mit Hilfe des float:right; erreicht man, dass das in div eingeschlossene Menü rechts angeordnet wird und der sonstige Inhalt der Seite automatisch herum fließt. Für alle innerhalb des Menüs platzierten Listen und darin enthaltenen Stichpunkte wird mittels der beiden darunter liegenden Bereiche die entsprechende Definition vorgenommen. Hierzu wird als erstes das li definiert, welches in ein ul eingeschlossen innerhalb eines menu-div steht. Wem dies zu kompliziert klingt, der sollte sich die zu diesem css-Beispiel gehörenden Quelltexte speichern und durch Probieren relativ schnell herausfinden können, was wozu gut ist. Die Festlegung der Innen- und Außenabstände innerhalb von ul und li ist wichtig, da die verschiedenen Browser dies unterschiedlich handhaben und man somit ein einheitliches Aussehen erreichen kann.