SELFHTML Forum
SELFHTML Forumsarchiv
2008
Oktober
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Susanne07, 30. 10. 2008, 17:41
Hi
ich bin dabei, eine Website zu entwerfen und habe ein Problem mit der Darstellung der Navigation im IE 7 unter Windows XP.
Wenn ich die Seite verkleinere, verschwinden meine Menüunterpunkte hinter dem Text. Die Navigation ist mit overflow:visible ausgezeichnet, hat eine Breiten- und Höhenangabe, das Dokument und CSS sind validiert.
Der Aufbau der Seite ist:
<div id="head">
<div id="navi">
<div id ="text">
CSS:
* {
margin : 0;
padding : 0;
}
body {
font-size : 100.01%;
font-family : Tahoma, sans-serif, Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-weight : normal;
text-decoration : none;
text-align : center;
padding : 1em 2em;
width : 100%;
height : 100%;
}
#head, #navi, #text {
text-align : left;
margin-right : auto;
margin-left : auto;
width : 80%;
}
#navi {
overflow : visible;
min-height : 1em;
}
#navi ul {
list-style-type : none;
margin-left : 8em;
height : 2.5em;
}
#navi li, #navi li a {
line-height : 1.2em;
display : inline;
float : left;
}
Anzusehen ist das Ganze unter:
http://www.dorettehugo.de/dsb/index.html
Kann mir jemand von euch weiterhelfen? Ich finde den Fehler nicht.
Gruß, Susanne
Die folgende Nachricht zum Thema stammt von: molily, 30. 10. 2008, 19:02
»» Wenn ich die Seite verkleinere, verschwinden meine Menüunterpunkte hinter dem Text. Die Navigation ist mit overflow:visible ausgezeichnet
Gut, das ist der Standardwert.
»» hat eine Breiten- und Höhenangabe
Warum eine Höhenangabe? Ich hätte die Höhe dynamisch gelassen und stattdessen Abstände definiert.
»» #navi {
»» overflow : visible;
»» min-height : 1em;
»» }
Versuche hier mal das Gegenteil: overflow:hidden;
Das führt dazu, dass das Element so hoch ist, wie alle floatenden Boxen darin es erfordern - sprich, es werden alle float-Boxen eingeschlossen werden.
Hintergrund: overflow:hidden erzeugt einen Block Formatting Context bzw. ein Element mit hasLayout im IE. Diese Eigenschaften sind für den Effekt verantwortlich.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#internet-explorer
»» #navi li, #navi li a {
»» line-height : 1.2em;
»» display : inline;
»» float : left;
»» }
Hat es einen Grund, warum du beiden display:inline *und* float:left gibst?
Üblicherweise sind das zwei verschiedene Möglichkeiten für eine horizontale Navigation - entweder bekommen die lis display:inline, wodurch eine Darstellung in einer Zeile schon gegeben ist, oder sie bleiben auf display:list-item und man floatet sie. Die a-Elemente haben ohnehin display:inline und man gibt ihnen ab und zu höchstens display:block.
Mathias
--
JavaScript-Erweiterung für das SELFHTML-Forum
Die folgende Nachricht zum Thema stammt von: suit, 30. 10. 2008, 19:08
»» Hat es einen Grund, warum du beiden display:inline *und* float:left gibst?
»»
»» Üblicherweise sind das zwei verschiedene Möglichkeiten für eine horizontale Navigation - entweder bekommen die lis display:inline, wodurch eine Darstellung in einer Zeile schon gegeben ist, oder sie bleiben auf display:list-item und man floatet sie. Die a-Elemente haben ohnehin display:inline und man gibt ihnen ab und zu höchstens display:block.
zusätzlich kann man damit einen bug umgehen - das ist hier aber scheinbar nicht relevant
Die folgende Nachricht zum Thema stammt von: Susanne07, 31. 10. 2008, 08:21
Hi
»» zusätzlich kann man damit einen bug umgehen - das ist hier aber scheinbar nicht relevant
Deswegen habe ich es nicht gemacht, aber der Effekt ist erwünscht. Vielen Dank für deinen Hinweis.
Gruß, Susanne
Die folgende Nachricht zum Thema stammt von: Susanne07, 31. 10. 2008, 08:18
Hallo Mathias
»» Versuche hier mal das Gegenteil: overflow:hidden;
»» Das führt dazu, dass das Element so hoch ist, wie alle floatenden Boxen darin es erfordern - sprich, es werden alle float-Boxen eingeschlossen werden.
Vielen Dank, genau daran lag es.
»» Hintergrund: overflow:hidden erzeugt einen Block Formatting Context bzw. ein Element mit hasLayout im IE. Diese Eigenschaften sind für den Effekt verantwortlich.
»»
»» Hat es einen Grund, warum du beiden display:inline *und* float:left gibst?
»»
Ja, die Anleitung von Self HTML für den Aufbau einer horizontalen Navigation.
Bin ich froh, das es jetzt klappt.
Gruß, Susanne
© 1998-2008 
Impressum, Software: Classic Forum
(BROWSER)