help snel!(beloning)

Hallo,

Ik kan nu een beetje layouts coderen dus onder elkaar.
Maar nu vraag ik me af hoe ik links en rechts naast het midden content ook nog een vak kan zetten.
Een vergoeding van 0,1 punten voor de gene die het oplost.

Index html code:

<!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>Blurb.nl</title>
                
                <link rel="stylesheet" type="text/css" href="style.css" />
        </head>
        
        <body>
        </body>
<center>
<div id="header"></div>

<div id="balk">&nbsp;<a href="http://www.ralphjansen.nl"><p1>Homepage</p1></a> &nbsp;<a href="#"><p1>Nieuws</p1></a> &nbsp;<a href="#"><p1>Forum</p1></a></div> 
<div id="shout">
&nbsp;<h1>Welkom</h1></div>
<div id="midden">&nbsp;test 1,2,3 </div>
<div id="footer">test 1,2,3 </div>  
</center>
</html>

Css:

html
    { 
        background-image: url(images/achtergrond.png); 
    }
#header
    {
        background-image: url(images/header.png); 
        width: 98px;
        height: 90px;
        border-left: 1px solid #FFFFFF;
        border-right: 1px solid #FFFFFF;
        margin: 0px auto;
    } 
#balk 
    {
        background-image: url(images/balk.png); 
        width: 959px;
        height: 38px;
        margin: 0; 
        text-align:left; 
        padding-top: 13px; 
    }
#shout 
    {
        background-image: url(images/shoutbalk.png); 
        width: 959px;
        height: 91px;
        margin: 0; 
        text-align:center; 
        padding-top: 5px; 
    }
#midden 
    {
        background-image: url(images/midden.png); 
        width: 96px;
        height: 93px;
        margin: 0; 
        text-align:left; 
        
    }
#footer 
    {
        background-image: url(images/footer.png); 
        width: 95px;
        height: 94px;
        margin: 0; 
        text-align:center; 
        
    }
p
    {
        font-family: Verdana;
        font-size: 12px;
        color: #000000;
    }
p1
    {
        font-family: Verdana;
        font-size: 14px;
        color: #000000;
    }
        a:hover {
        color: #ffffff;
    }
h1 {
    font-size: 16px;
    color: #e43708;
}

        a:hover {
        color: #ffffff;
    }

groetjes,

Volgens mij, weet ik niet helemaal zeker:

Quote:
#left_banner {

width: (hier de breedte zetten)px;

height: (Hier de hoogte)px;

position: absolute;

top: 110px;

left: 10px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

Je moet wel de nodige dingen aanpassen, en als je rechts wil verander je left in richt.

Hoop dat die het doet, dit script is zo even gemaakt dus ik zou niet weten of die bij jou werkt hoor, verwacht van wel

Je gaat dan te werk met float: left;
bv css:

#left { width: 200px; float:left; margin: 0;}
#center { width: 500px; float:left; margin: 0 0 0 25px;}
#right { width: 200px; float:left; margin: 0 0 0 25px;}

bv html:

<div id="left> Tekst linkerkant</div>
<div id="center> Tekst midden</div>
<div id="right> Tekst rechterkantkant</div>

De width moet je uiteraard aanpassen aan je eigen layout. De margin 25px is ook een voorbeeld, dit is om ruimte tussen de vakken te creëren. Hij staat nu dus op margin-left 25 px (4e plek) dit kan je ook aanpassen aan je eigen layout.

Bedankt voor de reacties ik zit nu op school zal straks thuis even uitproberen

Sorry voor dubbelpost maar het werkt niet hier: http://ralphjansen.nl/ kun je het voorbeeld zien en hoe doe ik dan afbeeldingen weergeven?

hmz sorry die moet een " zijn

<div id="left"> Tekst linkerkant</div>
<div id="center"> Tekst midden</div>
<div id="right"> Tekst rechterkantkant</div>

en afbeeldingen kun je ook in je css verwerken
bv:

#right { width: 200px; float:left; margin: 0 0 0 25px; background: url(map/afbeelding.ext);}

Dankjewel Marjolein, De punten stuur ik over EDIT: Ik heb 3 afbeeldingen voor een layout kan ik dan bijv gewoon in css.
BACKGROUND-TOP doen

hoe bedoel je 3 afbeeldingen?
Als je je layout in 3 stukken heb "geknipt" dan zet je die met 3 divjes weer aanelkaar lijkt me?
Of je moet het anders bedoelen?

Als ik 1 vak had normaal had ik het in 3 divs dus 3 afbeeldingen maar nu zijn er ook 3 divs maar met maar 1 afbeelding dus allen de top,mid of bottom

dus als ik het goed begrijp, wil je een vak maken bv in de linkerkolom (left in mijn voorbeeld) die bestaat uit 3 afbeeldingen, top, mid en bottom?
En in mid komt dan de tekst enzo?

Ja dat klopt en voor center en right ook

oke dan kun je het zo doen:
css:

#left { width: 200px; float:left; margin: 0;}
#center { width: 500px; float:left; margin: 0 0 0 25px;}
#right { width: 200px; float:left; margin: 0 0 0 25px;}
.vaktop { width: ..px; height: ..px; background: url(map/top.ext);}
.vakmid { width: ..px; height: ..px; background: url(map/midden.ext);}
.vakbottom { width: ..px; height: ..px; background: url(map/bottom.ext);}

Als je .vakmid wil mee laten rekken met de tekst dan doe je ipv heigth:..px; > overflow:hidden;

Je html wordt dan zo:

<div id="left">
  <div class="vaktop"></div>
  <div class="vakmid">Hier je tekst enzo</div>
  <div class="vakbottom"></div>
</div>
<div id="center"> 
  <div class="vaktop"></div>
  <div class="vakmid">Hier je tekst enzo</div>
  <div class="vakbottom"></div>
</div>
<div id="right">
  <div class="vaktop"></div>
  <div class="vakmid">Hier je tekst enzo</div>
  <div class="vakbottom"></div>
</div>

Omdat je vaktop, vakmid en vakbottom nu meerder keren ga gebruiken moet je dit met een class doen, dus met een . ervoor. Als je een div maar 1x gaat gebruiken dan doe je dit met # en een id. En dit is maar puur een voorbeeld.