vraag over html

Hallo omdat ik geen beter forum wist vraag ik het hier,
Voor m’n eindexamen html op school moet ik een zelf ontworpen website te maken. Nu lukt me iets niet ik wil een footer over de totale breedte van het browser window. Dit kan je doen door in css je body width op 100% te zetten en dat van je footer ook. Maar ik wil ook dat m’n pagina in het midden van het window staat wat je moet doen door je body width op een bepaald aantal px te zetten en dan met margin: auto. Maar wat niet lukt is deze beide dingen combineren. Dus m’n vraag: wat moet ik doen om een footer toch een width van 100% te geven terwijl m’n pagina in het midden van mijn window staat.

Hoi,

Ik heb hier onder de code, het lijkt me dat je dit bedoelt?
Ik heb gewoon gewerkt met 2 verschillende div’s, een daar van is 1000px, en wordt gecentreerd in het midden.
De tweede (de footer) staat onderaan met de volledige lengte van het scherm.

----------CODE----------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
<style type="text/css">
html, body{padding:0;margin:0;border:0;height:100%;}
body {
	background-color: #FFFFFF;
}
#content_container {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	background-color: #D5D5D5;
}
#content_footer {
	background-color: #2D2D2D;
	width: 100%;
	color: #FFFFFF;
}
</style>
</head>

<body>
<div id="content_container"><br />
  <br />
  <br />
  <br />
  HIER KAN JE JE CONTENT PLAATSEN<br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</div>
<div id="content_footer"><br />
  <br />
  <br />
HIER KOMT JE FOOTER<br />
<br />
<br />
<br />
<br />
</div>
<p> </p>
</body>
</html>

-----CODE------

Als het niet helemaal is wat je wilt, zeg het dan, dan probeer ik je verder te helpen.

Groetjes, Lenny
Succes

Dat kan op heel veel manieren, bijvoorbeeld met twee div

div#pagina {width:80%; margin:10px auto 10px auto;}

div#footer {width:100%;}

Ik lees net nog eens je vraag, wat je fout deed:

Je werkt alleen met je body als dit echt nodig is, zoals een achtergrond kleur. Anders kan je daar beter af blijven.

Ik weet niet of jij weet wat een div is? Je maakt er een door in de code “<div id=“div_naam”>” te schrijven. En je sluit 'm door “</div>” te schrijven. Daar tussen in komt al je content, het makkelijkste is om die te bewerken via een webeditor, dreamweaver etc.

Als je nu een aanpassing wilt maken aan de breedte of hoogte of een achtergrond wilt in voegen dan doe je dat idd het beste via css. Dan maak je in css een verwijzing naar je div. Zoals dit:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Voorbeeld van div's&lt;/title&gt;
&lt;style type="text/css"&gt;
body { 
	background-color: #FFFFFF;
}
#div_naam { /*/ &lt;---- HIER ZET JE DE GEGEVENS VAN DE ODNERSTAANDE DIV /*/
	background-color: #00C; /*/ &lt;---- DIE IS NU BLAUW GEKLEURD /*/
	width: 1000px;  /*/ &lt;---- DIE IS NU 1000 PIXELS BREED /*/
	
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="div_naam"&gt;&lt;br /&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Nogmaals, succes!

Hallo bedankt eerst en vooral bedankt voor de reacties ik probeer het uit.
Hier nog enkele afbeelding om te verduidelijken wat ik eigenlijk bedoel.

de code in html:

css:

de body in css:

hoe men pagina er nu uit ziet:

Wat ik dus wil is dat die onderste balk op de bodem van het browser venster komt en de breedte hiermee mee schaalt.

@LennyKr

Ik heb het als volgt opgelost:

ik heb alle content van m’n body in 1 div gezet wat ik heb afgeleid uit jouw schermafbeelding bedankt dus.
Het volgende wat me nu nog niet lukt is om deze balk op de bodem te krijgen van het venster hoe groot deze ook is. overigens lukt het me ook niet om m’n background image mee te laten schalen met het venster iets wat ik ook graag zou hebben.

Hiero :

http://basilico.byethost8.com/includes/wide.html

De code kan je in de bron zien.

@tomc

Om je footer altijd onder aan je pagina te hebben moet je body height 100% zijn.

Dus zet bovenaan in je css code deze regel:

html, body{padding:0;margin:0;border:0;height:100%;}

De volgende stap is om de footer altijd op het laagste punt te laten staan. Zet daarvoor in de css code VAN JE FOOTER de volgende regel:

#footer {
	width: 100%;
	bottom: 0;
}

Stel dat het je niet lukt, dan kan je me ook de volledige code doorspelen, dan maak ik de nodige aanpassingen.

Afgegaan op de code uit de screenshots heb ik de volgende code gemaakt. Uiteraard mist het wel nog de delen waar van je geen screenshots hebt gemaakt. Wellicht kan je het mengen met de code die je al hebt, en dan werkt het. Succes er mee:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Live Life Love&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;style type="text/css"&gt;
html, body{padding:0;margin:0;border:0;height:100%;}
body {
	background-color: #000000;
	background-image: url(images/achtergrond.png);
}
#content {
	width: 960px;
	font-family: 'Oswald', sans-serif;
	margin:auto;
}
#footer {
	width: 100%;
    bottom: 0;
	background-color:#FFFFFF;
	text-align:center;
	height:60px;
	padding-top:10px;
	padding-bottom:10px;
	opacity: 0.7;
}
&lt;/style&gt;
&lt;/head&gt;
	&lt;body&gt;
		&lt;div id="content"&gt;
			&lt;div id="home"&gt;
				&lt;p&gt;Home&lt;p&gt;
			&lt;/div&gt;
			&lt;div id="na"&gt;
				&lt;p&gt;New arrivals&lt;p&gt;
			&lt;/div&gt;
			&lt;div id="na"&gt;
				&lt;p&gt;Contact&lt;p&gt;
			&lt;/div&gt;
			&lt;div id="lll"&gt;
				&lt;p&gt;Live Life Love&lt;p&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;

Bedankt voor de snelle en uitgebreide hulp het is me intussen gelukt door jullie hulp en door wat te experimenteren.`
Nogmaals bedankt.

http://ryanfait.com/sticky-footer/