login  Naam:   Wachtwoord: 
Registreer je!
 Forum

simpel boxmodel faalt (Opgelost)

Offline Emonk - 16/07/2011 11:02 (laatste wijziging 16/07/2011 11:02)
Avatar van EmonkLid Beste, onderstaande code gebruik ik voor een simpel boxmodel voor een nieuwe website:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. 	<head>
  4. 		<title>Website op CS v1.0</title>
  5. 		<style type="text/css">
  6. 			body {
  7. 				margin: 0; padding: 0;
  8. 			}
  9. 			#header {
  10. 				width: 100%; height: 100px;
  11. 				top: 0; left: 0;
  12. 				background-color: #00f;
  13. 				z-index: 1;
  14. 			}
  15. 			#logo {
  16. 				width: 100px; height: 100px;
  17. 				top: 0; left: 0;
  18. 				z-index: 2;
  19. 			}
  20. 			#title {
  21. 				height: 100px;
  22. 				top: 0; left: 100px;
  23. 				z-index: 3;
  24. 			}
  25. 			#login {
  26. 				width: 20%; height: 100px;
  27. 				top: 0; left: 80%;
  28. 				z-index: 4;
  29. 			}
  30. 			#menu {
  31. 				width: 100%; height: 80px;
  32. 				top: 100px; left: 0;
  33. 				background-color: #0f0;
  34. 				z-index: 1;
  35. 			}
  36. 			#container {
  37. 				width: 100%; height: 400px;
  38. 				top: 180px; left: 0;
  39. 				background-color: #f00;
  40. 				z-index: 1;
  41. 			}
  42. 			#2ndMenu {
  43. 				width: 20%; height: 400px;
  44. 				top: 180px; left: 0;
  45. 				background-color: #00f;
  46. 				z-index: 2;
  47. 			}
  48. 			#content {
  49. 				width: 60%; height: 400px;
  50. 				top: 180px; left: 20%;
  51. 				background-color: #bbb;
  52. 				z-index: 2;
  53. 			}
  54. 			#right {
  55. 				width: 20%; height: 400px;
  56. 				top: 180px; left: 80%;
  57. 				background-color: #000;
  58. 				z-index: 2;
  59. 			}
  60. 			#header,#logo,#title,#login,#menu,#container,#2ndMenu,#content,#right,#copyright {
  61. 				position: absolute;
  62. 				display: block;
  63. 				margin: 0; padding: 0;
  64. 			}
  65. 		</style>
  66. 	</head>
  67. 	<body>
  68. 		<div id="header">
  69. 			<span id="logo">Logo</span>
  70. 			<span id="title">Title</span>
  71. 			<span id="login">Login</span>
  72. 		</div>
  73. 		<div id="menu">Menu
  74. 		</div>
  75. 		<div id="container">
  76. 			<span id="2ndMenu">2e menu</span>
  77. 			<span id="content">
  78. 				Content
  79. 			</span>
  80. 			<span id="right">Right</span>
  81. 		</div>
  82. 		<div id="copyright">Copyright
  83. 		</div>
  84. 	</body>
  85. </html>


Wat schertst mijn verbazing: het werkt niet. De bedoeling is dat de blokken netjes gepositioneerd worden en een vaste grootte krijgen. Maar dat gebeurt zeer zeker niet!
Een voorbeeld is te zien op http://www.knome.nl/box

Hoe verhelp ik dit probleem?

De kleuren zijn trouwens gewoon om de boxen duidelijk aan te geven 

2 antwoorden

Gesponsorde links
Offline WouterJ - 16/07/2011 11:47
Avatar van WouterJ HTML gevorderde Haal die position: absolute; en top/left/bottom/right eens weg. Je kan beter positioneren doormiddel van float, margin en padding.

Verder is het verstandig deze code:
#header,#logo,#title,#login,#menu,#container,#2ndMenu,#content,#right,#copyright {
position: absolute;
display: block;
margin: 0; padding: 0;
}
Helemaal bovenaan je CSS i.p.v. onderaan te zetten.
Offline Emonk - 16/07/2011 11:48 (laatste wijziging 16/07/2011 12:06)
Avatar van Emonk Lid Alvast bedankt, maar... wat is float? 

Kun je misschien de code wat aanpassen als voorbeeld, dan snap ik wat je bedoelt..

Never mind, het werkt al  dank !

(deze code):

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. 	<head>
  4. 		<title>Website op CS v1.0</title>
  5. 		<style type="text/css">
  6. 			body {
  7. 				margin: 0; padding: 0;
  8. 			}
  9. 			#header,#logo,#title,#login,#menu,#container,#secondMenu,#content,#right,#copyright {
  10. 				display: inline;
  11. 				margin: 0; padding: 0;
  12. 			}
  13. 			#header {
  14. 				width: 100%; height: 100px;
  15. 				top: 0; left: 0;
  16. 				background-color: #00f;
  17. 				z-index: 1;
  18. 			}
  19. 			#logo {
  20. 				float: left;
  21. 				height: 100px; width: 20%;
  22. 				z-index: 2;
  23. 			}
  24. 			#title {
  25. 				float: left;
  26. 				height: 100px;
  27. 				z-index: 3;
  28. 			}
  29. 			#login {
  30. 				width: 20%; height: 100px;
  31. 				float: right;
  32. 				z-index: 4;
  33. 			}
  34. 			#menu {
  35. 				width: 100%; height: 80px;
  36. 				float: left;
  37. 				background-color: #0f0;
  38. 				z-index: 1;
  39. 			}
  40. 			#container {
  41. 				width: 100%; height: 400px;
  42. 				float: left;
  43. 				background-color: #f00;
  44. 				z-index: 1;
  45. 			}
  46. 			#secondMenu {
  47. 				width: 20%; height: 400px;
  48. 				float: left;
  49. 				background-color: #00f;
  50. 				z-index: 2;
  51. 			}
  52. 			#content {
  53. 				width: 60%; height: 400px;
  54. 				float: left;
  55. 				background-color: #bbb;
  56. 				z-index: 2;
  57. 			}
  58. 			#right {
  59. 				width: 20%; height: 400px;
  60. 				float: left;
  61. 				background-color: #000;
  62. 				z-index: 2;
  63. 			}
  64. 			#copyright {
  65. 				width: 100%; height: 50px;
  66. 				float: left;
  67. 			}
  68. 		</style>
  69. 	</head>
  70. 	<body>
  71. 		<div id="header">
  72. 			<div id="logo">Logo</div>
  73. 			<div id="title">Title</div>
  74. 			<div id="login">Login</div>
  75. 		</div>
  76. 		<div id="menu">Menu
  77. 		</div>
  78. 		<div id="container">
  79. 			<div id="secondMenu">2e menu</div>
  80. 			<div id="content">
  81. 				<?php
  82. 					if ($_SERVER["REMOTE_ADDR"]=="62.234.74.186") {
  83. 						echo 'Welkom.';
  84. 					} else {
  85. 						echo 'Je bent niet op het thuisnetwerk.';
  86. 					}
  87. 				?>
  88. 			</div>
  89. 			<div id="right">Right</div>
  90. 		</div>
  91. 		<div id="copyright">Copyright
  92. 		</div>
  93. 	</body>
  94. </html>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.199s