Problem mit Hintergrund vom Sidebar!

Pumpkin · #1 (**permalink**) 31.03.2006, 15:55

Hallo,

bei meinem neuen Projekt (BMWzilla.de) habe ich ein kleines Problem mit dem Sidebar. Unterhalb den Links bleibt der Bereich weiss wie der Hintergrund aus BODY.

Ich hatte versucht unter WRAP den Hintergrund dem Sidebar anzupassen, doch es passierte gar nichts.

CSS

Code:

* {
	margin:0;
	padding:0;
}

body {
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:0.7em;
	color:#fff;
	background:#fff url(../design/bg.gif) repeat-x;
}

#wrap {
	margin:auto;
	width:717px;
	min-height:100%;
	text-align:left;
}

#images {
	margin:0;
	padding:0;
}

img {
	border:0;
}

a:link, a:visited, a:active, a:hover {
	text-decoration:none;
	font-size:10px;
	color:#fff;
}

a:hover {
	color:#fff;
}

.logo {
	display:block;
	padding:0 2px 0 0;
	width:713px;
	height:71px;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#2c2c2c url(../design/logo.gif);
	clear:both;
}

.logo img {
	display:block;
}

.top_left, .top_right {
	float:left;
	height:11px;
	width:6px;
}

.top_left {
	background:#2c2c2c url(../design/top_left.gif) no-repeat;
}

.top_middle {
	float:left;
	height:11px;
	width:705px;
	background:#2c2c2c url(../design/top_middle.gif) repeat-x;
}

.top_right {
	background:#2c2c2c url(../design/top_right.gif) no-repeat;
}

#navi ul {
	float:left;
	list-style:none;
	height:27px;
	width:699px;
	background:#2c2c2c url(../design/button_back.gif) repeat-x;
}

#navi ul li, #header ul li {
	display:inline;
	float:left;
	height:17px;
	width:60px;
	padding-top:2px;
	font-weight:bold;
}

#navi ul li a {
	float:left;
	text-align:center;
}

.button_left, .button_right {
	height:27px;
	width:8px;
}

.button_left {
	float:left;
	border-left:1px solid #000;
	background:#2c2c2c url(../design/button_left.gif) no-repeat;
}

.button_right {
	float:right;
	border-right:1px solid #000;
	background:#2c2c2c url(../design/button_right.gif) no-repeat;
}

#sidebar {
	float:left;
	width:154px;
	border-left:1px solid #000;
	background:#2c2c2c;
}

.title {
	font-size:9px;
	padding:2px;
	font-weight:bold;
	color:#fff;
	height:27px;
	width:100px;
	background:#2c2c2c url(../design/button_back.gif) repeat-x;
}

.menue {
	margin:20px 0;
}

.menue ul {
	list-style: none;
	color:#fff;
	font-family:verdana, arial, helvetica, sans-serif;
}

.menue ul li {
	display:block;
	padding:0 0 0 5px;
}

.menue ul li a {
	color:#fff;
	font-size:12px;
	text-align:center;
}

.menue ul li a:hover {
	color:#000;
}

#w3c {
	padding:10px;
}

#w3c a:link, a:visited, a:active, a:hover {
	color:#fff;
	font-size:10px;
}

.w3c {
	color:#c00;
	padding-bottom:5px;
}

#content {
	float:right;
	width:540px;
	text-align:justify;
	padding:0px 10px;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#2c2c2c;
}

#content p {
	margin-bottom:1.5em;
}

.footer {
	float:left;
	height:27px;
	width:705px;
	background:#000 url(../design/bottom_middle.gif) repeat-x;
}

.copy {
	float:right;
	font-size:9px;
	padding:2px;
}

.bottom_left, .bottom_right {
	float:left;
	height:27px;
	width:6px;
}

.bottom_left {
	background:#2c2c2c url(../design/bottom_left.gif) no-repeat;
	clear:both;
}

.bottom_right {
	background:#2c2c2c url(../design/bottom_right.gif) no-repeat;
}

.h1 {
	font-size:1.8em;
}

.h2 {
	font-size:1.2em;
	padding-bottom:15px;
}

.center {
	text-align:center;
}

HTML

Code:

<body>
	<div id="wrap">
		<p class="top_left"></p>
		<p class="top_middle"></p>
		<p class="top_right"></p>
		
		<p class="button_left"></p>
	<div id="navi">
		<ul class="navlist">
				[*]Home
				[*]Communitys
				[*]
				[*]
				[*]
				[*]
				[*]Impressum
		[/list]</div> 
		<p class="button_right"></p>
		<div id="sidebar">
		<div class="menue">
		<p class="button_left"></p>
   		<p class="title">Menue 1</p>
			<ul class="menuelist">
				[*]Link
				[*]Link
				[*]Link
				[*]Link
				[*]Link
				[*]Link
			[/list]</div> 
		<div class="menue">
		<p class="button_left"></p>
		<p class="title">MENU 2</p>
			<ul class="menuelist">
				[*]Link
				[*]Link
				[*]Link
				[*]Link
				[*]Link
				[*]Link
			[/list]</div> 
		<div class="menue">
		<p class="button_left"></p>
		<p class="title">MENU 3</p>
			<ul class="menuelist">
				[*]Link
				[*]Link
				[*]Link
				[*]Link
				[*]Link
				[*]Link
			[/list]</div> 
		<div id="w3c">
		<p class="w3c">Letzte Änderung: 10.02.2006</p>
		

XHTML 1.0 Strict</p>
		CSS 2.1	</div>  </div> 
		<div id="content">
			<h1 class="h1">BMWzilla.de</h1>
			<h2 class="h2">Die Coupe Fanpage!</h2>

			

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In posuere urna id erat. Sed id dolor nec purus bibendum sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vestibulum, quam et consectetuer ornare, ante elit lobortis nisl, vel ullamcorper dui sem in augue. Nunc non ligula. Maecenas lacinia nunc sed purus. Etiam rutrum elementum lacus. Nam id risus eget orci bibendum aliquam. Proin vehicula dui ut mauris fringilla ultrices. Proin tempor. Sed neque. Vestibulum in diam. Sed at ante ac magna volutpat imperdiet. Sed auctor urna sit amet lectus. Sed quis quam sed nulla molestie ornare. Sed a pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam venenatis laoreet orci. Aliquam interdum tempus libero.</p>

		</div> 
	<div id="footer">
		<p class="bottom_left"></p>
		<p class="footer">Powered &amp; Designed by BMWzilla.de ©2006</p>
		<p class="bottom_right"></p></div>  </div> 
</body>

kippe · #2 (**permalink**) 31.03.2006, 17:36

Schau mal hier:

http://www.positioniseverything.net/...ut/equalheight

Ansonsten Stichwort "Faux Columns".

Im Englischen wandelt sich übrigens bei Wörtern mit der Endung "y" beim Plural das "y" in ein "ie", es muss also "Communities" heißen.

Pumpkin · #3 (**permalink**) 01.04.2006, 04:14

Danke für den Link aber wie du ja schon selber gemerkt hast, ist mein englisch unter aller s..!

Was ich mich überhaupt frage ist, warum kann ich WRAP keinen Hintergrund geben? Denn dann wäre dies Problem doch gar nicht gegeben!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29
Div Orientierung	Leonidus	CSS	22	30.05.2007 17:05
hintergrund problem bei ie	TimeRaider	CSS	5	22.03.2006 21:29
Hintergrund Problem	Pseudo	CSS	3	30.12.2005 12:49
Problem mit Hintergrund	fabiO	CSS	8	24.04.2005 20:15