Allereerst, mijn code werkt wel :) zie het resultaat maar heb hem opnieuw geupload op de server en dan ziet het er zo uit.

http://stefan.ideas4design.nl/stijn/henk.html

Moet de tekst ook breder pas dan dit toe :

body
{
width: 1024px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin: 0px auto;
}

of dit:

body
{
width: 750px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin: 0px auto;
}

Bij de width van de body kan je dus de breedte van je website aanpassen. Ik gebruik zelf nooit een width bij body en gebruik het in de container. Dit doe ik omdat ik zo min mogelijk aan het fundament ( je body) dus wil sleutelen, omdat deze van nature al goed staat.

Nu vraag je over padding, margin en div.

Allereerst div, er is geen verschil in div's maar ze zijn wel onderverdeeld in twee delen. Je hebt namelijk een div op deze manier

Code:

<div id="">

en je hebt een div op deze manier:

Code:

<div class="">

.
Nu vraag je je misschien al waarom je die verschillen hebt. Een id geeft aan dat deze div uniek is, net als jou id-kaart uniek is, je hebt je eigen sofie nummer etc. Een bepaalde div, dus bijvoorbeeld

Code:

<div id="container">

mag maar eenmaal voorkomen op de pagina. Een class geeft aan dat je deze div meerdere keren op je pagina gaat gebruiken en hij dus niet uniek is, maar voor meerdere doeleinden.

Padding: Padding houdt in dat je de tekst op een dusdanige manier forceert om in een bepaald vlak te gaan, dat het vak uit zet ( Je div zet bijvoorbeeld uit ). Padding is heel handig als je wat extra ruimte wilt maken, maar let op, want het vervormt meestal je div.

Margin: Margin is zo als de naam al zegt een marge, het geeft dus aan hoeveel de div van een andere div moet afstaan. Als je bijvoorbeeld het volgende hebt:

Code:

<div id="header">   HIER KOMT UW LOGO </div>

<div id="content"> Tekst Tekst Tekst Tekst Tekst Tekst Tekst </div>

Dan wil je bijvoorbeeld dat je tekst ongeveer 10px onder je header komt te staan. Je kan dit dan makkelijk oplossen door gebruik te maken van de css regel :

Code:

#content
{
margin-top: 10px;

}

Door dit te gebruiken, komt de content ( de tekst ) 10px onder je header.

Dan had je nog de vraag, waarom ik geen div ervoor deed?! Mijn antwoord: dat is helemaal niet nodig, door de # geeft je al aan dat het een div is. En let op er zit ook nog verschil tussen het volgende.

Want zoals net al gezegd heb je verschillende soorten div's , je hebt de id en de class. Je kan heel makkelijk in css aangeven wat voor div het wordt. Zo zal de div : <div id="container"> worden aan gegeven in css zoals dit

Code:

#container
{


}

Het gaat hier om de aanduiding met #.
Je kan ook al aangeven in je css dat je een class wilt maken, dit doe je door heel simpel een punt ervoor te zetten. Dus stel je wilt de class tekst invoegen, dan doe je dat als volgt:

Code:

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

css wordt dan:

.tekst
{
      color: #FFFFFF;
      font-family: Verdana;
}

Hopelijk wordt je hier wat wijzer van :)

Bedankt, maar ik had dus mijn css aangepast en ook de html.
Kunt u het dan laten werken met mijn vorige post?
En zorgen dat ik dan die overige dingen niet nodig heb.

Beetje oefenen en zelf proberen kan geen kwaad :)
Maar goed voor deze keer: Zo ziet het geheel er een stuk beter uit, ga er zelf maar aan rommelen om te zien wat het doet. Want door het te visualiseren wat je doet, leer je een stuk sneller.

css:

Code:

html
{
background-color: #FFFFFF;
}

body
{
width: 1000px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin: 0px auto;
}

#container
{
   margin: 0px auto;
}

#header
{
background-image: url('images/stijnadams.jpg');
background-repeat: repeat-x;
width: 325px;
height: 100px;
}

#menu ul
{
margin: 0px;
padding-left: 10px;
list-style: none;
height: 25px;
width: 279px;
background-color: #CBCBCB;
}

#menu ul li
{
float: left;
height: 25px;
}

#menu ul li a
{
display: block;
overflow: hidden;
height: 25px;
padding: 5px 8px 0px 8px;
font-family: Verdana;
color: #ffffff;
font-size: 11px;
text-decoration: none;
font-weight: bold;
}

#menu ul li.active a:hover
{
padding: 5px 8px 0px 8px;
background-color: #ffffff;
color: #000000;
height: 20px;
}

#menu ul li.active a
{
padding: 5px 8px 0px 8px;
background-color: #ffffff;
color: #000000;
height: 20px;
}

#menu ul li a:hover
{
padding: 5px 8px 0px 8px;
background-color: #ffffff;
color: #000000;
height: 20px;
}


#content
{
       background-color: #FFFFFF;  
       color: #A52A2A;
       font-family: Verdana;
       font-size: 12px;
}

.tekst
{
       margin-bottom: 50px;
       margin-top: 30px;
}

#contentfooter
{
padding-top: 10px;
font-family: Verdana;
font-size: 25px;
color: #F00;
font-weight: normal;
margin: 0 0 9px 0;
border-bottom: 1px dotted #333333;
}

#footer
{
width: 89%;
background-color: #CBCBCB;
text-align: center;
padding: 2px 0px 2px 0px;
clear: both;
margin:0;
float: left;
font-family: Verdana;
font-size: 11px;
color: #ffffff;
}

#footer a
{
color: red;
text-decoration: none;
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Stijn Adams | Internet diensten</title>

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

<body>

<div id="container">

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

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Diensten</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div id="content">
<div class="tekst">
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<br />
<br />

<div class="rc">

<h2 class="why"><span>Why do we use it?</span></h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum
as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>


<div id="footer"><span lang="nl-be">&nbsp;</span>Design: <a href="#">Stijn Adams | Internet diensten</a></div>
</div>
</body>

</html>

Succes!

Als ik mijn eigen teksten toevoeg, lijkt het niet zo mooi.
Ik weet niet.

Voorbeeldje daarvan?
En wat bedoel je met eigen teksten toevoegen?!
Dat lorem ipsum vervangen?!

Je kan de opmaak veranderen he,
daarvoor moet je wel wat experimenteren.

proefondervindelijk leren :D