✔ Hintergrundfarbe von Wrapper lässt sich nicht mehr festlegen

Status
Nicht offen für weitere Antworten.
j cop

j cop

Erfahrenes Mitglied
Hallo,

ich bin gerade daran, eine neue Homepage zu bauen. Doch jetzt ist das erste Problem aufgetaucht. Die Hintergrundfarbe für den Wrapper wird von Opera(9.01 Build
8552) und Firefox 2 nicht angewandt. Im IE 7 sieht es so aus wie ich dachte das es sein müsste. Was muss ich da anders machen?

http://trodd.pytalhost.de/test/

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<title>test</title>
	<style>body {
	margin:0;
	padding:0;
	background:#bbb;
	color:#666;
	min-width:750px;
}
#wrap {
	background:#fff;
	margin:0 auto;
	width:750px;
}
#header {
	padding:20px;
	display:block;
	border:1px solid #bbb;
	margin:0 auto;
	width:710px;
	color:#555;
	background: #ffffff;
}
#main {
	float:right;;
	width:540px;
}
#main h2, #main h3, #main p {
	padding:0 10px;
}
#sidebar {
	float:left;
	width:200px;
	background:#ffffff;
}
#footer {
	clear:both;
	background: #ddd;
	margin:10px auto;
	width:750px;
}</style>
</head>
<body>
<h1 id="header">test and test again</h1>
<div id="wrap">
	<div id="sidebar">
		<h3>Column 2</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
		</ul>
	</div>
	<div id="main">
		<h3>TEST</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div id="footer">test
</div>
</body>
</html>
 
Entweder notierst du das DIV #footer mit der clear-Eigenschaft nach dem DIV #main, oder du übergibst die Eigenschaft an ein zusätzliches DIV an dieser Stelle:

Code: 
.clear {
        clear:both;
        font-size:1px;
}
#footer {
        background: #ddd;
        margin:10px auto;
        width:750px;
}
Code: 
<h1 id="header">test and test again</h1>
<div id="wrap">
        <div id="sidebar">
                <h3>Column 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                </ul>
        </div>
        <div id="main">
                <h3>TEST</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
        <div class="clear">&nbsp;</div>
</div>
<div id="footer">test</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück