login  Naam:   Wachtwoord: 
Registreer je!
 Forum

DIV + ILayer

Offline Flippie - 11/11/2005 13:53
Avatar van FlippieNieuw lid Hallo

Ik probeer voor het eerst een website in elkaar te boksen met <DIV>'s ipv met <table>'s. Ik zit wel met eeen probleem.
Ik heb een div aangemaakt die als container dient voor enkele andere div's. Nu staan de DIV's die in de container zouden moeten staan naast die container ipv er in. Wanneer je naar http://www.meidenvanmichel.be/test klikt, zal je merken wat ik bedoel. Ik heb de container een groene rand gegeven, zodat je de fout opmerkt.

De code die ik gebruik voor de DIV's:
--------------------------------------------------------------
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="container">
  2. 	<div class="shadow">
  3. 		<img src="images/shadow_topleft.gif" border="0" alt=""><img src="images/shadow_topcenter.gif" border="0" alt=""><img src="images/shadow_topright.gif" border="0" alt=""></div>		
  4.  
  5. 	<div class="contentcontainer"> 
  6. 		<div class="contentshadowleft"><img src="images/shadow_centerleft.gif" border="0" alt=""></div>
  7. 		<div class="navigation">NAVIGATIE</div>
  8. 		<div class="content"><img src="images/marjan_ekiden_a.jpg" border="0" alt=""></div>
  9. 		<div class="contentspacerright"></div>
  10. 		<div class="contentshadowright"><img src="images/shadow_centerright.gif" border="0" alt=""></div>
  11. 	</div>			
  12. 	<div class="shadow">
  13. 		<img src="images/shadow_bottomleft.gif" border="0" alt=""><img src="images/shadow_bottomcenter.gif" border="0" alt=""><img src="images/shadow_bottomright.gif" border="0" alt=""></div>
  14. </div>

--------------------------------------------------------------
CSS:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. 	background-color: #FF6699;
  3. 	color: #FFFFFF;
  4. 	font-family: "Century Gothic", Verdana, Arial;
  5. 	font-size: 14px;
  6. }
  7. div.container {
  8. 	width: 100%;
  9. 	height: 100%;
  10. 	text-align: center;
  11. 	vertical-align: middle;
  12. 	border: 0px solid #000000;
  13. }
  14.  
  15. div.shadow {
  16. 	width: 740px;
  17. 	height: 20px;
  18. 	text-align: left;
  19. 	vertical-align: top;
  20. 	border: 0px solid #FF0000;
  21. }
  22.  
  23. div.contentcontainer {
  24. 	position: relative;
  25. 	width: 740px;
  26. 	height: 520px;
  27. 	border: 2px solid #00FF00;
  28. 	padding: 0px;
  29. 	margin-left: 0px;
  30. }
  31.  
  32. div.contentshadowleft {
  33. 	position: absolute;
  34. 	width: 20px;
  35. 	height: 520px;
  36. 	text-align: left;
  37. 	vertical-align: top;
  38. 	border: 0px solid #00FF00;
  39. 	padding: 0px;
  40. 	margin-left: 0px;
  41. 	float: left;
  42. }
  43.  
  44. div.navigation {
  45. 	background-color: #FFFFFF;
  46. 	position: absolute;
  47. 	width: 120px;
  48. 	height: 520px;
  49. 	text-align: left;
  50. 	vertical-align: top;
  51. 	border: 0px solid #0000FF;
  52. 	padding: 0px;
  53. 	margin-left: 20px;
  54. 	float: left;
  55. }
  56.  
  57. div.content {
  58. 	position: absolute;
  59. 	width: 530px;
  60. 	height: 520px;
  61. 	text-align: left;
  62. 	vertical-align: top;
  63. 	border: 0px solid #0000FF;
  64. 	padding: 0px;
  65. 	margin-left: 140px;
  66. 	float: left;
  67. }
  68.  
  69. div.contentspacerright {
  70. 	background-color: #FFFFFF;
  71. 	position: absolute;
  72. 	width: 50px;
  73. 	height: 520px;
  74. 	text-align: left;
  75. 	vertical-align: top;
  76. 	border: 0px solid #0000FF;
  77. 	padding: 0px;
  78. 	margin-left: 670px;
  79. 	float: left;
  80. }
  81.  
  82. div.contentshadowright {
  83. 	width: 20px;
  84. 	height: 520px;
  85. 	text-align: left;
  86. 	vertical-align: top;
  87. 	border: 0px solid #FF0000;
  88. 	margin-left: 720px;
  89. 	padding: 0px;
  90. }

0 antwoorden

Gesponsorde links
Er zijn nog geen reacties op dit bericht.
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.229s