Liste wird trotz float:left im li nicht horizontal

img · #1 (**permalink**) 14.07.2010, 18:34

Hallo miteinander,

ich weiß nicht was genau nicht stimmt, aber mein Submenü weigert sich strikt horizontal zu sein.

HTML-Code:

<div id="main_nav">
	<div class="moduletable_main_nav">
		<ul class="menu">
			<li class="parent active item2">
				<a href="#"><span>Die Sendung</span></a>
					<ul>
						<li id="current" class="active item48"><a href="#"><span>Informationen zur Sendereihe</span></a></li>
						<li class="item49"><a href="#"><span>Sendungsvorschau</span></a></li>
						<li class="item50"><a href="#"><span>Sendungsarchiv</span></a></li>
					</ul>
			</li>
			<li class="item3"><a href="#"><span>Link2</span></a></li>
			<li class="item4"><a href="#"><span>Link3</span></a></li>
			<li class="item5"><a href="#"><span>Link4</span></a></li>
		</ul>
	</div>
</div>

Und das dazugehörige CSS:

Code:

#main_nav {
	float:right;
	margin-top:59px;
	}

	
#main_nav .menu {
	margin:0px;
	list-style: none;
	}

#main_nav .menu li{
	float:left;
	position: relative;
	width:9em;
	}

#main_nav .menu #current {
	background: url(../images/navi_head_active.jpg	);
 	background-repeat:no-repeat;
	background-position:bottom center;
	font-weight:normal;
	}

#main_nav .menu a {
	display:block;
	text-align:center;
	padding: 1em;
	color:#ffffff;
	text-decoration:none;
	text-transform: uppercase;
	font-size:11px;
	background: url(../images/bg_navi_head.jpg);
 	background-repeat:no-repeat;
	background-position:right;
	}
	
#main_nav .menu a:hover {	
	color:#dedede;
	}
	
/*SUB NAVIGATION */		
#main_nav .menu ul{ /* Submenü ausblenden */
	position:absolute;
	right: -9999em;
	background:#ffffff;
	list-style: none;
	}
	
#main_nav .menu ul li{
	float:left;
	width:5em;
	}
	
#main_nav .menu ul li a{	
	display:block;
	color:#333027;
	text-transform:none;
	height:15px;
	padding:0.5em;
	margin:0px;
	}
	
#main_nav .menu ul a {
	color:#333027;
	text-transform:none;
	padding-left: 30px;
	height:31px;
	}

#main_nav .menu ul #current{
	background:#ffffff;
	font-weight:bold;
	}
	
#main_nav .menu li:hover ul{ /* Submenü einblenden */
	right:0;
	}

Das float:left ist im li drin, womit hängt es denn zusammen das es nicht geht bzw. wo liegt der Fehler?!

Wenn ich dem Submenü z.B. eine feste Breite von 600px angebe, dann funktioniert es. Ohne Breite oder mit width:auto funktioniert es leider nicht. Eine feste Breite hilft mir hier aber auch nicht weiter, da nicht alle Submenüs gleich viele Unterpunkte haben

Wäre spitze wenn mir jemand weiterhelfen könnte.

Viele Grüße,
Jan

NACHTRAG:

Hier das testcase
http://janschuhmacher.info/temp/testcase/

jnv · #2 (**permalink**) 14.07.2010, 20:53

.menu li {display: inline;}

heiko_rs · #3 (**permalink**) 14.07.2010, 21:13

Das ist überflüssig, da li floatet.

img, Dein Schnipsel ist ziemlich unbrauchbar. Man muss erst body eine bg-Farbe geben, damit man mehr sieht als einen weißen Bildschirm.

Deine Sub-Navi wird ohne width erstmal so breit, wie es die li der Haupt-Navi mit ihren 9em zulassen.

Und blende nicht nach rechts aus, sondern nach links, andernfalls hast Du einen horiz. Scrollbalken.

img · #4 (**permalink**) 14.07.2010, 23:35

Zitat:

Zitat von heiko_rs

Das ist überflüssig, da li floatet.

img, Dein Schnipsel ist ziemlich unbrauchbar. Man muss erst body eine bg-Farbe geben, damit man mehr sieht als einen weißen Bildschirm.

Deine Sub-Navi wird ohne width erstmal so breit, wie es die li der Haupt-Navi mit ihren 9em zulassen.

Und blende nicht nach rechts aus, sondern nach links, andernfalls hast Du einen horiz. Scrollbalken.

Hi,

der body hat ne Hintergrundfarbe, das Menü sieht farblich (grob) so aus wie es soll auf dem Screenshot

Wenn ich dich jetzt nicht falsch verstanden habe?

Ja das mit den 9em ist mir bereits aufgefallen, ich weiß jedoch nicht wie ich das umgehen kann, width:auto geht zum Beispiel nicht. Eine andere Idee hatte ich diesbezüglich leider noch nicht.

Zum ausblenden nach rechts: habe das "-" bei weggemacht, jetzt heißt es right: 9999em, der scrollbalken ist damit auch wieder weg, danke für den Hinweis.

Mein Problem ist also noch immer das Submenü bzw die vererbte breite von 9em

Hier nochmal der gesamte CSS-Code, vielleicht hilft es:

HTML-Code:

* {
margin:0;
padding:0;
}
html, body, p, ul, h1, h2 {
color:#3D3833;
font-family:Arial,Sans-serif;
font-size:12px;
}
html {
height:100%;
}
body {
background:none repeat scroll 0 0 #EAE9E6;
height:100%;
min-height:100%;
}
* html body {
height:100%;
}
.clear {
clear:both;
}
#header {
background:url("../images/bg_header.jpg") repeat-x scroll 0 0 #FFFFFF;
height:124px;
width:100%;
}
.pollerOption input {
clear:both;
float:left;
}
.pollerOption label {
float:left;
margin-left:0.6em;
margin-top:2px;
width:10em;
}
#content_header {
margin:auto;
width:960px;
}
#suche {
float:right;
height:30px;
margin-top:15px;
}
#suche input {
background:url("../images/bg_search_input.jpg") repeat-x scroll 0 0 transparent;
color:#EFEFEF;
height:19px;
padding-left:5px;
width:130px;
}
#general_nav {
background:url("../images/bg_general.jpg") repeat-x scroll 0 0 transparent;
float:right;
height:25px;
}
#general_nav .menu {
list-style:none outside none;
margin:0;
}
#general_nav .menu li {
float:left;
}
#general_nav .menu a {
background:url("../images/bg_navi_general.jpg") no-repeat scroll left center transparent;
color:#FFFFFF;
display:block;
font-size:10px;
height:20px;
padding:5px 10px 0;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#general_nav .menu .item52 a {
background:url("../images/bg_navi_general_left.gif") no-repeat scroll left center transparent;
}
#general_nav .menu .item55 a {
background:url("../images/bg_navi_general_right.gif") no-repeat scroll right center transparent;
}
#main_nav {
float:right;
margin-top:59px;
}
#main_nav .menu {
list-style:none outside none;
margin:0;
}
#main_nav .menu li {
float:left;
width:9em;
}
#main_nav .menu #current {
background:url("../images/navi_head_active.jpg") no-repeat scroll center bottom transparent;
font-weight:normal;
}
#main_nav .menu a {
background:url("../images/bg_navi_head.jpg") no-repeat scroll right center transparent;
color:#FFFFFF;
display:block;
font-size:11px;
padding:1em;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#main_nav .menu a:hover {
color:#DEDEDE;
}
#main_nav .menu li {
position:relative;
}
#main_nav .menu ul {
background:none repeat scroll 0 0 #FFFFFF;
list-style:none outside none;
position:absolute;
right:9999px;
}
#main_nav .menu li:hover ul {
right:0;
}
#main_nav .menu ul li {
float:left;
width:10em;
}
#main_nav .menu ul li a {
color:#333027;
display:block;
height:11px;
margin:0;
padding:0;
text-transform:none;
width:auto;
}
#main_nav .menu ul a {
color:#333027;
height:31px;
padding-left:30px;
text-transform:none;
}
#main_nav .menu ul #current {
background:none repeat scroll 0 0 #FFFFFF;
font-weight:bold;
}
#wrapper {
background:none repeat scroll 0 0 #F8F8F8;
margin:auto;
width:960px;
}
#media {
background:url("../images/bg_media.jpg") no-repeat scroll center bottom #FFFFFF;
border-top:1px solid #4A6A75;
margin-top:50px;
padding-bottom:15px;
width:100%;
}
#media .right {
float:right;
}
#media .left {
float:left;
}
#left {
float:left;
padding-bottom:20px;
width:205px;
}
.moduletable_sendung, .moduletable_zeitzeugen, .moduletable_interaktiv, .moduletable_interaktiv3_3 {
background:url("../images/bg_sidebar_bottom.jpg") no-repeat scroll center bottom #FFFFFF;
margin:auto auto 30px;
width:190px;
}
.moduletable_interaktiv1_3 {
background:none repeat scroll 0 0 #FFFFFF;
margin:auto;
width:190px;
}
.moduletable_umfrage {
margin:auto;
width:190px;
}
.moduletable_umfrage #mainContainer {
background:url("../images/bg_navi_content.jpg") no-repeat scroll center top #EAE9E6;
}
.moduletable_umfrage h4 {
font-size:12px;
}
.moduletable_umfrage .button {
margin-top:15px;
}
.moduletable_sendung h3, .moduletable_zeitzeugen h3, .moduletable_user h3, .moduletable_interaktiv h3, .moduletable_interaktiv1_3 h3 {
background:url("../images/bg_heading_left.jpg") no-repeat scroll center bottom #FFFFFF;
border-bottom:2px solid #EAE9E6;
color:#FFFFFF;
font-size:14px;
height:21px;
margin:0;
padding:13px 0 0 8px;
width:182px;
}
.moduletable_sendung ul, .moduletable_zeitzeugen ul, .moduletable_interaktiv ul, .moduletable_interaktiv1_3 ul, .moduletable_interaktiv3_3 ul {
list-style:none outside none;
margin:0;
width:190px;
}
.moduletable_sendung li, .moduletable_zeitzeugen li, .moduletable_interaktiv li, .moduletable_interaktiv1_3 li, .moduletable_interaktiv3_3 li {
display:inline;
}
.moduletable_sendung ul a, .moduletable_zeitzeugen ul a, .moduletable_interaktiv ul a, .moduletable_interaktiv3_3 ul a {
border-bottom:1px solid #EAE9E6;
color:#333027;
display:block;
padding:7px 0 6px 0;
text-decoration:none;
}
.moduletable_interaktiv1_3 ul a {
color:#333027;
display:block;
padding:7px 0 6px 0;
text-decoration:none;
}
.moduletable_sendung ul a:hover, .moduletable_zeitzeugen ul a:hover, .moduletable_interaktiv ul a:hover, .moduletable_interaktiv1_3 ul a:hover, .moduletable_interaktiv3_3 ul a:hover {
background:none repeat scroll 0 0 #E6EDEF;
}
.moduletable_sendung ul a span, .moduletable_zeitzeugen ul a span, .moduletable_interaktiv ul a span, .moduletable_interaktiv1_3 ul a span, .moduletable_interaktiv3_3 ul a span {
margin-left:15px;
}
.moduletable_sendung ul li ul {
background:url("../images/bg_navi_content.jpg") no-repeat scroll center top #EAE9E6;
padding:8px 0 0;
}
.moduletable_sendung ul li ul a {
border:0 none;
font-size:11px;
height:20px;
padding:0 0 0 10px;
}
.moduletabletime {
margin:auto;
width:190px;
}
.moduletabletime h3 {
background:url("../images/bg_heading_left.jpg") no-repeat scroll center bottom #FFFFFF;
border-bottom:2px solid #EAE9E6;
color:#FFFFFF;
font-size:14px;
height:21px;
margin:0;
padding:13px 0 0 8px;
width:182px;
}
.moduletabletime div {
background:url("../images/bg_sidebar_bottom.jpg") no-repeat scroll center bottom #FFFFFF;
color:#333027;
padding:8px 2px 15px 8px;
}
.moduletable_user {
float:right;
margin-right:7px;
}
#mod_loginform_user {
background:url("../images/bg_sidebar_bottom.jpg") no-repeat scroll center bottom #FFFFFF;
padding:10px;
width:170px;
}
input {
background:none repeat scroll 0 0 #DCE0E2;
border:0 none;
height:22px;
}
.button_user, .button {
background:none repeat scroll 0 0 #50666C;
color:#FFFFFF;
font-size:10px;
height:18px;
margin-left:5px;
}
#content {
float:left;
width:550px;
}
#current a {
background:none repeat scroll 0 0 #E6EDEF;
}
.moduletable_breadcrumb {
margin:auto;
width:510px;
}
#social_buttons {
background:none repeat scroll 0 0 #FFFFFF;
border-right:1px solid #F0F0EE;
border-top:5px solid #F0F0EE;
margin:auto;
padding:20px 0 20px 20px;
width:490px;
}
#social_buttons p {
font-weight:bold;
margin:0 0 12px;
}
.moduletable_fb_like {
background:url("../images/bg_shadow_content.jpg") no-repeat scroll center bottom #FFFFFF;
border-right:1px solid #F0F0EE;
border-top:1px solid #F0F0EE;
height:50px;
margin:auto auto 20px;
padding:20px 0 30px 20px;
width:490px;
}
.moduletable_fb_like h3 {
color:#3D3833;
font-size:12px;
font-weight:bold;
}
.voting {
background:none repeat scroll 0 0 #FFFFFF;
height:60px;
margin:0;
padding:20px 0 0;
}
.content_rating, .content_vote {
padding-left:20px;
}
#jc {
background:url("../images/bg_shadow_content.jpg") no-repeat scroll center bottom #FFFFFF;
border-top:20px solid #F8F8F8;
margin-bottom:20px;
}
#jc h4 {
border-bottom:0 none;
border-top:4px solid #F0F0EE;
height:30px;
padding:10px 0 0 10px;
}
#comments-footer {
display:none;
}
#comments-list .rbox {
border-bottom:1px solid #F8F8F8;
padding:0 0 0 20px;
}
#comments-form input, #comments-form textarea, #comments-form input:active {
background:url("../images/bg_input_kommentar.jpg") no-repeat scroll 0 0 #799197;
border:0 none;
color:#FFFFFF;
width:163px;
}
#comments-form textarea, #comments-form textarea:active {
background:url("../images/bg_input_kommentar_gross.jpg") no-repeat scroll right top #799197;
width:220px;
}
#comments-form {
padding-bottom:15px;
}
#comments-form .grippie {
display:none;
}
#comments-form input {
height:25px;
}
#page a {
text-decoration:none;
}
#content a:hover {
text-decoration:underline;
}
#page .buttonheading {
display:none;
}
#page h1, #page h2 {
background:url("../images/bg_heading_startseite_artikel.jpg") no-repeat scroll 0 0 transparent;
color:#FFFFFF;
font-family:Verdana,Sans-serif;
font-size:14px;
height:26px;
margin:0;
padding:8px 0 0 10px;
}
#page .last_row {
background:url("../images/bg_shadow_content_beitrag.jpg") no-repeat scroll center bottom #F0F0EE;
margin:0;
padding-bottom:20px;
}
#page, .cb_template_default {
background:none repeat scroll 0 0 #F0F0EE;
margin:auto;
width:510px;
}
#page p {
padding:0 10px;
}
.blog {
margin:auto;
width:510px;
}
.blog .article_row {
background:none repeat scroll 0 0 #F0F0EE;
margin-bottom:30px;
padding-bottom:10px;
}
.blog .article_row .jcomments-links {
margin-left:10px;
}
.blog div h2 {
background:url("../images/bg_heading_startseite_artikel.jpg") no-repeat scroll 0 0 transparent;
color:#FFFFFF;
font-family:Verdana,Sans-serif;
font-size:14px;
height:26px;
margin:0;
padding:8px 0 0 10px;
}
.blog img, #page img {
float:left;
margin:0 15px 2px 0;
}
.jcomments-links a {
color:#3D3833;
text-decoration:none;
}
.contentpagetitle {
color:#FFFFFF;
text-decoration:none;
}
.contentpagetitle:hover {
color:#FFFFFF;
text-decoration:underline;
}
.article_separator, .row_separator {
display:none;
}
#right {
float:right;
width:205px;
}
#clear {
clear:both;
}
#footer {
background:none repeat scroll 0 0 #DDDDDD;
}

Grüße Jan

heiko_rs · #5 (**permalink**) 14.07.2010, 23:52

Zitat:

Zitat von img

der body hat ne Hintergrundfarbe

Dann baue Deinen urspr. geposteten Schnipsel mal zusammen - weißer Bildschirm. Zusammenbasteln ist schon nervig genug (weshalb ich es auch fast nie tue), und wenn man dann auch noch Regeln ergänzen muss, nervt es nur noch.

Zitat:

Zitat von img

Ja das mit den 9em ist mir bereits aufgefallen, ich weiß jedoch nicht wie ich das umgehen kann, width:auto geht zum Beispiel nicht.

Natürlich, denn auto ist Initialwert und daher gleichbedeutend mit komplett fehlender width-Dekl. - und genau das ist das Problem, wie ich bereits schrieb. Gib der Subnavi also eine Breite in px oder em.

img · #6 (**permalink**) 15.07.2010, 07:43

Zitat:

Zitat von heiko_rs

Dann baue Deinen urspr. geposteten Schnipsel mal zusammen - weißer Bildschirm. Zusammenbasteln ist schon nervig genug (weshalb ich es auch fast nie tue), und wenn man dann auch noch Regeln ergänzen muss, nervt es nur noch.

Natürlich, denn auto ist Initialwert und daher gleichbedeutend mit komplett fehlender width-Dekl. - und genau das ist das Problem, wie ich bereits schrieb. Gib der Subnavi also eine Breite in px oder em.

ok jetzt weiß ich was du mit weißen BG meinst, ist natürlich was dran

Hab ne alternative: Dem Submenü ne feste Breite zu geben is unpraksich in dem Falle, da die Submenüs unterschiedlich Breit sind, und wenn ich ne feste Breite hab gehts auch nicht mit dem Textzoom nicht, dann würde es ja wieder umbrechen.

Aber ich hab mir überlegt, warum nicht einfach die 9em im Hauptmenü rausnehmen und die Breite des Links stattdessen mit padding erzeugen? Dann wird die Breite auch nicht vererbt und ich hab das Problem nicht.
Weiß nicht obs klappt, kanns erst heute Nachmittag testen. Melde mich dann nochmals.

Grüße Jan

img · #7 (**permalink**) 15.07.2010, 15:40

So, also ich habs eben getestet, ohne Erfolg. Auch wenn die li des Hauptmenüs keine Breite haben ist das Submenü untereinander, trotz des floats für die sub-li.

Ich habe auch ein Testcase gebaut, vielleicht hilft das weiter:
Testcase Submenü

Grüße Jan

fricca · #8 (**permalink**) 15.07.2010, 15:59

Wenn Floats keinen Platz nebeneinander haben, stehen sie untereinander. Und bei dir haben sie keinen Platz, wie Heiko bereits erläutert hat.

Ich sehe keine zwingende Notwendigkeit für float in der Subnavigation. Wie bereits weiter oben vorgeschlagen, wäre display:inline eine Möglichkeit (ohne Float!). Dann kann man die white-space-Eigenschaft verwenden, um den Umbruch zu verhindern.
Und dann gibt's da auch noch inline-block.

heiko_rs · #9 (**permalink**) 15.07.2010, 16:08

Für unbekannte Breiten ohne Umbruch ebenfalls möglich: CSS-Tabelle wie in FAQ 13.

img · #10 (**permalink**) 15.07.2010, 16:14

Zitat:

Zitat von fricca

Wenn Floats keinen Platz nebeneinander haben, stehen sie untereinander. Und bei dir haben sie keinen Platz, wie Heiko bereits erläutert hat.

Ich sehe keine zwingende Notwendigkeit für float in der Subnavigation. Wie bereits weiter oben vorgeschlagen, wäre display:inline eine Möglichkeit (ohne Float!). Dann kann man die white-space-Eigenschaft verwenden, um den Umbruch zu verhindern.
Und dann gibt's da auch noch inline-block.

OK danke für die Tips. Warum haben sie in meinem Fall keinen Platz, weder das übergeordnete Menü hat eine Breite noch das Submenü? Oder woher kommt der "Platzmangel", rein fürs Verständnis?

Werde die aufgeführten Varianten versuchen und schauen mit welcher ich am ehesten zum Erfolg komme.

Grüße Jan

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren	Alien	CSS	17	20.03.2011 10:23
Wordpress: Content im Quelltext VOR allem anderen, aber wie?	Bichareh	CSS	4	13.06.2009 16:15
Problem mit Float bei der Navigation	Julez84	CSS	1	09.08.2007 11:08
Liste trotz float:left; mittig im Layer ausrichten?	Nightuser	CSS	18	06.06.2007 10:53
Liste (inline) Umbruch erzeugen	Steakfred	CSS	3	09.05.2006 12:27