horizontale Liste gestalten

In einem Kommentar bei den wp list pages Spielereien fragt Laurent wie man so eine Liste horizontal darstellen kann.

Ganz einfach ist dies nicht zu beantworten, weil es auf den Grundaufbau des jeweiligen Cascading Style Sheet ankommt, aber meist führt folgender Weg zum Ziel:

[Schritt 1]</div><!--das ist das div des headers, das geschlossen werden muss.-->
[Schritt 2]<div id="menu">
[Schritt 3]<ul>
 [Schritt 4]  <?php wp_list_pages..............
[Schritt 5]</ul>
[Schritt 6]</div><!-- id menu end-->

Erklärung:

  1. Schritt 1:
    Die Liste sollte unterhalb des Headers erscheinen, daher erweist es sich oft als gut, den Header vorher zuzumachen.
  2. Schritt 2:
    Ich nehme eine id, weil eine class oft nicht die „Macht“ hat. Der Name „menu“ ist willkürlich ausgesucht, kann auch anders genannt werden.
  3. Schritt 3:
    Für eine horizontale Liste ist es einfacher keine verschachtelte Liste zu nehmen. Der template tag wp_list_pages erzeugt die „li“ selber, also müssen nur die fehlenden ul nachgereicht werden.
  4. Schritt 4:
    Der template tag, welcher auch immer für Dein Anliegen passt.
  5. Schritt 5 und 6:
    Alles was man „aufgemacht“ hat muss man wieder „zumachen“.

In die style.css Deines Themes kommt dann folgendes:

#menu  ul {position:relative; top:10px!important;top:15px; padding:0; margin:0% 3% 0% 0%; }
#menu ul li {display:inline; margin:0 1px; }
#menu  li {padding:2px 10px;}
#menu  li:hover {padding:2px 10px;}
#menu  a:hover {background-color:transparent;}
  • [1] die beiden Angaben bei top:…. sind einmal für den Internet Explorer und einmal für Firefox, Mozilla, Opera. Der Internet Explorer zeigt Abstände anders als die anderen Browser an. Versteht dieses !important aber überhaupt nicht. So kann man dies nutzen zwei Angaben für ein und dieselbe Sache zu machen. Ob die 10px reichen oder zuviel sind, kann man allgemein nicht sagen.
  • [2] wichtig ist dieses display inline , denn dieses inline macht aus der an und für sich vertikalen Liste eine horizontale. Die margin Angaben sind wiederum nicht allgemein bestimmbar.
  • [3] Padding ist der Innenabstand, man sollte padding Werte bei einer horizontalen Liste angeben, damit der Abstand auch links und rechts gut aussieht und benutzbar bleibt. Zu eng erschwert das Draufklicken, wenn man zB. ein ungeübter Maus und Internetnutzer ist.
  • [4] Gibt man dem li einen hover Effekt- der ist sichtbar, wenn man mit der Maus drüber fährt, erleichtert dies ebenfalls das Draufklicken und man hat außerdem mehr Gestaltungsmöglichkeiten.
  • Es geht um Links, die sollte man – wenn es irgendwie geht, so wie die anderen Links auf der Website gestalten. Da man aber manchmal ein Hintergrundbild verwendet oder die Farbe beim Drüberfahren mit der Maus nicht passt oder die horizontale Liste am Ende des Headerbildes erscheinen soll, kann man die Links in dieser horizontalen Liste anpassen.

Ich weiß, sehr allgemein diese Tipps, aber ohne mehr über die Website zu wissen, wo diese horizontale Liste hin soll, kann ich nur spekulieren und sehr allgemein erklären.

Bei Fragen, einfach die Kommentarfunktion nutzen und meist haben viele andere auch Fragen und sind sehr froh, wenn sich jemand zu fragen getraut . :-)

…gut erholt aus dem Urlaub zurück ;)

edit:09.02.06
Ich antworte hier, weil in den Kommentaren zuwenig html erlaubt ist -aus Sicherheitsgründen.;)

 #menu  ul {position:relative; top:10px!important;top:15px; padding:0; margin:0% 3% 0% 0%; }
#menu ul li.page_item {display:inline; margin:0 1px; }
 #menu  li {padding:2px 10px;}
 #menu  li:hover {padding:2px 10px;}
 #menu  a:hover {background-color:transparent;}
#menu li {	list-style-type: none;
	list-style-image:none;}

mit dem list style type none verbietest Du die Bullets mit list style image etwaige Bildchen, die Du vielleicht woanders in einer Liste hast anstatt der Bullets.

Die Zwischenstriche:
1. Möglichkeit -in allen Browsern sichtbar:
Du verwendest nicht den template tag wp_list_pages, sondern verlinkst selber jede Seite.

<div id="menu">
<ul><li> a href="deinedomain.de/....." title=".....">Blubsch</a></li>
</ul></div>

Nachteil: ist aufwändig.

2.Möglichkeit: der Internet Explorer zeigt dies nicht an, Browser schon.;)

Du schreibst in die style.css folgendes dazu:

#menu ul li:before{
	 content:"\|";
	 text-align:center;

}

lg

9

9 Beiträge zu “horizontale Liste gestalten

  1. Kommentar Autor
    Laurent
    Kommentar

    Ah, Danke schonmal! Die seitenliste erscheitn nun oben im Header.

    Jedoch werden die Seiten untereinander gelistet, nicht nebeneinander, mit LI Bullets

    Ich sehe das oft bei WP Templates dass es wie folgt angezeigt wird:

    „Home | Seite 1 | Seite 2 | …“

    Das würde ich gerne auch :-) Ich benutze übrigens Kubrick Default_de.

  2. Kommentar Autor
    Monika
    Kommentar

    Hi Laurent
    am Ende des Artikels steht mein Vorschlag für Dein Begehr.;)

    lg

  3. Kommentar Autor
    Werfer
    Kommentar

    Ich bekomme es einfach nicht hin – ich habe zwar die Liste nebeneinander, aber ich bekomme kein bullet vorne dran :-((

    Weiss nicht, was ich da falsch mache *sniff*

  4. Kommentar Autor
    Monika
    Kommentar

    Werfer Hi
    ich war weg daher erst so spät meine Antwort,
    kann sein, dass irgendwo in der .css Datei ein list-style-type:none steht,

    öffne die Datei wo Du die Liste drin hast,
    dort steht wo das ul dann die li mit den Links.

    bei dem ul schreibe hinein:

    ul style=“list-style-type:circle;“

    die spitzen Klammern stehen eh schon dort,
    statt circle kannst Du auch:
    square,disc hinschreiben, was Dir eben besser gefällt,

    müßte funktionieren.

    lg

  5. Kommentar Autor
    Rose Kane
    Kommentar

    Huhuuuu Monika *g*,

    im übrigen – auch hier noch einmal – vielen Dank für diese Anleitung hier. Ich habe sie natürlich ausprobiert. Und es hat natürlich auch (irgendwie) geklappt. :) Nur leider wollte ich (mal wieder) mehr, als …

    Ich bin im Endeffekt (geteiltes Menue/Navi für statische Pages) bei Arno gelandet. Der hat da so ein nettes Plugin. Nun sind die Pages im Header und die Subpages in der Sidebar.

    Ein kleiner Schritt weiter. *g*

    LG
    R.K.

  6. Kommentar Autor
    Torsten
    Kommentar

    Hallo!
    Erstmal vielen Dank für die tollen Tipps und Anleitungen hier auf der Seite. Wirklich Klasse!
    Ich setze WP (Default_de) gerade zum ersten Mal ein und versuche mich an der Umsetzung als CMS.
    Das erste Problem taucht allerdings schon bei der Navigation auf.
    Ich möchte ebenfalls mit einer horizontalen Liste arbeiten.Dort sollen drei Links mit den „Hauptseiten“ auftauchen.
    Die „Hauptseiten“ haben jeweils drei/vier Sublinks. Das Ganze möchte ich als Rollover-Menu umsetzen, in dem die Sublinks zu den Unterseiten nur bei
    MouseOver auftauchen.
    Hat jemand sowas schonmal mit „wp_list_pages“ umgesetzt, oder meint ihr, da sollt ich lieber auf ein selbstgebasteltes Menue zurückgreifen?

    Gruß
    Torsten

  7. Kommentar Autor
    Tobias
    Kommentar

    Danke für die Top Anweisung wie würde eigenltich die CSS Anweisung Aussehen wenn ich die unter Kategorien mit dem hover Effekt anzeigen lassen würde?

  8. Kommentar Autor
    Monika
    Kommentar

    Hi Tobias welches html und steht dort.
    oben im Browser steht wo Ansicht==>Quellcode
    sieh dort nach und teile mir das mit,

    oder wo finde ich Deine *Unterkategorien* Den Forum ist ja nicht unbedingt WP ;)

    lg