Vlakken css

Ik vraag me af hoe je "vlakken"aanmaakt in css. Ik bedoel bijv. een blauw vlak waar ik tekst enz in kan zetten.

Wat zijn de codes hiervoor? zowel css als html

naast elkaar of onder elkaar?

Over het algemeen gebruiker we hier een div voor

maken jullie eerst zon vlak in photoshop?, en daarna als div verwerken? dit heb ik wel zo gedaan met en menu, en daarna heb ik tekst erin gezet

toevoeging op 26 oktober 2011, 18:55:05:
waarom komt mijn div1 niet in beeld
.html:

Spoiler tonen

Heerenveen Nieuws

.css:

Spoiler tonen

@charset "utf-8";
/* CSS Document */

body { height: 100%; margin: 0; padding: 0; background:#FFFFFF; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;}

#header {background: url(header.png); width: 900px; height: 160px; margin: 0;}

#menu {background: url(menu.png); width: 900px; height: 20px; margin: 0;}
#menuitems {text-align: center; padding-top: 5px;}
#menuitems a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#menuitems a:hover { color: #f72d2d;}
#menu2 {background: url(menu2.png); width: 143px; height: 400px; margin: 0;}
#div1 {background:#2b5cfd; width:400px; height:auto; margin: 0;}

Vervang " height:auto; " door bijvoorbeeld " height:100px; "

// of zet iets tussen

Ik heb nog een vraag:

Zo ziet mijn site er nu uit:

Hoe krijg ik nu nog zon balk rechts die de site "dicht" maakt maar die ook automatisch mee beweegt?

toevoeging op 26 oktober 2011, 21:48:08:
dit zijn mijn .html:

Spoiler tonen

Heerenveen Nieuws

en .css:

Spoiler tonen

@charset "utf-8";
/* CSS Document */

body { height: 100%; margin: 0; padding: 0; background:#FFFFFF; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;}

#header {background: url(header.png); width: 900px; height: 160px; margin: 0;}

#menu {background: url(menu.png); width: 900px; height: 20px; margin: 0;}
#menuitems {text-align: center; padding-top: 5px;}
#menuitems a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#menuitems a:hover { color: #f72d2d;}
#div1 {background-color: #2b5cfd; width:200px; height:auto; margin: 0; text-align:center; padding-top: 5px;}
#div1 a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#div1 a:hover { color: #f72d2d;}
#footer {background-color: #2b5cfd; width:900px; height:auto; margin: 0; text-align:center;}

Kan ALSJEBLIEFT iemand helpen?

Jee wilt links die blauwe balk, dan een stuk wit en dan weer een blauwe balk?
CSS:

#content {width: 900px; overflow:hidden; margin:0;}
#links{background-color: #2b5cfd; width:200px; margin: 0; float:left;}
#midden {background: #fff; width: 490px; margin: 0 0 0 5px; float:left;}
#rechts{background-color: #2b5cfd; width:200px; margin: 0 0 0 5px; float:left;}

HTML:

<div id="content">
   <div id="links">alles wat links in de balk moet</div>
   <div id="midden"> alles wat in de midden komt</div>
   <div id="rechts">alles wat rechts in de balk moet</div>
</div>

edit: even nog wat verbeterd nav je laatst geplaatste css

Marjolein schreef:

Jee wilt links die blauwe balk, dan een stuk wit en dan weer een blauwe balk?
CSS:

#content {width: 900px; overflow:hidden; margin:0;}
#links{background: url(menu2.png); width: 143px; margin: 0; float:left;}
#midden {background: #fff; width: 600px; margin: 0 0 0 7px; float:left;}
#rechts{background: url(menu2.png); width: 143px; margin: 0 0 0 7px; float:left;}

HTML:

<div id="content">
   <div id="links">alles wat links in de balk moet</div>
   <div id="midden"> alles wat in de midden komt</div>
   <div id="rechts">alles wat rechts in de balk moet</div>
</div>

oh wacht ff, ik dacht dat menu1 de balk links was, even verbeteren
Ik wil eigenlijk een dun lijntje van ongeveer 25 px helemaal rechts zodat de site dicht is. Hierin moet eigenlijk geen tekst. Ik wil in het witte vak tekst plaatsen .

En dat de layout mee uitrekt als de tekst in het witte vlak langer/korter word.

Snap je? en kun je me misschien hiermee helpen?

CSS:

#content {width: 875px; overflow:hidden; border-right: 25px solid #2b5cfd; margin:0;}
#links{background-color: #2b5cfd; width:200px; margin: 0; float:left;}
#midden {background: #fff; width:690px; margin: 0 0 0 10px; float:left;}
.tekst {padding:3px;}

HTML:

<div id="content">
   <div id="links">alles wat links in de balk moet</div>
   <div id="midden"><div class="tekst">alles wat in de midden komt</div></div>
</div>

Edit: zo moet volgens mij wel werken, ik heb al een div gemaakt om je tekst in te zetten, hiervoor gebruik ik altijd een class zodat je m meerdere keren kan gebruiken. Je kan m bv ook voor links gebruiken

Marjolein schreef:

oke, ff de code aanpassen voor je...komt zo dan een edit

Thanks maar moet ik dan nog een apparte div maken om in het witte vlak tekst te kunnen plaatsen?

toevoeging op 26 oktober 2011, 2253:

Marjolein schreef:

CSS:

#content {width: 875px; overflow:hidden; border-right: 25px solid #2b5cfd; margin:0;}
#links{background-color: #2b5cfd; width:200px; margin: 0; float:left;}
#midden {background: #fff; width:690px; margin: 0 0 0 10px; float:left;}
.tekst {padding:3px;}

HTML:

<div id="content">
   <div id="links">alles wat links in de balk moet</div>
   <div id="midden"><div class="tekst">alles wat in de midden komt</div></div>
</div>

Edit: zo moet volgens mij wel werken, ik heb al een div gemaakt om je tekst in te zetten, hiervoor gebruik ik altijd een class zodat je m meerdere keren kan gebruiken. Je kan m bv ook voor links gebruiken
Nu krijg ik dit
.html:

Spoiler tonen

Heerenveen Nieuws

.css:

Spoiler tonen

@charset "utf-8";
/* CSS Document */

body { height: 100%; margin: 0; padding: 0; background:#FFFFFF; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;}

#header {background: url(header.png); width: 900px; height: 160px; margin: 0;}

#menu {background: url(menu.png); width: 900px; height: 20px; margin: 0;}
#menuitems {text-align: center; padding-top: 5px;}
#menuitems a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#menuitems a:hover { color: #f72d2d;}
#div1 {background-color: #2b5cfd; width:200px; height:auto; margin: 0; text-align:center; padding-top: 5px;}
#div1 a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#div1 a:hover { color: #f72d2d;}

#content {width: 875px; overflow:hidden; border-right: 25px solid #2b5cfd; margin:0;}
#links{background-color: #2b5cfd; width:200px; margin: 0; float:left;}
#midden {background: #fff; width:690px; margin: 0 0 0 10px; float:left;}
.tekst {padding:3px;}

#footer {background-color: #2b5cfd; width:900px; height:auto; margin: 0; text-align:center;}

Dit komt omdat divs niet naast elkaar gaan staan, maar onder elkaar, je moet floats toevoegen om dit zo te krijgen:

CSS

Spoiler tonen

@charset "utf-8";
/* CSS Document */

body { height: 100%; margin: 0; padding: 0; background:#FFFFFF; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;}

#header {background: url(header.png); width: 900px; height: 160px; margin: 0;}

#menu {background: url(menu.png); width: 900px; height: 20px; margin: 0;}
#menuitems {text-align: center; padding-top: 5px;}
#menuitems a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#menuitems a:hover { color: #f72d2d;}
#div1 {background-color: #2b5cfd; width:200px; height:auto; margin: 0; text-align:center; padding-top: 5px; float:left; }
#div1 a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#div1 a:hover { color: #f72d2d;}

#content {width: 675px; overflow:hidden; border-right: 25px solid #2b5cfd; margin:0; float:right; }
#links{background-color: #2b5cfd; width:200px; margin: 0; float:left;}
#midden {background: #fff; width:690px; margin: 0 0 0 10px; float:left;}
.tekst {padding:3px;}

#footer {background-color: #2b5cfd; width:900px; height:auto; margin: 0; text-align:center;}