Sidebarlänge dem Content anpassen?!

Pumpkin · #1 (**permalink**) 14.03.2006, 16:34

Hallo,

ich möchte das die beiden sidebars (orange) immer die selbe länge wie der content (grün) haben. Irgendwie hab ich aber keinen schimmer wie ich das realisiere?!

http://shenmue-saga.com/test/index.html

CSS

Code:

* {
	margin:0;
	padding:0;
}

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

#wrap {
	margin:auto;
	width:780px;
	min-height:100%;
	text-align:left;
	background:#000 url(../design/bg.jpg) repeat;
}

#header ul {
	float:left;
	list-style:none;
	height:115px;
	width:780px;
	text-align:right;
	background:#000 url(../design/header.gif);
}

#header ul li a {
	color:#daa520;
	width:90px;
	margin:0 10px;
}

#header ul li a:hover {
	color:#e0e0e0;
}

.left {
	float:left;
}

.right {
	float:right;
}

.navigation, .left, .right {
	text-align:center;
	font-weight:bold;
	color:#c00;
	height:20px;
	width:130px;
	background:#000 url(../design/navigation.gif);
}

#left_sidebar, #right_sidebar {
	width:130px;
	background:#edaf44 url(../design/cellpic.gif) repeat-x;
}

#left_sidebar {
	float:left;
}

#right_sidebar {
	float:right;
}

#content {
	float:right;
	width:520px;
	text-align:justify;
	marg in:0 10px;
	background:#daf999 url(../design/content_bg.gif) repeat-x;
}

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

#footer {
	height:107px;
	color:#fff;
	text-align:center;
	background:#000 url(../design/footer.gif) repeat-x;
	clear:both;
}

.footer {
	color:#c00;
}

#navi ul {
	float:left;
	list-style:none;
	height:20px;
	width:520px;
	background:#e0e0e0 url(../design/button_bg.gif);
}

#navi ul li, #header ul li {
	display:inline;
}

#navi ul li a {
	float:left;
	text-align:center;
	font-size:11px;
	color:#000;
	height:20px;
	width:90px;
	background:#e0e0e0 url(../design/button.gif);
}

#navi ul li a:hover {
	color:#c00;
	background:#e0e0e0 url(../design/button_hover.gif);
}

.menue {
	width:110px;
	margin:2px 10px;
	text-align:center;
}

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

.menue ul li {
	display:block;
}

.menue ul li a {
	color:#fff;
}

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

#w3c {
	padding:10px;
}

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

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

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

a:hover {
	color:#e0e0e0;
}

.h1_title {
	padding:15px 0 0 0;
	font-size:20px;
}

.h2_title {
	font-size:11px;
	padding:0 0 25px 0;
}

HTML

Code:

<body>
	<div id="wrap">
		<div id="header">
			<ul class="navlist">
				[*]about us
				[*]contact
				[*]link us
				[*]impressum
			[/list]		</div> 
		<p class="left">STARWARS</p>
		<p class="right">STARWARS</p>
		<div id="navi">
			<ul class="navlist">
				[*]Home
				[*]Community
			[/list]		</div> 
		<div id="left_sidebar">
		<div class="menue">
			<ul class="menuelist">
				[*]LINK
				[*]LINK
				[*]LINK
				[*]LINK
				[*]LINK
			[/list]		</div> 
		<p class="navigation">STARWARS</p>
		<div class="menue">
			<ul class="menuelist">
				[*]LINK
				[*]LINK
				[*]LINK
				[*]LINK
				[*]LINK
			[/list]		</div> 
		<div id="w3c">
		<p class="w3c">Letzte Änderung: 01.03.2006</p>
		

XHTML 1.0 Strict</p>
		CSS 2.1
		</div> 
		</div> 
		<div id="right_sidebar">
		<div class="menue">
			<ul class="menuelist">
				[*]LINK
				[*]LINK
				[*]LINK
				[*]LINK
				[*]LINK
			[/list]		</div> 
		<p class="navigation">STARWARS</p>
		<div class="menue">
			<ul class="menuelist">
				[*]LINK
				[*]LINK
				[*]LINK
				[*]LINK
				[*]LINK
			[/list]		</div> 
		</div>  
		<div id="content">
			<h1 class="h1_title">STAR WARS-RPG.DE [Darth Sidious]</h1>
			<h2 class="h2_title">Die STAR WARS Rollenspiel Fanpage!</h2>



		

INHALT</p>
 


		</div> 
		<div id="footer">
			

Powered &amp; Designed by <strong class="footer">STARWARS-rpg.de[/b] 2006</p>
		</div> 
	</div> 
</body>

mazzo · #2 (**permalink**) 14.03.2006, 16:54

Du brauchst "faux columns", Du findest haufenweise dazu in der Suche. ODer gleich in den FAQs des oben verlinkten XHTML-wiki.

Pumpkin · #3 (**permalink**) 14.03.2006, 17:21

Danke für den Tip. Aber mit einer Grafik zu tricksen ist eigentlich nicht mein ding. Habs nun anders gelöst, was den selben effekt hat:

#wrap {
background:edaf44;
}

Da meine HP auf eine max. breite von 780px beschränkt ist, musste ich einfach nur die Hintergrundfarbe der HP ändern. Dies wird über #wrap bei mir getan.

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
Div Container gehen nicht ganz nach unten	SphaeroX	CSS	7	28.08.2011 17:38
Problem mit Top:auto;	Nils94	CSS	7	06.05.2011 18:32
Ungewöhnlicher abstand beim clearen von floats	adrianno	CSS	14	16.09.2009 14:20
Dynamische Höhe im Content und DIV immer unten	keaton	CSS	8	13.12.2006 18:19
Seitenaufbau mit DIVs und 100% Höhe	vespasquire	CSS	6	12.09.2004 15:21