CSS-basierte Navigationsleiste

[12557]

Hallo Leute,

ich brauch dringend eure Hilfe.
ich bin gerade dabei ein CSS-Menü zu modifizieren.
Ich weiss es ist Wordpress aber in deren Forum bekomme ich keine
qualifizierte Auskunft.

Schaut euch mein Menü erst mal hier an.
http://studiokruckerbates.fokminusyou.com/

Was ich erreichen wollte ist das das Menü horizontal ist aber nicht nur bei der ersten Liste sondern auch bei allen Sublisten. So das ich am ende 3 horizontale Zeilen habe die sich über die ganze Seite erstreckt und die Buttons mittig sind so wie bei der ersten Zeile.

Ich weiss meine Frage ist sehr wage und undefiniert.
Ich glaube ich habe das ganze ul li a noch nicht ganz verstanden.
Dazu habe ich das hier studiert:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=http://de.selfhtml.org/css/layouts/navigationsleisten.htm

Da aber die divs im twentyten alle #access ul oder ähnlich heissen komme ich glaube ich ein wenig durcheinander. Vielleicht könnt ihr mir zu ein wenig Ordnung verhelfen.

Ich bin mir nicht sicher wie die listen im css angesprochen werden
vielleicht liegt darin der Fehler:

  
ERSTE MENÜ ZEILE  
#ul  
{TEST}  
  
#li  
{TEST}  
  
  
ZWEITE MENÜ ZEILE      VARIANTE 01  
  
#ul ul  
{TEST}  
  
#ul ul li  
{TEST}  
  
  
ZWEITE MENÜ ZEILE     VARIANTE 02  
  
#ul li ul  
{TEST}  
  
#ul li ul li  
{TEST}

Welche Version ist richtig?

Vielen Dank euch schon mal!
Besten Gruß

[Ole.]

Hallo

ERSTE MENÜ ZEILE
#ul
{TEST}

#li
{TEST}

  
Warum [ID](http://de.selfhtml.org/css/formate/zentrale.htm#individualformate)s?  
  

> Welche Version ist richtig?  
  
Beide. Variante 2 ist nur spezifischer, wenn auch nicht sinnvoll [da ul nur li als kind haben darf](http://de.selfhtml.org/html/referenz/elemente.htm#ul).  
  
Gruß  
Ole

[12557]

Super Danke für die Schnelle Antwort Ole.

Ok ich schaus mir noch mal sehr genau an.
Wenn beide richtig sind wo steckt dann der Fehler?
Warst du auf meiner Seite?

Ich will erreichen das alle Sublisten so aus sehen wie die erste.
Also horizontal und zentriert.
Wieso übernehmen die Sublisten die Position von den Buttons und verspringen nach rechts?

[Malcolm Beck´s]

مرحبا

Wieso übernehmen die Sublisten die Position von den Buttons und verspringen nach rechts?

Weil die li-Elemente in deinem Bsp. alle auf position:relative; gesetzt wurden. Du aber möchtest nur das erste ul-Element relativ ausrichten.

mfg

[12557]

Danke Malcolm,

das habe ich mir auch schon gedacht. Ich habe gleich mal alle positions raus genommen oder auf absolute gestellt. Nun klappt die Leiste aber nicht mehr runter sondern flackert wie wild wenn ich auf einen Button gehe.
Kannst du mir da noch mal einen Tip geben? Das wäre großartig!

Hier mal mein Original Code aus dem CSS-File:
Stand bevor du mir geschrieben hast. Was müsste ich ändern. Ja ja ich weiße das Forum heisst SELFhtml. Ha ha.

  
#access {  
    border-bottom: 1px dashed #000000;  
    border-top: 1px dashed #000000;  
    display: block;  
    float: left;  
    margin: 0 auto;  
    text-transform: uppercase;  
    width: 100%;  
}  
#access .menu-header, div.menu {  
    font-size: 11px;  
    width: 444px;  
}  
#access .menu-header ul, div.menu ul {  
    list-style: none outside none;  
    margin: 0;  
}  
#access .menu-header li, div.menu li {  
    float: left;  
    position: relative;  
}  
#access a {  
    color: #000000;  
    line-height: 16px;  
    padding: 0 10px;  
    text-decoration: none;  
}  
#access ul li ul {  
    border-bottom: 1px dashed #000000;  
    display: none;  
    position: absolute;  
    width: 728px;  
}  
#access ul li ul li {  
    display: inline;  
    width: 100px;  
}  
#access ul li ul a {  
    float: left;  
    line-height: 16px;  
    text-align: center;  
    width: 90px;  
}  
#access ul li ul li ul {  
    border-bottom: 1px dashed #000000;  
    padding-top: 21px;  
}  
#access ul li ul li ul li {  
    width: 150px;  
}  
#access ul ul ul a {  
    width: 150px;  
}  
#access li:hover > a, #access ul ul *:hover > a {  
    color: #E1DDD1;  
}  
#access ul li:hover > ul {  
    display: block;  
}  
#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {  
    color: #000000;  
}  
* html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover {  
    color: #FFFFFF;  
}  
  

[Malcolm Beck´s]

مرحبا

Kannst du mir da noch mal einen Tip geben? Das wäre großartig!

Du hast einige Selektoren ausgelassen, wie bspw. left:0; für den einzublendenden Inhalt.

http://jsfiddle.net/TWw24/  (im FF getestet)

Am HTML habe ich nichts geändert, nur im CSS bereich.

mfg

[12557]

Du hast einige Selektoren ausgelassen, wie bspw. left:0; für den einzublendenden Inhalt.

Ok weil ichs glaube ich nach wie vor nicht ganz verstanden habe. Puhh.
Ich werd noch mal darüber Brüten.

http://jsfiddle.net/TWw24/  (im FF getestet)

Das ist ja super. Das ist mal ein Service. Und das fiddle kannte ich garnicht. Tolles tool. Wenn ich dein CSS daraus nehme und in mein file kopiere klappts noch nicht. Aber ich probier jetzt noch mal rum.

Tausend Dank dir echt!

[Gunnar Bittersmann]

@@12557:

nuqneH

Und das fiddle kannte ich garnicht. Tolles tool.

Für HTML und CSS ist auch dabblet (mit Github-Anbindung) äußerst brauchbar.

Qapla'

[Malcolm Beck´s]

مرحبا

Und das fiddle kannte ich garnicht. Tolles tool.

Für HTML und CSS ist auch dabblet (mit Github-Anbindung) äußerst brauchbar.

Ist das nur für HTML und CSS?

mfg

[Malcolm Beck´s]

مرحبا

Für HTML und CSS ist auch dabblet (mit Github-Anbindung) äußerst brauchbar.

Ist das nur für HTML und CSS?

Hat sich selbst beantwortet: Ja.

mfg

[12557]

Jungs könnt ihr mir noch sagen wieso ich das css aus dem fiddle nicht einfach per copy paste in mein stylesheet übertragen kann?
Bzw. Es geht schon aber danach sind die SUBmenüs immer noch nach rechts verschoben.

Danke euch!

[Malcolm Beck´s]

مرحبا

Jungs könnt ihr mir noch sagen wieso ich das css aus dem fiddle nicht einfach per copy paste in mein stylesheet übertragen kann?
Bzw. Es geht schon aber danach sind die SUBmenüs immer noch nach rechts verschoben.

Vielleicht dein Browser-Cache?

mfg

[12557]

Hahahah oh man war mein Fehler hab was falsches hoch geladen. Sorry gell.
Jetzt klappts schon fast.

http://studiokruckerbates.fokminusyou.com/

Aktuell is alles noch linksbündig aber das bekomm ich glaub ich hin.

Noch mal vielen vielen Dank für deine Mithilfe. Ein hoch auf das Internet.
Jetzt muss ich aber noch verstehen was du da gemacht hast damit ich noch etwas lerne.

[Malcolm Beck´s]

مرحبا

Jetzt muss ich aber noch verstehen was du da gemacht hast damit ich noch etwas lerne.

Das war eigentlich nur ein Denkanstoss und keine fertige Lösung. Das Menu funktioniert Mangelhaft, wenn nicht gar Ungenügend.

Versuche <http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm@title=dieses Menu> deinen anforderungen anzupassen. Dann hast du schonmal eine funktionierende Grundlage, auf der du aufbauen kannst.

mfg

[12557]

Ich bekomme es doch nicht hin.
Wie mach ich das Menü zentriert?

[Matthias Apsel]

Om nah hoo pez nyeetz, 12557!

Ich habe gleich mal alle positions raus genommen oder auf absolute gestellt. Nun klappt die Leiste aber nicht mehr runter sondern flackert wie wild wenn ich auf einen Button gehe.

position verstehen.

Matthias