login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div tags lopen door elkaar heen (Opgelost)

Offline Tomgeen - 09/10/2011 20:23 (laatste wijziging 09/10/2011 20:26)
Avatar van TomgeenLid Hallo,

Ik ben een site aan het opmaken en nu ben ik al de hele dag bezig met mijn div tags goed te zetten.

Wat ik wil is dat ik een "header" heb met daaronder een "navigation" en daaronder links een "menu" en daarnaast een "banner" en dan onder "menu" en "banner" een "footer"

Echter loopt mijn "footer" door mijn "menu" en "banner" heen, en dus niet eronder.

Kan iemand mij opweg helpen?

Alvast bendankt, Tom

Hieronder mijn Code en CSS:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="css/wrapper.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  10. <div id="wrapper">
  11.   <div id="header">Content for  id "header" Goes Here </div>
  12.   <!------------------------------------------------------------------end header------------>
  13.   <div id="navigation">Content for  id "navigation" Goes Here </div>
  14.   <!------------------------------------------------------------------end navigation-------->
  15.   <!--<div id="content">-->
  16.     <div id="menu">Content for  id "menu" Goes Here</div>
  17.     <!----------------------------------------------------------------end menu----------->
  18.     <div id="banner">Content for  id "banner" Goes Here</div>
  19.     <!----------------------------------------------------------------end banner------------>
  20.   <!--</div>
  21.   <!------------------------------------------------------------------end content----------->
  22.   <div id="footer">Content for  id "footer" Goes Here</div>
  23.   <!-----------------------------------------------------------------end footer------------>
  24. </div>
  25. <!--------------------------------------------------------------------end wrapper----------->
  26. </body>
  27. </html>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. #wrapper {
  2. 	width: 1150px;
  3. 	margin-top: 0px;
  4. 	margin-right: auto;
  5. 	margin-bottom: auto;
  6. 	margin-left: auto;
  7. }
  8. #header {
  9. 	background-color: #F00;
  10. 	height: 50px;
  11. 	margin-top: 0px;
  12. 	margin-right: auto;
  13. 	margin-bottom: auto;
  14. 	margin-left: auto;
  15. 	width: 1150px;
  16. }
  17. #navigation {
  18. 	background-color: #0F0;
  19. 	width: 800px;
  20. 	margin-top: 0px;
  21. 	margin-right: auto;
  22. 	margin-bottom: auto;
  23. 	margin-left: 0px;
  24. 	height: 20px;
  25. }
  26. #content {
  27. 	background-color: #999;
  28. 	height: auto;
  29. 	width: 1150px;
  30. }
  31. #menu {
  32. 	background-color: #00F;
  33. 	width: 750px;
  34. 	margin-top: 25px;
  35. 	margin-left: 25px;
  36. 	float: left;
  37. 	height: none;
  38. }
  39. #banner {
  40. 	background-color: #CCC;
  41. 	width: 350px;
  42. 	margin-bottom: auto;
  43. 	margin-left: auto;
  44. 	float: right;
  45. }
  46.  
  47. #footer {
  48. 	background-color: #F00;
  49. 	height: auto;
  50. 	width: auto;
  51. 	margin-top: auto;
  52. 	margin-right: auto;
  53. 	margin-bottom: auto;
  54. 	margin-left: auto;
  55. }

3 antwoorden

Gesponsorde links
Offline Giant - 09/10/2011 21:00
Avatar van Giant PHP beginner
html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="clear: both"></div>

toevoegen na banner....
Offline Tomgeen - 09/10/2011 21:19
Avatar van Tomgeen Lid Werkt inderdaad zoals gewenst. Bedankt!

Maar mag ik je vragen wat ik hiermee nou precies gedaan heb?
Offline Giant - 10/10/2011 21:07
Avatar van Giant PHP beginner Wat je hiermee gedaan hebt is het resetten van de "floats" (float: left; float: right;)
de both reset beide, met left reset je enkel float: left; met right enkel float: right;
Bedankt door: avdg
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.231s