Header en footer sticken tegen boven en onderkant?

**Anton Magdy** · 28-07-2012, 13:09

Hallo vrienden,

Ik ben een beetje aan het klooien met het volgende: ik wil mijn header en footer tegen de bovenkant en onderkant aanplakken. Daarnaast wil ik mijn header en footer 100px hoog maken en een ander kleurtje geven. Ik heb zelf al een header en footer geinclude in mijn index.php bestand.

Is er iemand die mij kan laten zien hoe het moet?

Dit is wat ik heb zover:

header.php

PHP Code:


<?php

  include 'includes/dbconnect.php';

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Title of the document</title>

<link rel="stylesheet" type="text/css" href="css/main.css" />

</head>

<body>

<div id="main">

<div id="header">

hello header

</div>

index.php

PHP Code:


<?php

  include 'includes/header.php';

?>



hello center



<?php

  include 'includes/footer.php';

?>

footer.php

PHP Code:


<div id="footer">



hello footer



</div>

</div>

</body>

</html>

main.css

Code:

/* CSS Document */

body {
  background-color: #FFCC33;
}

#header {

}

#main {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}
  

#footer {

}

Wie o wie kan mij even helpen met dit waarschijnlijk simpele probleem. Ik heb het geheel al gecentreerd op 900 pixels. Dit moet zowel in de header,index en footer zo blijven staan.

Alvast bedankt!

**Paul Meerkerk** · 28-07-2012, 13:15

Als ik het goed begrijp moeten de header en de footer blijven staan terwijl je dus wel kunt scrollen over de website. Klopt dit?

**Anton Magdy** · 28-07-2012, 13:22

Inderdaad. Alleen ze moet dus wel een andere kleur hebben als de index pagina en ze moeten vastgeplakt zitten aan de boven en onderkant.

**Anton Magdy** · 28-07-2012, 13:24

Die was ik ook al tegengekomen maar aangezien mijn code er niet zo uit ziet als die van hun kreeg ik het niet werkend.

**Ben Boogaardt** · 28-07-2012, 13:27

div#header en div#footer een position: fixed; geven?

#header { position: fixed; top: 0; }
#footer { position: fixed; bottom 0; }

**Sabra Issa** · 28-07-2012, 13:29

Origineel gepost door Ben Boogaardt

div#header en div#footer een position: fixed; geven?

Bij de header volstaat een position:fixed, maar bij de footer niet om deze altijd onderaan de pagina te houden. Stickyfooter is makkelijk aan te passen aan elk grid dus ik zou toch die code overnemen.

**Paul Meerkerk** · 28-07-2012, 13:29

Jouw codering past er goed in hoor... Je moet maar eens naar het CSS bestand kijken van de genoemde website. Ik denk dat als je eens goed kijkt het eigenlijk gewoon knip en plak werk is.

**Ben Boogaardt** · 28-07-2012, 13:30

Ligt er aan wat je verstaat onder 'altijd onderaan de pagina'. Op deze manier is hij altijd zichtbaar omdat hij tegen de onderkant van het venster is aangeplakt.

**Anton Magdy** · 28-07-2012, 13:31

Ben nu hier beland en kom al aardig in de buurt:

/* CSS Document */

body {
background-color: #FFFFFF;
}

#header {
background-color: #FFCC33;
height: 100px;
width: 100%;
position: fixed;
top: 0px;
}

#main {
background-color: #FFFFFF;
width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 100px;
height: 100%;
}

#footer {
background-color: #FFCC33;
height: 100px;
position: fixed;
bottom: 0px;
width: 100%;
}
Aanvullend bericht:

Origineel gepost door Ben Boogaardt

Ligt er aan wat je verstaat onder 'altijd onderaan de pagina'. Op deze manier is hij altijd zichtbaar omdat hij tegen de onderkant van het venster is aangeplakt.

Hij moet dus inderdaad scrollen. Niet altijd zichtbaar maar gewoon niet dat je langere pagina's krijgt dan noodzakelijk.

**Anton Magdy** · 28-07-2012, 14:17

Dan heb ik die stickyfooter dus niet nodig.

Ik gewoon heel simpel het volgende:

header (deze moet tegen de bovenkant van de browser aansluiten. als je scrolt verdwijnt de header uiteraard.

index (deze scrolt gewoon uiteraard)

footer (deze moet tegen het einde van de pagina aan de footer geplakt worden. Stopt de content dan sluit de footer het laatste deel af.

Ik denk dat jullie dachten dat ik bedoelde net als bij facebook dat de header in beeld blijft als je scrols of the footer. Dit hoeft dus niet van mij.

Ik wil wel graag dat de header en footer 100px hoog zijn en over de gehele breedte van de pagina een eigen achtergrond kleur hebben.

Misschien had ik het verkeerd uitgelegd.
Aanvullend bericht:
http://classicbusinessclass.com/ dit is wat ik nu heb

**Ben Boogaardt** · 28-07-2012, 14:25

Als je dat wilt bereiken moet je de positions en top/bottom e.d. helemaal weglaten. Als je de footer als laatste element in de HTML hebt staanm, komt hij automatisch onderaan. Als je hem de volgende dingen meegeeft komt hij onderaan de pagina, over de gehele breedte:

#footer {
width: 100%;
background: #fff; /* kleur is wit */
}

Wil je dat er ónder de footer dan niet ook nog eens een geel stuk komt, dan moet je inderdaad een sticky footer hebben. Kom je daar niet uit, kopieer dan de gehele broncode die je vindt op http://www.cssstickyfooter.com/ en bouw van daar af uit.

Header en footer sticken tegen boven en onderkant?