login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Plaats tussen 2 div's

Offline Frederic - 17/02/2006 17:13
Avatar van FredericPHP ver gevorderde Hallo, ik heb volgende code:
  1. <div id="bovenblok">
  2. <div id="titel">
  3. <div id="menu">
  4. <ul>
  5. <li><a href="#">Test</a></li>
  6. <li><a href="#">Test1</a></li>
  7. <li><a href="#">Test2</a></li>
  8. <li><a href="#">Test3</a></li>
  9. <li><a href="#">Test4</a></li>
  10. </ul>
  11. </div>
  12. </div>
  13. </div>
  14.  
  15.  
  16.  
  17.  
  18. <div id="middenblok">
  19. <div id="inhoud">
  20. <div id="zijbalk">
  21. <h2>Zijbalk</h2>

  1. body {
  2. margin: 0;
  3. padding: 0;
  4. font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  5. font-size: 11px;
  6. line-height: 1.5em;
  7. color: #444;
  8. background-color: #eaeaea;
  9. }
  10.  
  11. #bovenblok {
  12. background-image: url(../afbeeldingen/titel.jpg);
  13. background-position: top center;
  14. background-repeat: no-repeat;
  15. margin-top: 8px;
  16. }
  17.  
  18. #titel {
  19. width: 690px;
  20. height: 125px;
  21. margin: 0 auto;
  22. }
  23.  
  24. #menu {
  25. color: #fff;
  26. font-size: 13px;
  27. padding-top: 90px;
  28. }
  29.  
  30. #menu ul {
  31. padding: 0;
  32. }
  33.  
  34. #menu li, #menu li a {
  35. display: inline;
  36. background: none;
  37. padding-right: 5px;
  38. }
  39.  
  40. #menu li a {
  41. color: #99ccff;
  42. text-decoration: none;
  43. border-bottom: 2px;
  44. }
  45.  
  46. #menu li a:hover {
  47. color: #99ccff;
  48. border-bottom: 2px solid #fff;
  49. margin-bottom: auto;
  50. padding-right: 5px;
  51. }
  52.  
  53.  
  54.  
  55. #middenblok {
  56. margin: 0 auto;
  57. background-image: url(../afbeeldingen/middenblok.gif);
  58. background-position: center;
  59. background-repeat: repeat-y;
  60. }
  61. #inhoud {
  62. width: 690px;
  63. margin-left: auto;
  64. margin-right: auto;
  65. margin-bottom: 0px;
  66. }
  67. #zijbalk {
  68. width: 214px;
  69. padding-left: 15px;
  70. float: right;
  71. }

Maar nu krijg ik tussen de bovenblok en middenblok een spatie (screenshot: http://www.fadetolife.be/test.JPG).
Een 2e vraagje: als ik dit gebruik dan zal de onderlijning in de menubalk nooit perfect onder het woord komen, maar altijd iets meer naar rechts.. Weet iamdn hoe dit komt?

4 antwoorden

Gesponsorde links
Offline nemesiskoen - 17/02/2006 17:21
Avatar van nemesiskoen Gouden medaille

PHP expert
  1. #bovenblok {
  2. background-image: url(../afbeeldingen/titel.jpg);
  3. background-position: top center;
  4. background-repeat: no-repeat;
  5. margin-top: 8px;
  6. padding: 0px;
  7. spacing: 0px;
  8. }
Offline Frederic - 17/02/2006 17:26 (laatste wijziging 17/02/2006 19:44)
Avatar van Frederic PHP ver gevorderde Ok, het werkt nu in FF en in Opera, maar in IE nog altijd niet Hier de volledige code:
  1. <body>
  2. <div id="bovenblok">
  3. <div id="titel">
  4. <div id="zoeken">
  5. <form action="/">
  6. <div>
  7. <input onfocus="if(this.value == 'Doorzoek deze blog...') { this.value = ''; }" value="Doorzoek deze blog..." type="text" value="Doorzoek deze blog..." name="zoekterm" id="zoekterm" placeholder="Zoeken..." />
  8. </div>
  9. </div>
  10. <div id="menu">
  11. <ul>
  12. <li><a href="#">Test</a></li>
  13. <li><a href="#">Test1</a></li>
  14. <li><a href="#">Test2</a></li>
  15. <li><a href="#">Test3</a></li>
  16. <li><a href="#">Test4</a></li>
  17. </ul>
  18. </div>
  19. </div>
  20. </div>
  21.  
  22.  
  23.  
  24.  
  25. <div id="middenblok">
  26. <div id="inhoud">
  27. <div id="rechterbalk">
  28. <h2>Zijbalk</h2>
  29. Hier wat tekst
  30. <div class="scheiding"></div>
  31. <h2>Zijbalk2</h2>
  32. Hier nog wat tekst
  33. <ul>
  34. <li>Testlijst!</li>
  35. </ul>
  36. </div>
  37.  
  38. <div id="linkerbalk">
  39. <h1>Onderwerp &gt; </h1>
  40. <div class="ondertitel">Testje</div>
  41. Test van tekst
  42. <ul>
  43. <li>Test!</li>
  44. <li>Een lijst</li>
  45.  
  46. </ul>
  47. <h1>Onderwerp B &gt; </h1>
  48. <div class="ondertitel">Testje - [Meer lezen...]</div>
  49. BOE
  50. </div>
  51. </div>
  52. </div>
  53. </body>

en de CSS:
  1. #bovenblok {
  2. background-image: url(../afbeeldingen/titel.jpg);
  3. background-position: top center;
  4. background-repeat: no-repeat;
  5. margin-top: 8px;
  6. padding: 0px;
  7. spacing: 0px;
  8. }
  9.  
  10. #titel {
  11. width: 690px;
  12. height: 125px;
  13. margin: 0 auto;
  14. }
  15.  
  16. #menu {
  17. color: #FFFFFF;
  18. font-size: 13px;
  19. padding-top: 90px;
  20. }
  21.  
  22. #menu ul {
  23. padding: 0;
  24. }
  25.  
  26. #menu li, #menu li a {
  27. display: inline;
  28. background: none;
  29. margin-right: 5px;
  30. }
  31.  
  32. #menu li a {
  33. color: #99CCFF;
  34. text-decoration: none;
  35. border-bottom: 2px;
  36. }
  37.  
  38. #menu li a:hover {
  39. color: #99CCFF;
  40. border-bottom: 2px solid #FFFFFF;
  41. margin-bottom: auto;
  42. }
  43.  
  44. #zoeken {
  45. float: right;
  46. margin: 0;
  47. padding-top: 90px;
  48. }
  49.  
  50. #middenblok {
  51. margin: 0 auto;
  52. background-image: url(../afbeeldingen/middenblok.jpg);
  53. background-position: center;
  54. background-repeat: repeat-y;
  55. }
  56.  
  57. #inhoud {
  58. width: 690px;
  59. margin-left: auto;
  60. margin-right: auto;
  61. margin-bottom: 0px;
  62. }
  63.  
  64. #rechterbalk {
  65. width: 214px;
  66. padding-left: 15px;
  67. float: right;
  68. }
  69.  
  70. #linkerbalk {
  71. width: 445px;
  72. padding: 0px;
  73. padding-bottom: 15px;
  74. margin: 0;
  75. }
  76.  
  77. .ondertitel {
  78. font-size: 9px;
  79. font-family: Arial, Helvetica, sans-serif;
  80. margin-bottom: 5px;
  81. border-bottom: 1px solid #CCCCCC;
  82. }
  83.  
  84. div.scheiding {
  85. border-bottom: dashed 1px #CCCCCC;
  86. margin: 10px 0 15px 0;
  87. padding: 0;
  88. }
  89.  
  90. h1, h2, h3 {
  91. color: #1B4CA2;
  92. font-weight: bold;
  93. padding: 0;
  94. }
  95.  
  96. h1 {
  97. font-family: Georgia, "Trebuchet MS", Times, serif;
  98. font-size: 19px;
  99. margin: 0px;
  100. padding: 25px 0 5px 0;
  101. }
  102.  
  103. h2 {
  104. font-size: 17px;
  105. margin: 20px 0 10px 0;
  106. }
  107.  
  108. h3 {
  109. font-size: 15px;
  110. margin-bottom: 5px;
  111. }
Offline Voldemort - 17/02/2006 19:49
Avatar van Voldemort PHP ver gevorderde Bij middenblok ook:

padding: 0px;
spacing: 0px;

toevoegen denk ik.
Offline Frederic - 17/02/2006 19:50
Avatar van Frederic PHP ver gevorderde Nope, helpt niet!
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.567s