login  Naam:   Wachtwoord: 
Registreer je!
 Forum

3 kolommen in XHTML/CSS (Opgelost)

Offline HomeServNL - 02/03/2007 10:35 (laatste wijziging 02/03/2007 10:51)
Avatar van HomeServNLNieuw lid Goededag iedereen,

Ik ben op dit moment bezig met het maken van een script. Hiervoor wil ik een layout maken die op 3 kolommen is gebaseerd. Aangezien ik vanaf nu geen tabellen meer wil gebruiken ben ik op divjes uit gekomen.

Echter kom ik er niet uit hoe ik nu 3 kolommen moet maken in (X)HTML en CSS...
Ik heb al wel wat gemaakt maar dit geeft niet het gewenste resultaat.

**EDIT**
Probleem is opgelost...
Code heb ik hieronder staan voor als andere het nog een keertje zoeken.
**EDIT**

M'n body:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <body>
  2. 	<div id="wrapper">
  3. 		<!-- Start header -->
  4. 		<div id="header">
  5. 			PageTitle
  6. 		</div>
  7. 		<!-- End header -->
  8.  
  9. 		<!-- Start main content -->
  10. 		<div id="left">
  11. 			LEFT
  12. 		</div>
  13. 		<div id="middle">
  14. 			MIDDLE
  15. 		</div>
  16. 		<div id="right">
  17. 			RIGHT
  18. 		</div>
  19. 		<!-- End main content -->
  20.  
  21. 		<!-- Start footer -->
  22. 		<div id="footer">
  23. 			Copyright &copy;2007 - PageTitle.nl
  24. 		</div>
  25. 		<!-- End footer -->
  26. 	</div>
  27. </body>


M'n CSS File:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. /* CSS Document */
  2.  
  3. #wrapper {
  4. 	width:800px;
  5. 	margin:auto;
  6. 	padding:0px;
  7. 	background-color:#FFFFCC;
  8. 	border:solid 1px #000000;
  9. 	display:block;
  10. }
  11.  
  12. #header {
  13. 	text-align:center;
  14. 	font-weight:bold;
  15. 	font-size:xx-large;
  16. 	border-bottom:solid 1px #000000;
  17. }
  18.  
  19. #footer {
  20. 	border-top:solid 1px #000000;
  21. 	font-size:9px;
  22. 	text-align:right;
  23. 	clear:both;
  24. }
  25.  
  26. #left {
  27. 	float:left;
  28. 	width:100px;
  29. 	vertical-align:top;
  30. 	background-color:#CCCCCC;
  31. }
  32.  
  33. #middle {
  34. 	vertical-align:top;
  35. 	background-color:#CCCCCC;
  36. 	width:600px;
  37. 	float:left;
  38. }
  39.  
  40. #right {
  41. 	float:right;
  42. 	width:100px;
  43. 	vertical-align:top;
  44. 	background-color:#CCCCCC;
  45. }

3 antwoorden

Gesponsorde links
Offline Ultimatum - 02/03/2007 10:51
Avatar van Ultimatum PHP expert Wat voor resultaat krijg je? En je moet je middelste div ook een float geven..
Offline HomeServNL - 02/03/2007 10:53
Avatar van HomeServNL Nieuw lid Probleem is opgelost...
De uiteindelijke code heb ik in mijn start post gezet voor andere die hier interese in hebben.
Offline xSc - 02/03/2007 12:58
Avatar van xSc Onbekend Als je bijv. float: left; gebruikt voor 3 kolommen, dan komen die gewoon na elkaar (tenzij het zaakje te breed is o.i.d.). Met clear: left; 'breek je de regel af'.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.19s