Wordpress Menü Problem

  • Hallo zusammen,


    vorab möchte ich erwähnen das ich HTML Grundkenntnisse habe.


    Ich bastle gerade an meiner Wordpress Seite. Ich habe einen Wunsch, ich möchte das mein
    Menü wie folgt aussieht:


    http://www.script-tutorials.com/demos/272/index.html


    (nur die Optik würde ich haben wollen. Die Funktionen sollten von Wordpress bleiben.)



    Mein Menü sieht momentan wie folgt aus:


    http://www.erkanp.com/screenshot_menu.jpg



    Ich versuche schon wie verzweifeln die menüs zu trennen, also so wie bei dem Demo.
    In etwa so: I Startseite I Store I Kontakt I


    die Linien in der Mitte würden mir reichen.


    Ich habe auch schon Tutorials ausprobiert. Aber kein erfolg :(
    Ich vergesse glaube ich immer irgendwas. Sobald ich am Code rumbastle verschiebt sich alles :roll:


    das ist mein STYLSHEET CODE für das Menü (style.css):


    Hat jemand vielleicht noch Ideen wie man das macht? :(


    Danke schonmal voraus!

  • Der grafische Trenner zwischen den Tasten ergibt sich durch einen optischen Trick. Es werden rechts und links bei den Li-Elementen die Border gesetzt. Diese fehlen bei dir.
    Damit die linke Kante beim ersten Element nicht sichtbar ist. wird dem ersten Listenelement mit der Pseudoklasse first-Child die Kante(Border) wieder mit ausgeblendet mit Border:0;


    Das gleiche erfolgt dann auch beim letzten Listenelement für die Rechte Kante. Die durch das last-child ausgewählte Element erhält border:0;


    Siehe dir doch noch mal ganz genau das CSS an und versuche nachzuvollziehen welche Regel sich auf welches Element bezieht.


    Für dich wichtig ist hier #nav li und #nav > li:first-child, sowie #nav > li:last-child
    http://www.script-tutorials.com/demos/272/css/menu.css