login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[Div] Positie

Offline Roy2001 - 06/09/2005 15:03
Avatar van Roy2001Nieuw lid Goedendag,

Ik heb een probleem.
Ik heb een website gemaakt die opgebouwd is uit de volgende structuur :
[list]
[*] Header container div
[*] Menu container div
[*] Content container div
[/list]

In deze containers zitten weer allemaal andere Divs :
[list]
[*] Header - 1 Div + 4 images divs
[*] Menu - 1 zoek div / 1 Dhtml menu div / 1 opvulling
[*] Content - 1 sub menu div / 1 content div / 1 nieuws div
[/list]

Dit werkt allemaal perfect en ziet er goed uit ( IE - 1024x768 )
Ik heb een overflow:hidden; op de body staan, aangezien ik niet wil dat je de pagina naar beneden kan scrollen.

op de content div heb ik een overflow:auto; gezet zodat als je meer content heb dan in de div past hij automatisch een scrollbar toont en je zo door de content heen kan lezen.

tot zover alles goed.

Ik heb verschillende "Anchors" op de pagina staan ( alleen in de content div ) en heb een lijstje met nieuwsitems die doorgelinkt zijn naar die anchors in de content div.

Nu werkt dit in principe ook. het enige nadeel is dat als je op een interne link drukt hij de pagina verspringt ( naar beneden )
" Zie ook : voor de vergelijking "

Nu kreeg ik het idee om de body tag toch op overflow:auto; te zetten. normaliteit zou hij hem niet moeten zien. maar hij laat hem dus wel zien.

je kan naar beneden scrollen en daar zie je dan een wit vlak ( precies dezelfde afmeting als het witte vlak wat je te zien krijgt als je op een interne link drukt )

Dus ik vroeg mij af wat er mis was met mijn positionering van de Divs.

The CSS
php code - Bekijk de code zonder highlighting - Klap code in 
  1. html {
  2. 	}
  3.  
  4. Body {
  5. 	overflow:hidden;
  6. 	margin: 0px;
  7. 	padding: 150px 0px 0px 0px;
  8. 	height: 100%;
  9. 	}
  10.  
  11. #header {
  12. 	margin-top: -150px;
  13. 	background-image: url(images/Respond1_1.jpg);
  14. 	height: 150px;
  15. 	width: 1020px;
  16. 	}
  17.  
  18. #branding {
  19. 	height: 120px;
  20. 	}
  21.  
  22. #plaatje1 {
  23. 	width:80px;
  24. 	height:80px;
  25. 	border:1px solid #ffffff;
  26. 	position:absolute;
  27. 	left: 17px;
  28. 	top: 20px;
  29. 	background-image: url(images/brand%20klein2.jpg);
  30. 	}
  31.  
  32. #plaatje3 {
  33. 	width:80px;
  34. 	height:80px;
  35. 	border:1px solid #ffffff;
  36. 	position:absolute;
  37. 	left:207px;
  38. 	top:19px;
  39. 	background-image: url(images/controle%20centrum%20klein2.jpg);
  40. 	}
  41.  
  42. #plaatje2 {
  43. 	width:80px;
  44. 	height:80px;
  45. 	border:1px solid #ffffff;
  46. 	position:absolute;
  47. 	left:112px;
  48. 	top:20px;
  49. 	background-image: url(images/materiaal%20klein2.jpg);
  50. 	}
  51.  
  52. #plaatje4 {
  53. 	width:80px;
  54. 	height:80px;
  55. 	border:1px solid #ffffff;
  56. 	position:absolute;
  57. 	left:302px;
  58. 	top:19px;
  59. 	background-image:url(images/terrorisme%20klein2.jpg);
  60. 	}
  61.  
  62. #navMain {
  63. 	height:30px;
  64. 	background-color:#E56B20;
  65. 	}
  66.  
  67. #navSearch {
  68. 	width:205px;
  69. 	height:30px;
  70. 	left:0px;
  71. 	position:absolute;
  72. 	padding-top:4px;
  73. 	padding-left:25px;
  74. 	border-right:1px solid white;
  75. 	border-left:1px solid black;
  76. 	border-top:1px solid white;
  77. 	}
  78.  
  79. #navMenu {
  80. 	left:205px;
  81. 	position:absolute;
  82. 	width:583px;
  83. 	background-color:#000000;
  84. 	height:30px;
  85. 	border-bottom:1px solid #FFFFFF;
  86. 	border-right:1px solid #FFFFFF;
  87. 	border-top:1px solid #FFFFFF;
  88. 	}
  89.  
  90. #empty {
  91. 	width:223px;
  92. 	position:absolute;
  93. 	left:797px;
  94. 	height:30px;
  95. 	border-right:1px solid black;
  96. 	}
  97.  
  98. #container {
  99. 	top:150px;
  100. 	bottom:0px;
  101. 	_height:expression(document.body.clientHeight - 150 + 'px'); /* equals value from #header height */
  102. 	width:1020px;
  103. 	position:absolute;
  104. 	}
  105.  
  106. #colLeft {
  107. 	height:100%;
  108. 	overflow:auto;
  109. 	width:205px;
  110. 	background-color:#003399;
  111. 	float:left;
  112. 	border-left:1px solid #000000;
  113. 	padding-top:20px;
  114. 	padding-left:20px;
  115. 	border-bottom:1px solid #000000;
  116. 	}
  117.  
  118. #colCenter {
  119. 	height:100%;
  120. 	overflow:auto;
  121. 	width:583px;
  122. 	float:left;
  123. 	background-color:#FFFFFF;
  124. 	padding-top:10px;
  125. 	padding-left:20px;
  126. 	border-bottom:1px solid #000000;
  127. 	border-right:1px solid white;
  128. 	}
  129.  
  130. #colRight {
  131. 	width:232px;
  132. 	float:left;
  133. 	height:100%;
  134. 	background-image: url(images/Respond4_2.jpg);
  135. 	border-right:1px solid #000000;
  136. 	padding-top:9px;
  137. 	}
  138.  
  139. #navLocal {
  140. 	padding:0px 50px 0px 10px;
  141. 	}
  142.  
  143. #adres {
  144. 	width:133px;
  145. 	height:103px;
  146. 	background-color:#e56b20;
  147. 	position:absolute;
  148. 	left: 801px;
  149. 	top: 475px;
  150. }
  151.  
  152. #vlag {
  153. 	width:213px;
  154. 	height:440px;
  155. 	position:absolute;
  156. 	left: 20px;
  157. 	top: 568px;
  158.  
  159. }


The Template
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <?=head()?>
  5. <meta http-equiv="Content-Language" content="en-us">
  6. <title>Respond!</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8. <body <?=onload()?>>
  9. <div id="header">
  10. 			<div id="branding"></div>
  11. 		<div id="plaatje1"></div>
  12. 		<div class="style4" id="plaatje2"></div>
  13. 		<div class="style4" id="plaatje3"></div>
  14. 		<div class="style4" id="plaatje4"></div>
  15. 	<div id="navMain">
  16.        	<div id="navSearch"><?=searchbox()?></div>
  17.        	<div id="navMenu"><?include ('dhtml.navi')?></div>
  18. 		<div id="empty"></div>
  19. 	</div>
  20.     </div>
  21.  
  22. 	<div  id="container">
  23. 			<div id="colLeft"></div>
  24. 		<div id="colCenter"></div>
  25.  
  26.       <div id="colRight">
  27. 	  		<div id="navLocal"></div>
  28.       </div>
  29.     </div>
  30.  
  31. 		<div id="adres"></div>
  32.  
  33. 	<div id="vlag"></div>
  34.  
  35.  
  36. </body>
  37. </html>


( overbodig content enz. weggehaald )

een online voorbeeld is te vinden op :
www.respond.nl/1/index.php
( drukken op een interne link. deze vind je in bijvoorbeeld de nieuws-box )

het gaat alleen fout met een schermresolutie van 1024x768

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.196s