nav Element nimmt keinen Platz ein
0 0 0 0 Clear am Ende eines Elements?
0 
molily
0 0 0 0 Radio Eriwan
0 molily
nav Element nimmt keinen Platz ein
Hallo,
habe meine Linkleiste mit drei Ebenen in ein nav Element gepackt.
Bei Zuordnung einer Hintergrundfarbe wird sichtbar, dass das nav Element die Links nicht umspannt, es nimmt lediglich den Platz ein, der durch padding definiert ist (Firefox, Opera).
Es wird auch nicht besser, wenn ich audrücklich display:block angebe:
nav {
display:block;
/*height:1.3em;*/
background-color:#a00;
margin:0 0 0.5em 0;
padding:5px;
border-radius:8px;
}
Mit height:1.3em; kann ich dem nav zwar höhe geben, aber bei sehr schmalem Viewport laufen die Links unten raus.
"Global Attributes
The <nav> tag also supports the Global Attributes in HTML.
Event Attributes
The <nav> tag also supports the Event Attributes in HTML."
Wie kann ich nav beibringen, dass es einen Text umspannt?
Gruß, Chorus
-
Meine Herren,
Bei Zuordnung einer Hintergrundfarbe wird sichtbar, dass das nav Element die Links nicht umspannt
Klingt danach, als seien die inneren Elemente (die Linkliste) aus dem Fluss genommen (z.B:
position: absolute).Falls es das nicht aus, hast du einen Link oder ein Onlinebeispiel, an dem wir das Verhalten nachvollziehen können?
-
Hi,
Bei Zuordnung einer Hintergrundfarbe wird sichtbar, dass das nav Element die Links nicht umspannt
Sind die vielleicht gefloatet? Dann spannen sie das Elternelement nicht mehr per Default auf.
Lösungsansätze dazu findest du hier: http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/?bl_action=show&bl_uri=css-spaltenlayout#float-einschliessen
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Hallo,
habe meine Linkleiste mit drei Ebenen in ein nav Element gepackt.
Bei Zuordnung einer Hintergrundfarbe wird sichtbar, dass das nav Element die Links nicht umspannt,
also stellt sich die Frage, wie du die Links formatiert hast? ;-)
Vermutlich hast du sie gefloatet, weshalb sie einen eigenen "Block formatting context" bilden.Es wäre aber am hilfreichsten, wenn du mal den gesamten Quelltext deines Nav-Elements, samt zugehörigem CSS-Code posten würdest.
Gruß Gunther
-
Hallo Gunther,
Vermutlich hast du sie gefloatet, weshalb sie einen eigenen "Block formatting context" bilden.
Joop, und danach ein clear vergessen.
Dann ergibt sich aber die Frage, wie ich das mit CSS lösen kann, ein clear-Element ist ja HTML.
Gibt es inzwischen sowas wie clear:both_at_end am Ende eines Elements?
Es wäre aber am hilfreichsten, wenn du mal den gesamten Quelltext deines Nav-Elements, samt zugehörigem CSS-Code posten würdest.
Habe doch die URL angegeben.
Gruß, Chorus
-
Gibt es inzwischen sowas wie clear:both_at_end am Ende eines Elements?
Das nennt sich Clearfix.
Mathias
-
Hallo Chorus,
Vermutlich hast du sie gefloatet, weshalb sie einen eigenen "Block formatting context" bilden.
Joop, und danach ein clear vergessen.
Du brauchst das clearende Element nicht (jedenfalls nicht für "moderne" Browser).
Ein 'overflow: hidden;' für das Elternelement, in diesem Fall das UL-Element, reicht aus.Dann ergibt sich aber die Frage, wie ich das mit CSS lösen kann, ein clear-Element ist ja HTML.
Gibt es inzwischen sowas wie clear:both_at_end am Ende eines Elements?
Wenn du mal nach 'clearing floats' googelst, wirst du verschiedene Varianten dazu finden.
Ein Blick ist auch das HTML5 Boilerplate wert.
Es wäre aber am hilfreichsten, wenn du mal den gesamten Quelltext deines Nav-Elements, samt zugehörigem CSS-Code posten würdest.
Habe doch die URL angegeben.
Upps! Sorry, nicht darauf geachtet - das ist natürlich noch besser ...! :-)
Gruß Gunther
-
Hallo Gunther,
Du brauchst das clearende Element nicht (jedenfalls nicht für "moderne" Browser).
Ein 'overflow: hidden;' für das Elternelement, in diesem Fall das UL-Element, reicht aus.Mit Radio Eriwan: Im Prinzip ja, aber die Links der zweiten und dritten Ebene sind dann versteckt.
Also, mit overflow ein clear zu erzwingen scheint mir nicht sauber zu sein.
Gruß, Chorus
-
Hallo!
Du brauchst das clearende Element nicht (jedenfalls nicht für "moderne" Browser).
Ein 'overflow: hidden;' für das Elternelement, in diesem Fall das UL-Element, reicht aus.Mit Radio Eriwan: Im Prinzip ja, aber die Links der zweiten und dritten Ebene sind dann versteckt.
Das ist ein "Handicap" - zugegeben. ;-)
Wobei du bspw. auch ein 'min-height: XYem;' für das UL-Element verwenden könntest (solange es einzeilig bleibt).Also, mit overflow ein clear zu erzwingen scheint mir nicht sauber zu sein.
Und ich mag die Float-Variante nicht ...! ;-)
Erst recht nicht, wenn das Menü "umbricht", sprich mehrzeilig wird.Alternativen sind u.a. 'display: inline-block|table-cell' (für die LI-Elemente).
Wobei jede dieser Varianten wiederum ihre eigenen "Fallstricke" birgt.Es gibt halt zahlreiche Optionen - jede mit Vor- & Nachteilen.
Gruß Gunther
-
Hallo Chorus!
Mit Radio Eriwan: [...]
Leider kennt das heutzutage niemand mehr von der Facebook- und Spaßgeneration.
Mit lieben Grüßen
Melvin Cowznofski
--
What – me worry? -
Hallo,
Also, mit overflow ein clear zu erzwingen scheint mir nicht sauber zu sein.
Ist es auch nicht. Es hat gegenüber dem Standard-Clearfix (
:after { content: ''; clear: both }) verschiedene Nebenwirkungen. overflow: hidden löst einen Block Formatting Context aus, der *unter anderem* Floats einschließt, aber noch viele weitere Auswirkungen auf das Layouting hat. Zum Beispiel verhindert er überlappende Margins und das Überlappen mit Floats. Schließlich schneidet overflow: hidden Inhalte ab, die über die Boxdimensionen hinausgehen. Das betrifft auch box-shadow von verschachtelten Elementen.Leider gibt es keine Methode, die gänzlich ohne Nebenwirkungen ist.
Mathias
-
-
-
-