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

CSS, footer gaat niet automatisch mee

Door Jeroen van Rooij op 31-08-2009 09:29
1.244 views
Hey, ik weet het, dit is de zoveelste die het vraagt. Maar ik heb hier op phphulp al naar topics gezocht en daar de oplossingen geprobeerd te gebruiken, maar ook die hebben niet gewerkt.

Verder heb ik via google een groot aantal sites bekeken, maar ik kom er maar niet uit en wil nu toch hier vragen wat ik er aan kan doen.

Hier mijn CSS:

* { 
	padding: 0; 
	margin: 0; 
}
html, body {
	margin: 0 auto;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	height: 100%;
}
#wrapper { 
	margin: 0 auto;
	width: 951px;
	overflow:hidden;
}
#faux {
	margin-bottom: 0px;
	overflow: auto;
	width: 100%;
	padding-bottom: 150px;
}
#bg{
	border: 0px solid black;
	background: url('images/bg.png') no-repeat;
	width: 949px;
	height: 403px;
	position: absolute;
}
#header {
	color: #333;
	width: 931px;
	padding: 10px;
	height: 106px;
	margin: -1px 0px 0px -1px;
	background: url('images/header.png');
}
#head_links {
	color: #333;
	width: 280px;
	padding: 0px;
	height: 22px;
	margin-top: 50px;
	margin-left: 650px;
	float: left;
	position: absolute;
}
#collegegroep {
	font-weight: bold;
	padding-top: 3px;
	padding-left: 29px;
	height: 19px;
	width: 103px;
	background: url('images/college_groep_knop.png');
	float: left;
}
#contact {
	font-weight: bold;
	padding-top: 3px;
	padding-left: 25px;
	height: 19px;
	width: 112px;
	background: url('images/contact_knop.png');
	float: right;
}
#menu {
	color: #333;
	width: 951px;
	padding: 0px;
	height: 64px;
	margin: 0px 0px 0px 0px;
}
#menu_low{
	color: #333;
	width: 951px;
	padding: 0px;
	height: 28px;
	margin: 0px 0px 0px 0px;
	background: url('images/menu_low.png') no-repeat;
}
#pag_weergave{
	color: #fff;
	width: 550px;
	padding-right: 10px;
	height: 27px;
	margin: 0px 0px 0px 0px;
	text-align: right;
	line-height: 23px;
	font-size: 11px;
	float: left;
}
#login{
	margin-top: 2px;
	border: 0px solid black;
	color: #fff;
	width: 377px;
	padding-left: 10px;
	height: 26px;
	text-align: left;
	line-height: 23px;
	font-size: 11px;
	float: right;
}
#rightcolumn { 
	display: inline;
	margin: 0px;
	padding: 10px;
	width: 368px;
	float: right;
}
#leftcolumn { 
	float: left;
	margin: 0px;
	padding: 10px;
	width: 540px;
	display: inline;
}
#footer { 
	height: 10px;
	clear:both;
	width: 908px;
	background: #ABBEBE;
	padding: 10px;
	bottom: 0;
}
.clear { 
	clear: both; 
	background: none; 
}
.username{
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 24px;
	border: 0px solid #fff;
	width: 124px;
	background: transparent url("images/username.png") no-repeat;
	position: absolute;
	display: block;
}

/* MENU start */
.menu{margin:0 auto; padding:0; height:64px; width:100%; display:block; background:url('images/repeat.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px tahoma, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{padding-top: 15px; line-height:15px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:white; background:url('images/repeat2.png'); height:64px;}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px tahoma, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}
/* MENU eind */


index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webshop @ College Groep Nederland</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
   <div id="wrapper">
        <div id="header">	
			<div id="head_links">
				<div id="collegegroep"><a href="http://www.collegegroep.nl/">Collegegroep.nl</a></div><div id="contact">Contactgegevens</div>
			</div>
		</div>
		<div id="menu">
			<?php include 'menu.php' ?>
		</div>
		<div id="menu_low">
			<div id="pag_weergave">
			U bevindt zich hier: Home
			</div>
			<div id="login">
				<form>
					<input type="text" class="username" value="Gebruikersnaam">
				</form>	
			</div>
		</div>
		<div id="faux">
			<div id="bg">
			<div id="leftcolumn">

hhkfgkdfhg
		       
			   <div class="clear"></div>
			   
		       </div>
		       <div id="rightcolumn">
					gahagaha<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	
					gahagaha<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	
					gahagaha<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	<br>hg	
					
			      <div class="clear"></div>
				  
		       </div>
			   </div>
			</div>	   
		<div id="footer"> </div>
	</div>
</body>
</html>


Als iemand behoefte heeft om het resultaat te zien, dan moet je het even melden, dan zet ik hem online.

Alvast bedankt voor de hulp!
M
Mitchell
08-09-2009 11:05
Ik zie geen verschil in IE 7 en FF 3.5..
J
Jeroen van Rooij
08-09-2009 11:11
Ik gebruik IE8 en FF3.5, maar in IE8 staat hij netjes onderaan, maar als de pagina te lang wordt, gaat hij niet mee naar beneden, maar de tekst gaat er gewoon achterlangs..

En bij FF3.5 gaat de footer wel mee naar beneden, maar is de ruimte tussen tekst en footer ook weer extreem groot.

EDIT: Met de 'compatibiliteit view' ziet het er wel goed uit, maar helaas is mijn site gemaakt voor laten we zeggen 'dummies'. Dus die zouden dat niet begrijpen.
M
Mitchell
08-09-2009 11:13
Een footer onderaan de pagina die constant mee gaat is nooit echt een exacte oplossing voor geweest die perfect werkt.

Als je ook aan zoiets gaat werken, moet je eerst zeker weten of je een goede oplossing er voor hebt.

Welke fix heb je er momenteel voor (link)?
J
Jeroen van Rooij
08-09-2009 11:31
Ik gebruik momenteel geen fix, mijn css die betrekking heeft tot de layout is momenteel als volgt:

* { 
	padding: 0; 
	margin: 0; 
}
html, body {
	margin: 0 auto;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	height: 100%;
}
#wrapper { 
	margin: 0 auto;
	width: 951px;
	overflow:hidden;
	min-height: 100%;
	position:relative;

}
#faux {
	margin-bottom: 0px;
	overflow: hidden;
	width: 100%;
	padding-bottom: 150px;
}
#bg{
	border: 0px solid black;
	background: url('../images/bg.png') no-repeat;
	width: 949px;
	height: 403px;
}
#header {
	color: #333;
	width: 931px;
	padding: 10px;
	height: 106px;
	margin: -1px 0px 0px -1px;
	background: url('../images/header.png');
}
#head_links {
	color: #333;
	width: 280px;
	padding: 0px;
	height: 22px;
	margin-top: 50px;
	margin-left: 650px;
	float: left;
	position: absolute;
}
#collegegroep {
	font-weight: bold;
	padding-top: 3px;
	padding-left: 29px;
	height: 19px;
	width: 103px;
	background: url('../images/college_groep_knop.png');
	float: left;
}
#contact {
	font-weight: bold;
	padding-top: 3px;
	padding-left: 25px;
	height: 19px;
	width: 112px;
	background: url('../images/contact_knop.png');
	float: right;
}
#menu {
	color: #333;
	width: 951px;
	padding: 0px;
	height: 64px;
	margin: 0px 0px 0px 0px;
}
#menu_low{
	color: #333;
	width: 951px;
	padding: 0px;
	height: 28px;
	margin: 0px 0px 0px 0px;
	background: url('../images/menu_low.png') no-repeat;
}
#pag_weergave{
	color: #fff;
	width: 550px;
	padding-right: 10px;
	padding-top: 2px;
	height: 25px;
	margin: 0px 0px 0px 0px;
	text-align: right;
	line-height: 23px;
	font-size: 11px;
	float: left;
}
#pag_weergave A:link {
color: white;
text-decoration: underline;
}

#pag_weergave A:visited {
color: white;
text-decoration: underline;
}

#pag_weergave A:active {
color: white;
text-decoration: underline;
}

#pag_weergave A:hover {
color: white;
text-decoration: none;
}
#login{
	margin-top: 2px;
	border: 0px solid black;
	color: #fff;
	width: 377px;
	padding-left: 0px;
	height: 26px;
	text-align: left;
	line-height: 23px;
	font-size: 11px;
	float: right;
	margin-left: 10px;
}
#rightcolumn {
	display: inline;
	margin: 0px;
	padding: 10px;
	width: 368px;
	float: right;
}
#leftcolumn { 
	float: left;
	margin: 0px;
	padding: 10px;
	width: 540px;
	display: inline;
	padding-bottom:85px;
}
#start_text{
	background: url('../images/start_text.png');
	height: 15px;
	padding-left: 10px;
	padding-top: 5px;
}
#middle_text{
	background: url('../images/middle_text.png') repeat-y;
	padding-left: 10px;
	padding-right: 10px;
}
#end_text{
	background: url('../images/end_text.png');
	height: 15px;
	padding-left: 10px;
	padding-bottom: 5px;
}
#footer { 
	margin-left: auto;
	margin-right: auto;
	margin-top: -85px;
	padding-left: 10px;
	padding-top: 5px;
	height: 85px;
	width: 951px;
	color: #FFF;
	font-size: 11px;
	background: url('../images/footer.png');
	position: absolute;

}
J
Jeroen van Rooij
08-09-2009 11:42
Emmanuel Delay schreef op 08.09.2009 11:35
Hier heb ik een voorbeeld van een pagina met footer.
Als je hier iets mee kan doen, ...

Let niet op de links; ze werken niet.
http://www.manutechnica.com/tutorials/css/footer2/
De css vind je in body.css



Ben ik misschien niet helemaal duidelijk geweest. Want dit voorbeeld heeft de footer altijd onderaan, maar die van mij moet onderaan, maar ook echt onderaan de tekst, niet standaard onder in beeld.

Hoe zeg je zoiets in normaal nederlands, lol. Ik hoop dat je het begrijpt.

EDIT: Zo te zien lag het dus JUIST aan de compatibility view van IE8, want het werkt gewoon, tenzij die view aan staat, ik had me daarin vergist.

Het werkt nu dus volgens mij, hartstikke bedankt voor alle hulp..

En net lag phphulp eruit? :|
M
Mitchell
08-09-2009 12:37
Ja, php heeft wel vaker kuren.

Dit is trouwens een antwoord op je vraag. Deze staat altijd onder de text en wanneer de tekst te kort is, staat hij gewoon onderin beeld.

Reageren

Inloggen om te reageren