zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sidebarlänge dem Content anpassen?!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.03.2006, 16:34
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard Sidebarlänge dem Content anpassen?!

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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.03.2006, 16:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Du brauchst "faux columns", Du findest haufenweise dazu in der Suche. ODer gleich in den FAQs des oben verlinkten XHTML-wiki.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.03.2006, 17:21
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 17:40
div höhe - 2 scrollbalken vermeiden grubentaucher CSS 4 07.04.2010 11:16
Seitenaufbau mit DIVs und 100% Höhe vespasquire CSS 6 12.09.2004 15:21
CSS Layout: Höhe dem Inhalt anpassen - mit Mindesthöhe trequ CSS 3 05.09.2004 11:29
Menu mit dem Content wachsen lassen !?! Ich ralls ned theSaintHell CSS 1 31.07.2004 11:56


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:50 Uhr.