Ga naar inhoud

CSS header & footer

JorenWillems
 Delen

Aanbevolen berichten

JorenWillems Enthousiasteling

JorenWillems

Geplaatst:
Geplaatst:

Hallo

Ik heb in men nieuwe website een header, content en footer. De header en footer staan beide op position:absolute met respectievelijk top:0 en bottom:0. Ik zou graag willen dat header altijd zichtbaar blijft, dus dat bij het scrollen in de content, de header altijd bovenaan zichtbaar blijft...

stegisoft Grootmeester

stegisoft

Geplaatst:
Geplaatst: (aangepast)

Voor header moet je niet absolute opgeven.

#header {

margin: 0 0 0 0;

background: #b95c5c;

font-size: 18px;

font-style: italic;

line-height: normal;

font-weight: bold;

text-align:center;

color: #f2d4d4;

}

Maar alles hangt af hoe je wilt instellen.

Werkt je met DIV of wat?

Best de code meegeven bij de volgende bericht.

Voor footer is dat het zelfde:

#footer {

clear: both;

background: #b95c5c;

font-size: 16px;

font-style: italic;

line-height: normal;

font-weight: bold;

text-align:center;

color: #f2d4d4;

}

aangepast door stegisoft
jv9090 Grootmeester

jv9090

Geplaatst:
Geplaatst:

Het volgende werkt enkel in Chrome en Firefox. IE is een ander paar mouwen. Daar moet ik, of iemand anders, dan eventueel een oplossing voor zoeken

In mijn voorbeeld heb ik een div header en een div content:

css-bestand:

body{
margin: 0;
background-color:green;
}

div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 800px;
background-color: red;
}

div#content{
padding: 100px 20px 0 20px;
}

Met position: fixed zet je de header vast.

Om er voor te zorgen dat de tekst in de div content niet achter je header verdwijnt voer je een padding in van 100px vanaf de top. Zo heb je 20px speling(de header in mijn voorbeeld heeft immers een hoogte van 80px).

Html-bestand:

<html> 
<head> 
<title>voorbeeld</title> 

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

</head> 

<body> 

<div id="header"></div> 

<div id="content"> Hier kan je een hele hoop tekst plaatsen om de werking te testen.</div> 

</body> 
</html>

Gast
Dit topic is nu gesloten voor nieuwe reacties.
 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.