css footer + menu uitlijnen..

Door Giel op 14-07-2009 09:23

4.803 views

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 ;)

Tamara

14-07-2009 09:32

Wat jij bedoeld is faux columns. even daarop googlen.

Wat ik altijd doe, is de footer buiten mn container zetten, en deze css erbij:


*
{
	margin: 0px;
	padding: 0px;
}
#container
{
	width: 980px;
	margin: 0 auto;
	min-height: 100%;
}
#sidebar-left
{
	width: 200px;
	float: left;
}
#sidebar-right
{
	width: 780px;
	float: left;
}
#footer 
{
	width: 980px;
	margin: 0 auto;
	clear: both;
}


<div id="container">
	<div id="sidebar-left">
	Links
	</div>

	<div id="sidebar-right">
	Rechts
	</div>
</div>
<div id="footer">
	De footer
</div>

Voor de 2 kolommen in de container is een simpele float:left; en een breedte al genoeg. De breedtes van deze 2 kolommen mogen niet breder zijn dan die van de container!

Ik heb dit niet getest, maar hij zou t gewoon moeten doen.

edit: ik zie dat je heel vaak position:absolute gebruikt. Deze heb je (bijna) niet nodig.

Giel

14-07-2009 09:35

Moet je bij een faux column niet zo'n standaard achtergrond hebben die zich helemaal doortrekt naar het einde van de pagina?

Want mijn rechter sidebar is namelijk anders opgebouwd, maar ik zal even kijken naar wat je hebt gestuurd! Alvast bedankt!

Tamara

14-07-2009 09:37

wat ik altijd doe (als ze mee moeten rekken), is er een afbeelding van maken, en die aan de container hangen, en deze verticaal herhalen.

voorbeeldje

Giel

14-07-2009 09:45

Dat heb ik juist niet nodig, omdat er door mijn rechter sidebar een kronkelend lijntje loopt.

En ik gebruik inderdaad vaak position:absolute, maar zoals ik al aangaf mijn css is niet bepaald goed. En zo werkte de site tenminste.. Maar niet met wat ik wil :(

Tamara

14-07-2009 09:54

heb je misschien een voorbeeldje online staan? of in ieder geval een voorbeeldje van dat lijntje?

Giel

14-07-2009 09:59

http://gielvdberg.nl/rightsidebar.png

Dat is mijn rechter sidebar :)

Tamara

14-07-2009 10:02

welke positie moet dat plaatje hebben in de rechter balk? onder/boven....

Giel

14-07-2009 10:10

boven, zodra de pagina langer word moet er een wit vlak bij komen.. tot de footer..

Tamara

14-07-2009 10:14

Mooi! Das namelijk de makkelijkste manier ;)

Even de css aangepast voor je:

#sidebar-right
{
width: 780px;
float: left;
background: #FFF url(rightsidebar.png) no-repeat;
}

Even kijken of het pad naar het plaatje goed staat. En mocht de afbeelding niet goed uitlijnen, probeer dan bij de tag background het volgende erbij te zetten: left top

Nu kan je dat van die achtergrond afbeelding wel doen. Dit hoeft trouwens niet perse als beide kolommen verder wit zijn. dan geef je allebei de kolommen gewoon een background: #FFF; mee.

Giel

14-07-2009 10:20

:) Maar nu nog de footer..

Reageren

Inloggen om te reageren