Footer staat onder header ipv onderaan

Webmus · 18 sep 2014

Hoi

Ik probeer een website te maken, met een verkleurende achtergrond (gradiënt). Ook in de header is een verkleurende achtergrond. Nu heb ik het probleem dat de footer vlak onder de header komt staan en niet naar beneden wil. Ik heb het geprobeerd met position:absolute en position:relative, bottom: 0px. Het enige wat er gebeurt is dat de footer onderaan het scherm komt te staan, maar als de pagina langer is staat hij niet mooi onderaan.

Weet iemand hoe ik dit 'probleempje' kan oplossen zodat de footer altijd netjes onderaan komt te staan?

Hieronder de code:

CSS:

Code:

/* Code voor body*/
body {
  
/* Verkleurende achtergrond */	
/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(left top, circle farthest-corner, #4B0082 0%, #CC99FF 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(left top, circle farthest-corner, #4B0082 0%, #CC99FF 100%);

/* Opera */ 
background-image: -o-radial-gradient(left top, circle farthest-corner, #4B0082 0%, #CC99FF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #4B0082), color-stop(1, #CC99FF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(left top, circle farthest-corner, #4B0082 0%, #CC99FF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle farthest-corner at left top, #4B0082 0%, #CC99FF 100%);

background-size: 100%;
max-width: 1020px; 
font-family: Verdana, Arial, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
	margin: 0 auto;
    padding: 0; 
	line-height: 1.5em;
	
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}



/* afbeelding positoneren*/
img {
	float: right;
	margin-left: 5px;
	margin-bottom: 5px;
}

div {
    margin: 5px auto;
    width: 1000px;
}



  /* code voor de header*/
header {
    height: 150 px;
    border: none;
    padding: 1px 30px 1px 0px ; /* boven rechts onder links */
    width: auto;
	font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 30px;
	color: #6699FF;
	
	/* Verkleurende achtergrond */	
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(right, #CCCCCC 0%, #000000 60%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(right, #CCCCCC 0%, #000000 60%);

/* Opera */ 
background-image: -o-linear-gradient(right, #CCCCCC 0%, #000000 60%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #CCCCCC), color-stop(60, #000000));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(right, #CCCCCC 0%, #000000 60%);

/* W3C Markup */ 
background-image: linear-gradient(to left, #CCCCCC 0%, #000000 60%);
}
}


 /* code voor de sectie*/
section {
	border: none;
	min-height:570px;
	width: auto;
	font-family: Arial, Geneva, sans-serif;
    font-size: 16px;
    color: #FCF3CB;
	margin: 0 auto;
	padding: 5px 15px 5px 20px ; /* boven rechts onder links */
}

.div1 {
	float: left;
	width: 20%;
	height: 150px;

}

#header img {
	float: left;
	margin-left: 0px;
	margin-bottom: 0px;
}


.div2 {
	float: left;
	width: 80%;
	height: 150px;
	
}


.div3 {
	float: left;
	width: 20%;
	height: 150px;
	min-height:570px;

	
}

.div4 {
	float: left;
	width: 76%;
	min-height:570px;
	background-color: #610B5E;
	padding: 5px 15px 5px 25px ; /* boven rechts onder links */
}

/* menu */
.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 14px;
    display: block;
}

.bmenu li a{
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-shadow: 0px 0px 4px #fff;
    letter-spacing: 1px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}




.bmenu:hover li a{
    text-shadow: 0px 0px 6px #fff;
}
.bmenu li a:hover{
    color: #fff;
    text-shadow: 0px 0px 1px #fff;
    padding-left: 10px;
}





/* code voor links in section*/

#section-link a:link {
	color: #99CCFF;
	text-decoration: underline;
}
#section-link a:visited {
	text-decoration: underline;
	color: #99CCFF;
}
 #section-link a:hover {
	text-decoration: underline;
	color: #FAD360;
}
#section-link  a:active {
	text-decoration: none;
	color: #8b0000;
}


/* code voor de footer*/
footer {
   
	height: 40px;
	width: auto;
    background-color: #000000;
    border: none;
	margin: 0 auto;
	width: 100%;
	padding: 2px 1px 2px 1px ; /* boven rechts onder links */
}

#footer a{
color: #FFFF80;
}

  /* code voor de koppen*/
h1 {
	color: #FAD360;
	
}
h2 {
	color: #F0FFF0 ;
}
h3 {
	color: #F8F8FF ;
}
h4 {
	color: #FFFFFF;
}
h5 {
	color: #000080 ;
}
h6 {
	color: #EBEBEB;
}

HTML:

Code:

<!DOCTYPE HTML PUBLIC ?-//W3C//DTD HTML 4.01 Transitional//EN? ?http://www.w3.org/TR/html4/loose.dtd?><head>
<title>Welkom op Webmus</title>

<meta charset="UTF-8">
<meta name="author" content="Tinne Eeckels" lan="nl">
<meta name="description" content="Webmus.be: homepage">
<meta name="keywords" content="webmus, webdesign, bedrijfscommunicatie, communicatiedienst, schrijven, copywriting, openbare, bibliotheek, openbare bibliotheken, antwerpen, auditief-visuele beperking, auditief, visueel, slechthorend, slechtziend, usher,syndroom, retinitis pigmentosa, RP, kokerzicht, tunnelzicht, Helen Keller Club, Anna Timmerman, Anna Timmerman vzw, CI, cochleair,implant, tinne,eeckels">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="format-detection" content="telephone=no" />
<body onLoad="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>


<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsive" media="screen" />
</head>

<body><div>

<header>
<div id="div1">
  <div id="header">afbeelding</div>
</div><div id="div2"><h1><center>Welkom op Webmus</center></h1>
</div>
</header>


<section id="section-link">
<div class="div3">
<ul class="bmenu">
    <li><a href="#">Over mij</a></li>
    <li><a href="#">Webmus Webdesign</a></li>
    <li><a href="#">Gedichten</a></li>
    <li><a href="#">Verhalen</a></li>
    <li><a href="#">Art Gallery</a></li>
	<li><a href="#">Mijn CV</a></li>
	<li><a href="#">Links</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>


<div class="div4">
  <p>tekst</p>
  </div>

</section>
 </div>
 <div>
<footer>
<center>
<iframe
name="datum"
height="40px"
width="70%"
src="automatische_datum.php"
frameborder="0"
scrolling="no"></iframe>
</center>
</footer>
</div>
</body>
</html>

Groetjes, Webmus

Veng · 21 sep 2014

Zowel programmeren als positioneren is niet mijn sterkste kant

. Zeker jouw gedachten zo snel volgen is nog moeilijker.
Echter zie ik dat je de header een definitie mee geeft (div1) waarin je wat over positionering zegt (float left). Voor de footer herken ik die echter niet. Volgens mij heb je die nodig om je footer netjes te positioneren, want je hebt het ook niet in de css van je footer staan. Maar mss zie ik het niet goed.
Zoek anders eens een eenvoudige website met footer en kijk hoe het daar is opgelost (bv. mijn website is redelijk rechttoe rechtaan: http://is.gd/BNnGBf). Ik gebruik Firefly in Firefox om de code te bekijken, maar andere browsers zullen ook wel iets hebben.

Webmus · 3 okt 2014

Sorry voor mijn late reactie... 't was heel druk de laatste weken.

Veng, bedankt voor je reactie

Ik kreeg dat probleem niet opgelost dus heb ik een andere code gevonden waar ik gradiënt background met footer en header kan combineren. Nu heb ik op m'n site de footer netjes onderaan.

Wie benieuwd is naar het resultaat kan altijd hier eens kijken (site is nog niet helemaal af qua inhoud en er zitten nog een paar andere schoonheidsfoutjes in die ik nog moet oplossen).

Er mag een slotje op voor mij

Groetjes

Webmus

Veng · 3 okt 2014

OK. Ik zou wel nog even de fontkleur van de footer aanpassen. die is bij mij alleen te lezen als ik hem markeer. Of is dat een van je schoonheidsfoutjes?

Footer staat onder header ipv onderaan

Webmus

Nieuwe gebruiker

Veng

Terugkerende gebruiker

Webmus

Nieuwe gebruiker

Veng

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy