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:
php code - Bekijk de code zonder highlighting - Klap code in 
  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>

php code - Bekijk de code zonder highlighting - Klap code in 
  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
php code - Bekijk de code zonder highlighting - Klap code in 
  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:
php code - Bekijk de code zonder highlighting - Klap code in 
  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:
php code - Bekijk de code zonder highlighting - Klap code in 
  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.223s