Erste Ebene vertikal, 2. Ebene horizontal

[bluuba]

Hallo.

Ich bin gerade dabei eine Navigation zu erstellen, welche das erste Level der Navigation vertikal darstellen soll und die 2. Ebene horizontal zum dazugehörigen vertikalen Navigationspunkt.

Bei den Modul-Einstellungen habe ich das Stoplevel auf 1 gestellt, sodass mir die erste Ebene ausgegeben wird und bei einem active Status auch die 2. ebene.

mein css sieht folgender maßen aus:

#nav_main {
	position:absolute;
	margin-left:165px;
}
#nav_main ul {
	margin:0;
	
}

#nav_main li {
	margin-bottom:5px;
	margin-left:5px;
	background-image:url(buttons/button.png);
}
#nav_main .level_2 li { background:url(buttons/button_blue.png); }
#nav_main a {
	display:block;
	text-indent:-9999em;
	width:94px;
	height:94px;
}

#nav_main .level_1 .active { float:left; }
#nav_main .level_1 .trail { float:left; }
#nav_main .level_2 li { float:left; }

#nav_main ul li {
	background-position:0 0;
	background-repeat:no-repeat;
	
}

Doch meine Darstellung klappt überhaupt nicht ...

Sie sieht folgendermaßen aus:

http://imageshack.us/photo/my-images/231/navcl.png/

Und wenn ein anderer Menüpunkt active ist so:

http://imageshack.us/photo/my-images/215/nav2m.png/

[wotank]

Moin,

kein Link zum Problem senkt die Anzahl der Hilfswilligen i.d.R. drastisch ab, weil man da nur rumraten kann.

Codeschnipsel helfen da nicht wirklich, da der Zusammenhang fehlt.

Ich rate mal: irgendwas mit position:absolute;?
Das wird ja normal nur benötigt um die Subliste auszublenden und wieder einzublenden.
#nav_main position:absolute zu geben klingt für mich bedenklich, aber so ohne Link........

[bluuba]

Hier wäre der Link zur Seite: -

[Thoni]

Ich sehe keine zweite menü-Ebene.

Kannst du da mal was anlegen?

[bluuba]

Die zweite Ebene erscheint, wenn du auf einen Menüpunkt klickst. Am besten ist es beim Menüpunkt "Urlaub" sichtbar.

[Thoni]

OK - ich dachte, es wäre ein Aufklappmenü - sorry.

Versuch mal

#nav_main .level_2 {
    float: left;
}

Gruß
Thoni

[bluuba]

Bin dem Ergebnis schon einiges näher, dank deiner Hilfe. Jedoch wird es noch nicht ganz richtig angezeigt -.- Es überlappen sich Menüpunkte in der 1. Ebene.

mfg

[Thoni]

Im IE7 und FF z.B. ist es OK.

In welchem Browser gibt es denn Probleme?

[bluuba]

FF, chrome sowie IE

Ich habe wie gesagt die 4 Hauptnav Punkte (Betrieb, Wein, Jaus'n, Urlaub). Klicke ich beispielsweise auf Betrieb wird der Menüpunkt Wein auf der selben stelle wie Betrieb angezeigt ..

ich glaube, das iwo ein clear fehlt nur weiß ich nicht wo ..

mfg

[wotank]

ul.level_2 sollte eine Breite bekommen (bei 500px standen mit Firebug die Submenüpunkte schön daneben).

Jetzt verstehe ich auch das überflüssige position:abs. für #nav_main.
Du hast ein Schmuckbild was als HG-Bild unbedingt ins CSS gehört als img ins Markup geschrieben.
Das widerspricht der Trennung von Inhalt und Gestaltung.

Änder das, dann brauchst du auch das überfl. pos. abs. nicht.

[Thoni]

Probier mal (ungetestet):

#nav_main .level_1 {
    clear: both;
}

[bluuba]

position:absolute ist dafür da, dass ich meine Navigation über das Modul PageImage legen kann. Das Bild im Header soll ja kein Hintergrundbild sein, es soll über das Modul PageImage gesteuert werden ...

mfg

[bluuba]

Probier mal (ungetestet):

#nav_main .level_1 {
    clear: both;
}

Nein, dann würde ich nur auf level_1 ein clear machen was überflüssig ist.

mfg

[wotank]

position:absolute ist dafür da, dass ich meine Navigation über das Modul PageImage legen kann. Das Bild im Header soll ja kein Hintergrundbild sein, es soll über das Modul PageImage gesteuert werden ...

okay, obwohl es wie ein Schmuckbild aussieht.

Hast du das mit der Breite probiert, hat bei meinem Test zum Erfolg geführt?

[Thoni]

Nein, dann würde ich nur auf level_1 ein clear machen was überflüssig ist.

mfg

Hast du es mal probiert?
Wenn man auf 'Betrieb' klickt gilt:

#nav_main .level_1 .active {
    float: left;
}

Dadurch zieht es den nächsten Punkt _1 nach oben.

Gruß
Thoni

[bluuba]

okay, obwohl es wie ein Schmuckbild aussieht.

Hast du das mit der Breite probiert, hat bei mir zum Erfolg geführt.

Das mit der Breite habe ich auch versucht. Aber daran liegt es nicht. Ich habe jetzt bemerkt, dass ich mit dem zuvor eingebauten float die level_2 Menüpunkte in einer Reihe habe. Jedoch wird nach dem letzten level_2 Menüpunkt der level_1 nicht in einer neuen Zeile angezeigt.

Daher dachte ich, dass ich auf jedes level_1 li ein clear:both mache:

#nav_main .level_1 li { clear:both; }

Jedoch wird dieses clear auch für die li's im level_2 übernommen. Wäre dies nicht so, würde mein Menü richtig angezeigt werden ...

mfg

[wotank]

Das mit der Breite habe ich auch versucht. Aber daran liegt es nicht. Ich habe jetzt bemerkt, dass ich mit dem zuvor eingebauten float die level_2 Menüpunkte in einer Reihe habe. Jedoch wird nach dem letzten level_2 Menüpunkt der level_1 nicht in einer neuen Zeile angezeigt.
Daher dachte ich, dass ich auf jedes level_1 li ein clear:both mache:

#nav_main .level_1 li { clear:both; }

Jedoch wird dieses clear auch für die li's im level_2 übernommen. Wäre dies nicht so, würde mein Menü richtig angezeigt werden ...

mfg

trotzdem, die Breite für die ul.level_2 ist nötig, damit die Submenüpunkte nicht in die Zeile darunter gedrückt werden.
Um dein Problem ganz zu beheben braucht das jeweils nach der ul.level_2 folgende li noch ein clear:left; (mit Firebug erfolgreich getestet!)

[Thoni]

Jedoch wird dieses clear auch für die li's im level_2 übernommen. Wäre dies nicht so, würde mein Menü richtig angezeigt werden ...

mfg

Die einzelnen CSS-Zeilen werden nacheinander abgearbeitet.
Schreibst du (abgekürzt) ...

.level_2 li {float:left;}
.level_1 li {clear:both;}

... so wird wegen der 'Vererbung' die erste Zeile 'überschrieben'.

Versuch es mal anders herum.

[wotank]

Die einzelnen CSS-Zeilen werden nacheinander abgearbeitet.
Schreibst du (abgekürzt) ...

.level_2 li {float:left;}
.level_1 li {clear:both;}

... so wird wegen der 'Vererbung' die erste Zeile 'überschrieben'.

sorry, aber da hast du leider so einiges durcheinandergeworfen.

Das hat mit Vererbung nicht das geringste zu tun und überschrieben wird da überhaupt nix, weil per Nachfahrenselektor jeweils ganz spezifische li's angesprochen werden.
Außerdem vererben sich weder Float noch Clear.

Das die Browser die CSS zeilenweise nacheinander abarbeiten stimmt nur äußerst bedingt und erweckt so wie du es schreibst einen vollkommen falschen Eindruck, wie ein Browser dabei vorgeht.
Lesestoff dazu, wie die Browser vorgehen und was dabei wichtig ist.


@bluuba noch ein kleiner Nachtrag:
Mit Float wird ein Element auch aus dem Textfluß genommen, deshalb rutscht bei dir der dem Submenü nachfolgende Hauptmenüpunkt nach oben.
Es nützt auch nix wenn du einfach alles floatest, um die Floats korrekt einzuschließen.
Du brauchst ein solides Clear, sonst wird das nix.
Wie das technisch geht hab ich ja schon gepostet.

[Thoni]

sorry, aber da hast du leider so einiges durcheinandergeworfen.

Das hat mit Vererbung nicht das geringste zu tun und überschrieben wird da überhaupt nix, weil per Nachfahrenselektor jeweils ganz spezifische li's angesprochen werden.
Außerdem vererben sich weder Float noch Clear.

Ebenfalls Sorry.

Dass es keine echte Vererbung im klassischen Sinne ist, ist mir klar. Daher habe ich das Wort auch in Anführungsstriche gesetzt.

Die FH Rosenheim schreibt, dass in unserem Fall (.level_1 li {clear:both;}) ALLE li innerhalb des .level_1 das clear erhalten. Dazu gehören auch die von .level_2!

Quelle: http://fwpf-webdesign.de/css/arten-v...fahrenselektor

Bedenkt man dann, dass beide von mir angegebene Zeilen die gleiche Wichtigkeit/Spezifität besitzen, ist ein Satz aus deinem Linkziel besonders interessant:

Wenn zwei Deklarationen aus demselben Stylesheet stammen und sowohl die gleiche Wichtigkeit als auch die gleiche Spezifität haben, gewinnt die zuletzt notierte Anweisung.

Ich glaube daher eher, dass du da etwas durcheinander bringst.

Viele Grüße
Thoni

[Thoni]

trotzdem, die Breite für die ul.level_2 ist nötig, damit die Submenüpunkte nicht in die Zeile darunter gedrückt werden.
Um dein Problem ganz zu beheben braucht das jeweils nach der ul.level_2 folgende li noch ein clear:left; (mit Firebug erfolgreich getestet!)

bluuba schrieb, dass meine Antwort ihm geholfen hat und daher ist die Breite unwichtig.
Das von dir angesprochene ul.level_2 li {clear:left;} ist falsch, da diese li's ein float:left benötigen, um nebeneinander zu stehen.

Viele Grüße
Thoni

[wotank]

Dass es keine echte Vererbung im klassischen Sinne ist, ist mir klar. Daher habe ich das Wort auch in Anführungsstriche gesetzt.

ich bin mir sicher das der Fragende mit deinen Anführungszeichen und was sie wohl bedeuten könnten nichts anfangen können.

Die FH Rosenheim schreibt, dass in unserem Fall (.level_1 li {clear:both;}) ALLE li innerhalb des .level_1 das clear erhalten. Dazu gehören auch die von .level_2!

Quelle: http://fwpf-webdesign.de/css/arten-v...fahrenselektor

Bei dem Link schreibt Corina von Textfarbe und die vererbt sich auf ihre Nachfahren.
Float und Clear hingegen sind nicht vererbbar.

Bedenkt man dann, dass beide von mir angegebene Zeilen die gleiche Wichtigkeit/Spezifität besitzen, ist ein Satz aus deinem Linkziel besonders interessant:

Wenn zwei Deklarationen aus demselben Stylesheet stammen und sowohl die gleiche Wichtigkeit als auch die gleiche Spezifität haben, gewinnt die zuletzt notierte Anweisung.

nein, ist es nicht, weil die Reihenfolge im CSS die allergeringste Wichtigkeit besitzt.
Wenn du da mal alles gelesen hättest, was zu dem Thema steht wüßtest du es jetzt auch.

bluuba schrieb, dass meine Antwort ihm geholfen hat und daher ist die Breite unwichtig.
Das von dir angesprochene ul.level_2 li {clear:left;} ist falsch, da diese li's ein float:left benötigen, um nebeneinander zu stehen.

das die li's der zweiten Ebene ein Clear bekommen sollen habe ich nicht geschrieben. Lies doch noch mal genau:

das jeweils nach der ul.level_2 folgende li

Meine Lösung hab ich mit Firebug erfolgreich getestet bevor ich sie gepostet habe.

Du postest einen offensichtlichen Schmarrn hier.
Mache ich dich drauf aufmerksam, tust du wirklich alles, um irgendwie zu beweisen, das du zumindest ein bißchen recht hast, bzw. falsch verstanden wurdest. Du zitierst offensichtlich falsch und reißt Sachen aus dem Zusammenhang, um nur irgendwie recht zu haben.

Hast du einmal auch nur ansatzweise bedacht, das es in diesem Fred darum geht dem Fragenden zu helfen.
Es ist doch noch niemand ne Zacke aus der Krone gebrochen, wenn man mal einen Schmarrn gepostet hat und darauf aufmerksam gemacht wird (Ist mir auch schon passiert!).

[bizon]

Hi an alle,

was ist denn hier los? Es ist das erste Mal, dass ich in diesem Forum erlebe, dass richtig gefightet wird.

Ich habe den Thread von bluuba gestern gelesen und wollte eigentlich schnell antworten, weil ich meinte, dass ul.level_1 ein width braucht. Da aber bereits heftig diskutiert wurde, wollte ich sicher gehen und hab das Menü nachgebaut - siehe Anhang.

In meiner Lösung wird kein clear:both gebraucht.
Alle li bzw. a haben float:left.
.level_1 bekommt ein width:94px, so dass der float hier einen Zeilenumbruch bewirkt

.main_nav {
	margin:0 0 0 160px;
	padding:20px 0 0 0;
	width: auto;
}
.main_nav .level_1 {width:94px;}

.main_nav ul li a,
.main_nav .active span {
background: #b20000;
color: #fff;
display: block;
height: 94px;
line-height: 94px;
width: 94px;
padding-left: 10px;
text-decoration: none;
/*text-indent:-9999em;*/
}

.main_nav .active span {
background: #888;
}

.main_nav ul li ul li a,
.main_nav ul li.trail a{
background: #600000;
}

.main_nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.main_nav ul li {
margin:0 0 5px 0;
float: left;
position: relative;
}

.main_nav ul li ul li{
margin:0 0 0 5px;
}

.main_nav ul li ul {
display: none;
}

.main_nav ul li.active ul,
.main_nav ul li.trail ul {
background:#ddd;
display: block;
left: 104px;
position: absolute;
top: 0;
width:350px;
}

.main_nav ul li:hover ul li {
float: left;
}

.main_nav ul li:hover ul li a {
background: #600000;
color: #fff;
display: block;
float: left;
width: 94px;
}

.main_nav ul li a:hover,
.main_nav ul li ul li a:hover {
background: #BBBB99;
color: #000;
}

Evtl. kann man den Code an der einen oder anderen Stelle noch bereinigen, das hab ich mir erspart. Tatsache ist aber, dass es funktioniert im:

Firefox 4
Opera 11
Chrome 11
sogar im IE6 (andere IEs habe ich grad nicht zur Verfügung)

[Thoni]

ich bin mir sicher das der Fragende mit deinen Anführungszeichen und was sie wohl bedeuten könnten nichts anfangen können.

Wer sagt dir denn, dass der Fragende und alle mit ähnlichem Problem überhaupt etwas mit Vererbung anfangen kann?

Float und Clear hingegen sind nicht vererbbar.

Ich dachte, es sein klar, dass es keine 'echte' Vererbung ist!

das die li's der zweiten Ebene ein Clear bekommen sollen habe ich nicht geschrieben. Lies doch noch mal genau:

ul.level_2 li bezieht sich auf ...

das jeweils nach der ul.level_2 folgende li

... wo ist denn da dein Problem?

Meine Lösung hab ich mit Firebug erfolgreich getestet ...

Ich auch - gibt man dem verdeckten level_1 li ein clear:both, wird er sichtbar!

Ich bin sehr dankbar, wenn mich jemand auch einen Fehler aufmerksam macht, aber es sollte auch Sinn haben.

SCNR

Du hast Recht - hier geht es ums Helfen.
Es gibt immer mehrer Lösungen - bizon hat eine Lösung gefunden - Danke dafür.

Ich möchte mich hier nicht weiter streiten (was ich auch nie wollte).
Falls du weiter diskutieren möchtest, dann bitte nicht hier, sondern per Mail - Danke.

Viele Grüße
Thoni

[bluuba]

Hi an alle,

was ist denn hier los? Es ist das erste Mal, dass ich in diesem Forum erlebe, dass richtig gefightet wird.

Ich habe den Thread von bluuba gestern gelesen und wollte eigentlich schnell antworten, weil ich meinte, dass ul.level_1 ein width braucht. Da aber bereits heftig diskutiert wurde, wollte ich sicher gehen und hab das Menü nachgebaut - siehe Anhang.

In meiner Lösung wird kein clear:both gebraucht.
Alle li bzw. a haben float:left.
.level_1 bekommt ein width:94px, so dass der float hier einen Zeilenumbruch bewirkt

.main_nav {
	margin:0 0 0 160px;
	padding:20px 0 0 0;
	width: auto;
}
.main_nav .level_1 {width:94px;}

.main_nav ul li a,
.main_nav .active span {
background: #b20000;
color: #fff;
display: block;
height: 94px;
line-height: 94px;
width: 94px;
padding-left: 10px;
text-decoration: none;
/*text-indent:-9999em;*/
}

.main_nav .active span {
background: #888;
}

.main_nav ul li ul li a,
.main_nav ul li.trail a{
background: #600000;
}

.main_nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.main_nav ul li {
margin:0 0 5px 0;
float: left;
position: relative;
}

.main_nav ul li ul li{
margin:0 0 0 5px;
}

.main_nav ul li ul {
display: none;
}

.main_nav ul li.active ul,
.main_nav ul li.trail ul {
background:#ddd;
display: block;
left: 104px;
position: absolute;
top: 0;
width:350px;
}

.main_nav ul li:hover ul li {
float: left;
}

.main_nav ul li:hover ul li a {
background: #600000;
color: #fff;
display: block;
float: left;
width: 94px;
}

.main_nav ul li a:hover,
.main_nav ul li ul li a:hover {
background: #BBBB99;
color: #000;
}

Evtl. kann man den Code an der einen oder anderen Stelle noch bereinigen, das hab ich mir erspart. Tatsache ist aber, dass es funktioniert im:

Firefox 4
Opera 11
Chrome 11
sogar im IE6 (andere IEs habe ich grad nicht zur Verfügung)

hab diese nun erflogreich mit firebug getestet .. -> funktioniert .. werde das kommende woche auf meine website übernehmen .. danke nochmal an alle die mir geholfen haben

mfg