PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
T

Div links, in het midden en rechts

Door Timo Kleinhout op 31-12-2009 15:05
1.077 views
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
M
Milo
31-12-2009 17:47
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 ;)
T
Timo Kleinhout
31-12-2009 17:50
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???
M
Milo
31-12-2009 17:57
Probeer mijn code eens staat boven jou post ;)
M
Milo
31-12-2009 18:12
Astu ;)

Reageren

Inloggen om te reageren