layout div

Status
Niet open voor verdere reacties.
8

8Leonie8

Gebruiker
Lid geworden
7 jul 2008
Berichten
61
Hallo allemaal,

Ik probeer een website te maken met een header en een footer, en daar tussenin drie kolommen. Ik heb nu onderstaande code en css.

HTML: 
<div id="wrapper">
<div id="header">Hier wordt de inhoud voor  id "header" weergegeven</div>
<div id="links">Hier wordt de inhoud voor  id "links" weergegeven</div>
<div id="rechts">Hier wordt de inhoud voor  id "rechts" weergegeven</div>
<div id="midden">Hier wordt de inhoud voor  id "midden" weergegeven</div>
<div id="footer">Hier wordt de inhoud voor  id "footer" weergegeven</div>
</div>

HTML: 
#wrapper{ border:#000 solid medium;
overflow: auto;
width: 100%;}
	
#header{
	border:medium solid #F9C;}

#links {
	border: medium solid #0F3;
	width: 20%;
	float:left;}

#midden{
	border: medium solid #C03;
	width:60%;
	position: relative;}
	

#rechts {
	border: medium solid #63C;
	width: 20%;
	float:right;}

#footer {
border:medium solid #F9C;}

Het probleem is nu dat de tekst van de kolommen doorloopt in de footer, en hierdoor de tekst in de footer opschuift.

De footer hoort juist netjes onderaan de pagina te komen, helemaal onder de middelste kolommen. Weet iemand hoe ik dit op kan lossen?

Alvast bedankt!!
 
clear de beide floats in de css van de footer
en dan nog even wat spelen met de margin left van "id midden"

gr leon
 
zoiets?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://wwww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	</head>
	<body>

<style TYPE="text/css">

#wrapper{ border:#000 solid medium;
overflow: auto;
width: 100%;
}
    
#header{
    border:medium solid #F9C;}
 
#links {
    border: medium solid #0F3;
    width: 20%;
    float:left;}
 
#midden{
    border: medium solid #C03;
    width:60%;
    position: relative;}
    
 
#rechts {
    border: medium solid #63C;
    width: 20%;
    float:right;}
 
#footer {
position: absolute;
  bottom: 0px;
  width: 95%;
  text-align: right;
border:medium solid #F9C;}

</style>
<div id="wrapper">
<div id="header">Hier wordt de inhoud voor  id "header" weergegeven</div>
<div id="links">Hier wordt de inhoud voor  id "links" weergegeven</div>
<div id="rechts">Hier wordt de inhoud voor  id "rechts" weergegeven</div>
<div id="midden">Hier wordt de inhoud voor  id "midden" weergegeven</div>
<div id="footer">Hier wordt de inhoud voor  id "footer" weergegeven</div>
</div>


</body>
 
bedankt voor jullie snelle reacties!!

ik heb het met de optie van leon (clear:both) op kunnen lossen
HTML: 
#footer {
	border:medium solid #F9C;
	clear:both;
}

thanks!
 
HTML: 
<div id="wrapper">
<br>
<div id="header">Hier wordt de inhoud voor  id "header" weergegeven</div>\
<br>
<div id="links">Hier wordt de inhoud voor  id "links" weergegeven</div>
<br>
<div id="rechts">Hier wordt de inhoud voor  id "rechts" weergegeven</div>
<br>
<div id="midden">Hier wordt de inhoud voor  id "midden" weergegeven</div>
<br>
<div id="footer">Hier wordt de inhoud voor  id "footer" weergegeven</div>
</div>

Misschien is dit script iets? Gewoon de <br> tag ertussen zetten, dat is eigenlijk gewoon 'enter'.

MrMorrie1
 
Laatst bewerkt:
Oh ja, je programmeert in het Engels, dus links wordt left, midden wordt center en rechts wordt right.
 
@MrMorrie1 reactie #5:
Die <br> zal niet helpen om de #footer te clearen. Heb je je inzending in een html-pagina geplakt en uitgeprobeerd? - Doe ik meestal, om niet op m'n snufferd te gaan. ;)

@MrMorrie1 reactie #6:
Als het om de waarden van css-eigenschappen gaat, moeten die inderdaad in het Engels opgegeven worden. bv.:
Code: 
#kop {
   text-align: center; /* dit gaat in de css-voertaal: Engels jargon */
   }
Maar als het om de namen van een id of class (of name) van een element gaat, dan kan je het ook in hottentottententententoonstellingsdialect doen:
Code: 
[COLOR="navy"]<div class="karawoets">...</div>[/COLOR]

[I]met:[/I]
.karawoets { /* willekeurige naam (maar niet beginnen met getal; geen rare tekens) #/
   text-align: center;
   }
Dus:
Code: 
[COLOR="navy"]<div id="rechts">...</div>[/COLOR]

[I]met:[/I]
#rechts {
   text-align: right;
   }
mag gewoon.
Je kunt zelfs ook spiegeltaal gebruiken:
Code: 
[COLOR="navy"]<div id="right">...</div>[/COLOR]

[I]met:[/I]
#right {
   text-align: left;
   }
Hoewel het niet aan te raden is om standaard-css begrippen als eigen namen te gaan gebruiken, en je over x maanden vergeten bent dat het spiegelbeeld-taal is:
dit is wel valid CSS. :d

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan