Hallo,

Ik zit met een probleem! Ik ben een beginnende webdesigner en zit met een probleem. Ik wil een site maken waarin de content links, in het midden en rechts staat met behulp van

<div id=right> Tekst dat rechts hoor te staan</div>
<div id=left> Tekst dat links hoor te staan</div>
<div id=center> Tekst dat in het midden hoor te staan</div>

Alleen ik weet niet hoe het moet in de css en html, en kan op google niets vinden. Het zou wel niet zo moeilijk zijn en daarom kom ik bij jullie vragen! de layout van m'n site heb ik al hieronder een link van hoe het moet worden (globaal geschets!).

http://img51.imageshack.us/img51/5056/voorbeeld.png

b.v.d

Timo Kleinhout
Bijna klaar moment...


EDIT:
Ik denk dat jij uit eindelijk dit wilt:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Titel</title>
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	
	<body>
		<div class="container">
			<div class="header">
			</div>
		
			<ul class="menu">
				<li><a class="men" href="">Sample</a></li>
				<li><a class="men" href="">Sample</a></li>
				<li><a class="men" href="">Sample</a></li>
				<li><a class="men" href="">Sample</a></li>
			</ul>
		
			<div class="left">
				Links
			</div>
			<div class="middle">
				Midden
			</div>
			<div class="right">
				Rechts
			</div>
		</div>
		<div class="footer">
			&copy; JOUWSITE.NL
		</div>
	</body>
</html>


style.css

body {
	margin: 10px;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
}

div.container {
	width: 815px;
	min-height: 400px;
	overflow: hidden;
	
	text-align: left;
	margin: 0px auto;
	
	background-image: url('http://www.habspace.nl/test/content.bmp');
}
	div.header {
		width: 815px;
		height: 143px;
		
		background-image: url('http://www.habspace.nl/test/logo.bmp');
	}
	
	ul.menu {
		width: 815px;
		height: 25px;
		
		margin: 0px;
		padding: 0px;
		
		list-style: none;
		border-top: 1px solid #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
		
		background-image: url('http://www.habspace.nl/test/balk.bmp');
	}
	ul.menu li {
		margin: 0px;
		padding: 0px;
		float: left;
	}
	ul.menu a.men {
		height: 25px;

		float: left;
		margin: 0px;
		margin-left: 20px;
		padding: 0px;
		
		color: #FFFFFF;
		line-height: 25px;
		text-decoration: none;
	}
	
	div.left {
		width: 168px;
		
		float: left;
		margin-right: 5px;
	}
	div.middle {
		width: 469px;
		float: left;
	}
	div.right {
		width: 168px;
		
		float: left;
		margin-left: 5px;
	}
div.footer {
	width: 815px;
	height: 25px;
	line-height: 25px;
	
	color: #FFFFFF;
	margin: 0px auto;
	
	background-image: url('http://www.habspace.nl/test/balk.bmp');
}



PS: zou je jou scripts in code tags kunnen zetten anders ziet de lay out van phphulp er niet meer uit ;)
Ja dat wel ik ben alweer iets verder:



#container  {
width: 815px;
margin: 10px auto 10px auto;
}

body { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } 


#total {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left; 
} 

#header {
display: block;
width: 815px;
height: 143px;
clear: both;
background: url(http://www.habspace.nl/test/logo.bmp) no-repeat;
}

#content {
display: block;
padding: 8px 8px 8px 8px;
width: 815px;
background: url(http://www.habspace.nl/test/content.bmp)  repeat-y;
}

div#content #left{ 
float: left; 
width: 100px;
} 

div#content #middle{ 
float: center; 
width: 500px;
} 

div#content #right{ 
float: right; 
width: 100px;
} 


#balk {
display: block;
width: 815px;
height: 25px;
background: url(http://www.habspace.nl/test/balk.bmp) no-repeat;
}





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>
Titel
  </title>
  <link href="css.css" rel="stylesheet" type="text/css">
 </head>
 <body>
<div id="container">

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

   <div id="balk">
   </div>

   <div id="content">
HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!
   </div>

   <div id="balk">
   </div>

   <div id="content">

<div id="left">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
</div>

<div id="middle">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
</div>

<div id="right">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
</div>

</div>
 </body>
</html>


Bijna dus, weet iemand de laatste eindjes nog?? en de grijze achtergrond waar dus die 3 kolommen in staan moet doorlopen maar stopt weet iemand daar ook miss. iets voor???
Probeer mijn code eens staat boven jou post ;)
Astu ;)

Reageren