PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
G

css footer + menu uitlijnen..

Door Giel op 14-07-2009 09:23
4.802 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 ;)
G
Giel
25-08-2009 14:20
Hi, ben ik weer.

Weer met het footerprobleem. Ik krijg het niet voor elkaar om een sticky footer in elke browser werkend te krijgen.

Ik heb al verschillende dingen erover gelezen op internet, maar het wil maar niet lukken. Ik heb vooral problemen met Safari & Chrome. Als het juist word weergegeven in IE en Firefox heb ik bij Chrome en Safari nog een flinke witruimte hier tussen.

Ik heb het nu zo gedaan:
CSS:

.clearfooter{
	height: 72px;
}

#footer{
	position: relative;
	left: 87px;
	height: 72px;
	background: url(images/footer.png) no-repeat;
}


En dan de class clearfooter boven in de content gezet. En de footer eronder. Dit doet hij netjes in IE en FF, maar dus niet in Safari en Chrome. Doordat hun browser veel compacter is, heb ik veel meer ruimte voor de website. En daardoor sluit hij niet onderaan?

Wie kan me ermee helpen, want ik kom er echt helemaal niet meer uit.
T
Tamara
25-08-2009 14:29
de code die ik in een eerder bericht had geplaatst doet het goed, ook die van de footer. kijk daar even naar.

voor een footer moet je nooit left en position gebruiken.

de footer moet je buiten je container plaatsen (eronder dus).

de footer dezelfde breedte geven als je container, zoiets bv (als de container 980px breed is):


#footer 
{
    width: 980px;
    margin: 0 auto;
    clear: both;
}



heb je een voorbeeld online staan? want het is nu niet duidelijk WAT er precies fout gaat.... zo kan ik ook geen passend antwoord geven ;)
G
Giel
25-08-2009 14:51
Ik heb helaas geen online voorbeeld draaien, omdat ik hem nu aan het omzetten ben in wordpress kan ik hem ook niet 1 2 3 online zetten. Omdat ik dan de gehele wordpress installatie weer moet uitvoeren.. ;)

Ik probeer nu iets anders, maar dat wil ook niet werken. Ik heb nu een div all aangemaakt.

html, body {
height: 100%; /* héél belangrijk */
}

#all{
	border: 1px dotted yellow; /* voor de duidelijkheid */
	position: relative;
	min-height: 100%;
	height:auto !important; /* voor moderne browsers */
	height:100%; /* voor IE */
}


En dan zal je zeggen de footer op absolute zetten en bottom: 0px;
Maar zodra de footer absolute is, is hij niet meer zichtbaar.

En als ik de footer uit de container plaats, dan zou ik moeten werken met min-height en height? Daarmee kloppen de afmetingen niet in verschillende browsers, dus dat is ook geen oplossing. Lijkt me..
T
Tamara
25-08-2009 14:54
plaats even de basis structuur van je html (dus eigenlijk je container en footer), en ook de bijhorende css erbij.

heb je mijn code überhaupt al geprobeerd?
G
Giel
26-08-2009 10:54
Inmiddels is het me al gelukt, vraag niet hoe, maar het functioneert in alle browsers. :)

Alleen nu zit IE 6.0 te kutten, en heb ook nog problemen in 1024x768.. Werken hier nog veel mensen op?
T
Tamara
26-08-2009 11:05
ja, zeker met die resolutie!
G
Giel
26-08-2009 14:08
Tamara schreef op 26.08.2009 11:05
ja, zeker met die resolutie!


Wat lopen sommige mensen nog achter.. Maarja, je hebt wel gelijk. Moest het sowieso fixen voor die resolute.. Het is me inmiddels helemaal gelukt, enkel nog problemen in IE6.0 De rest doet het nu :)

Reageren

Inloggen om te reageren