Nav-Bereich verweigert Hintergrundfarbe

barrios · #1 (**permalink**) 30.06.2011, 10:37

Liebe Community,

ich bin noch ein ziemlicher Webdesign-Newbie und versuche mich gerade an meinem ersten 2-Spalten-Layout. Seit kurzem verweigert meine Navileiste (#mainnav) den Farbwechsel und bleibt stur auf der in body definierten Farbe stehen. Für die Pros hier bestimmt ein Klacks, aber ich find den Fehler einfach nicht:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>footer gestalten</title> 
<style type="text/css" media="screen">
	html {
		height: 100.5%;/*Scrollbalken in alllen Browsern erzwingen*/
		font-size: 62.5%;/*Schriftgröße für alle Browser auf 10px setzen*/
	}
	body
	{
		margin: 0;
		padding: 0;
		font-family: Georgia, sans-serif;
		font-size: 1.6em;
		line-height:1.8em;
		text-align: center;/*Seitenränder zentrieren*/
		background-color: #D6D6D6;
	}
	* 
	{
	margin: 0px;
	padding: 0px;
	border: 0px;
	}/* Universalselektor: Browser-Stylesheets-Reset*/
	
	#container
	{
		margin: 1em auto;
		width: 760px;
		text-align: left;/*Zentrierung für Inhalte aufheben!*/
		border: 3px #fff;
	}
	
	#header
	{
		background-color: #000066;
		color: #fff;
		text-align: center;
	}
	
	#mainnav
	{
		background-color: #000066; /* <-- Wieso wird das ignoriert??? */
	}
	
	#mainnav a {color: #000066;}
	
	#mainnav ul {float:right;}
	
	#mainnav li 
	{
		display:inline;
		float:left;
		margin-right: 30px;
		list-style-type: none;
	}
	
	#wrap_contents 
	{
		clear:both;
		background-color: #000066;
	}
	#menu
	{
		float: right; 
		width: 180px;
		background-color: #000066;
		color: #fff;
	}
	
	#menu li {list-style-type: none;}
	
	#menu a {color: #fff;}
	
	#contents	
	{
		margin-right: 200px;
		margin-left: 0px;
		background-color: #ffffff;
	}
	
	#contents h1 {color: #000;}
	
	#contents hr
	{
		width: 80%;
		height: 3px;
		color: #cc0000;
		background-color: #cc0000;
	}
	
	#footer	
	{
		clear: both;
		background-color: #000066;
		color: #fff;
		text-align: center;
	}	
	#footer a {color: #fff;}
</style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Praxis f&uuml;r X &amp; Y</h1>
		<h2>Titel Name</h2>
		<h3>Ort</h3>
	</div><!-- #header -->
	<div id="mainnav">
		<ul>
			<li class="willkommen"><a href="#">Willkommen</a></li>
			<li class="angebot"><a href="#">Angebot</a></li>
			<li class="profil"><a href="#">Profil</a></li>
			<li class="infos"><a href="#">Infos</a></li>
			<li class="kontakt"><a href="#">Kontakt</a></li>
		</ul>
	</div><!-- #mainnav -->
	<div id="wrap_contents"> 
		<div id="menu">
			<ul>
				<li class="unterpunkt1"><a href="#">Unterpunkt 1</a></li>
				<li class="unterpunkt2"><a href="#">Unterpunkt 2</a></li>
				<li class="unterpunkt3"><a href="#">Unterpunkt 3</a></li>
			</ul>
		</div><!-- #menu -->
		<div id="contents">
			<h1>Herzlich Willkommen</h1>
			<hr />
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	
		</div><!-- #content -->
	</div><!-- #wrap_contents-->
	<div id="footer">
		<h3>Tel. 0551-123456
		<a href="mailto:name@email.de">eMail: Mailadresse</a></h3> 
	</div><!-- #footer -->
</div><!-- #container -->
</body>
</html>

Aptana Studio 3 meldet keine Beschwerden hinsichtlich der Standardkonformität. Vielen Dank schonmal vorab!

jnv · #2 (**permalink**) 30.06.2011, 10:47

Wenn du dem #mainnav eine Höhe gibts, dann hast du auch den Hintergrund.

HTML-Code:

#mainnav {
    background-color: #000066 ; /*  Wieso wird das ignoriert??? */
    height: 30px;
}

fricca · #3 (**permalink**) 30.06.2011, 10:51

#mainnav hat die Höhe Null, weil es die floatenden Inhalte nicht einschließt.
FAQ Punkt 2
14 Containing Floats: gefloatete Elemente einschließen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

barrios · #4 (**permalink**) 30.06.2011, 13:07

Wow, vielen Dank für die schnellen Antworten! Meine Herren, das mit dem floaten ist ja ne Wissenschaft für sich, da bleib ich doch lieber erstmal bei der fixen Höhe

.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dynamische Größen	Killhunter	CSS	0	14.05.2011 16:56
Problem mit 3 Navigationsebene im CSS-Menü im Internet Explorer	Chellisa	CSS	0	15.08.2008 10:28
Multi-Level Navigation mit Grafiken	koncrete	CSS	3	02.08.2008 02:28
Probleme beim ausrichten	Mojo83	CSS	4	25.06.2008 19:54
Css Pop-Up Menü rechts ausrichten im Internet Explorer	mbuse	CSS	0	11.09.2006 13:18