Hey,

Ik ben vanaf gister al heel de dag bezig met het maken van een site, maar mijn css is niet bepaald goed.

Ik probeer namelijk iets wat me totaal niet lukt, en op internet echt al verschillende dingen erover gelezen, maar kom er totaal niet uit. Kunnen jullie mij misschien verder helpen?

Ik zal zo even de code plaatsen, met fletse kleuren. :)

Mijn probleem: Zodra de content langer word, moet de footer meegaan, en de 4 andere div elementen ook.

Ik zal de code even plaatsen en zal het uitleggen met de kleurtjes :)

CSS:


* {
	margin: 0;
	padding: 0;
}

 
body, td {
	font-family: arial;
	font-size: 10pt;
	background-color:#002d5c;
	color: #00a4e4;
}

#container{
	position: absolute;
	left: 50%;
	width: 1024px;
	margin-left: -412px;
	background-color:#9fa4a8;
}

#header {
	width: 856px;
	height: 179px;
	background-color: #00FF00; 
	position: absolute;
}

#left_background {
	width: 86px;
	height: 768px;
	background-color: #FF0000;
	position:absolute;
	left: -86px;
}

#left_sidebar{
	width: 166px;
	min-height:	517px;
	background-color:#FFFFFF;
	top: 179px;
	position:absolute;
	border-right:1px dotted grey;
}

#content{
	width: 462px;
	min-height:	517px;
	background-color: #0000CC;
	top: 179px;
	position: absolute;
	margin-left: 167px;
}

#right_sidebar{
	width: 226px;
	min-height: 517px;
	background-color: #FFFFFF;
	top: 179px;
	position:absolute;
	margin-left: 629px;
	border-left:1px dotted grey;	
}

#right_background{
	width: 82px;
	height: 768px;
	left: 856px;
	background-color: #FF0000;
	position:absolute;

}

#footer{
	width: 856px;
	height: 72px;
	background-color: #FFFF00;
	position: absolute;
	top: 696px;
}



HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="container">
	<div id="header"></div>
    
    	<div id="left_background"></div>
        
    <div id="left_sidebar"></div>
    
    	<div id="content">
        	
            <div id="contenttxt">
            
            </div>  
        
        </div>
        
    <div id="right_sidebar"></div>
    
    	<div id="right_background"></div>
        
    <div id="footer"></div>
</div>

</body>
</html>



Zoals je ziet, zijn het behoorlijk felle kleurtjes.. ;)

Wat ik wil, is dat de footer sowieso onderaan komt te staan. Dus de rest moet ook mee. En zodra het blauwe vak groter word, moeten de rode en witte mee. De footer (Geel) natuurlijk ook.

Wie kan mij hiermee helpen? Want ik kom er echt helemaal niet meer uit :(

Alvast bedankt ;)
Ik had de footer er ook al bij gezet ;)
Haha, sorry mijn fout.. Maar nu de footer wel mee naar beneden, maar nog niet de rechter sidebar. Dat moet ook gebeuren..
wat bedoel je precies met dat ie niet mee naar beneden gaat? heb je het online staan?
Heb hem niet online staan, tenminste niet functionerend. Ik bedoel dat de sidebar even lang moeten worden als het content gedeelte.

Dus als je nu #sidebar-left helemaal vult met tekst, en dan gaat de footer mee naar beneden, dat moet ook, maar dan moet #sidebar-right ook even lang worden..

Btw al bedankt voor je hulp! :)
dat kan je dus oplossen met faux columns. Het komt er in het kort op neer dat je een achtergrond plaat maakt, en die verticaal herhalen op je container. Zo lijkt het alsof alles meerekt.
Heb ik dan geen problemen met de achtergrond van de rechter sidebar?
nee. die staat bovenop de container
Heb je niet gewoon een online plaatje van hoe je layout moet worden? Is een stuk makkelijker..
Het is me al gelukt, moest ook nog zorgen dat de footer standaard onderin bleef staan, ook dat verliep met moeite. En lees dat er veel mensen last van hebben..

Misschien iets om op te nemen in CSS 3?

Heb het nu opgelost om de footer gewoon als img onderin te zetten, het is wel niet zo netjes. Maar het werkt, zou het anders ook echt niet weten..

Tamara in ieder geval bedankt voor je hulp!
Graag gedaan hoor :)

laat is je css en html zien? of even hier plaatsen

het is idd geen mooie oplossing voor de footer nu.

Reageren