login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Divs overlappen elkaar

Offline Poitrrr - 24/11/2009 21:01 (laatste wijziging 24/11/2009 22:15)
Avatar van PoitrrrNieuw lid Ik ben nog maar kort bezig met html/css/php en zit nu een beetje vast.

Wat ik wil is dat mijn site altijd op 100% height blijft, dit is ondertussen gelukt.
Nu wil ik dat er een scrollbar komt zodra mijn inhoud div te groot wordt zodat je dus altijd tussen header en footer blijft. Ik heb alles geprobeert met overflow, maar krijg het niet werkend. De tekst van mijn left/right divs knallen door de footer heen ipv een scrollbar te maken in de inhoud div.

Stukje css van mijn inhoud en left/right divs:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #inhoud {
  2. 	padding: 10px 2.5em 60px 2.5em;
  3. 	overflow: auto;
  4. }
  5. #left {
  6. 	float: left;
  7. 	width: 350px;
  8. 	display: inline;
  9. 	margin: 0 auto;
  10. }
  11. #right {
  12. 	float: right;
  13. 	width: 350px;
  14. 	display: inline;
  15. 	margin: 0 auto;
  16. }

En dan heb ik het zo in mijn html staan:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php include("header.php"); ?>
  2. <div id="inhoud" style="overflow:auto;"> 
  3.  	<div id="left">
  4. 		<p>Welkom!</p>
  5.                           <p>blaaat</p>
  6.               </div>
  7.               <div id="right"> blaat blaat </div>
  8.   <div class="clear"></div> 
  9. </div>
  10. <?php include("footer.php"); ?>

Waar blaat staat is een hele lap tekst uiteraard..

Waarschijnlijk doe ik iets heel simpels fout, maja ik ben dan ook een leek op dit gebied ;)

Koen schreef:
C-o-d-e-t-a-g-s-!

6 antwoorden

Gesponsorde links
Offline nick5556 - 24/11/2009 21:34
Avatar van nick5556 PHP beginner En als je in je gebruik maakt van Position? Ik kan je alleen deze link geven, Tutorial Positioning Layers. Het is voor mij te lang geleden dat ik css heb gedaan om je verder te helpen


BTW: gebruik de code tags!
Offline IndexS - 03/12/2009 22:27 (laatste wijziging 03/12/2009 22:27)
Avatar van IndexS MySQL interesse Ik zou ook gebruik maken van position.

En volgens mij hoef je in je html niet aan te geven dat de div overflow auto moet zijn als je het ook in je css hebt staan.
Onderstaande link vind je nog wat meer uitleg over position.

link
Offline vh37 - 04/12/2009 13:34
Avatar van vh37 Nieuw lid Zet overflow eens op scroll

overflow:scroll;
Offline WebSmurf - 04/12/2009 13:37
Avatar van WebSmurf Nieuw lid wat dacht je van een frame of iframe te gebruiken  
Offline chth - 04/12/2009 17:23 (laatste wijziging 04/12/2009 18:03)
Avatar van chth Lid ik heb hier wel een bestandje waarin erin er een vaste footer word gebruikt maar dit is dan wel met javascript.
als dat je kan helpen?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type="text/css">
  5. body {
  6. 	margin: 0;
  7. 	padding: 0;
  8. 	font: 12px/1.5 verdana, arial, helvetica, sans-serif;
  9. 	overflow:hidden;
  10. }
  11. #content {
  12. 	padding: 10px;
  13. 	background-color: #ccc;
  14. 	height:400px;
  15. 	overflow:auto;
  16. }
  17. #footer {
  18. 	position: relative;  /* nodig voor Safari */
  19. 	padding: 10px;
  20. 	background-color: #ddd;
  21. }
  22. </style>
  23. <script type="text/javascript">
  24. function getWindowHeight() {
  25. 	var windowHeight = 0;
  26. 	if (typeof(window.innerHeight) == 'number') {
  27. 		windowHeight = window.innerHeight;
  28. 	}
  29. 	else {
  30. 		if (document.documentElement && document.documentElement.clientHeight) {
  31. 			windowHeight = document.documentElement.clientHeight;
  32. 		}
  33. 		else {
  34. 			if (document.body && document.body.clientHeight) {
  35. 			windowHeight = document.body.clientHeight;
  36. 			}
  37. 		}
  38. 	}
  39. return windowHeight;
  40. }
  41. function setFooter() {
  42. 	if (document.getElementById) {
  43. 		var windowHeight = getWindowHeight();
  44. 		if (windowHeight > 0) {
  45. 			var contentHeight = document.getElementById('content').offsetHeight;
  46. 			var footerElement = document.getElementById('footer');
  47. 			var footerHeight  = footerElement.offsetHeight;
  48. 			if (windowHeight - (contentHeight + footerHeight) >= 0) {
  49. 				footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
  50. 			}
  51. 			else {
  52. 				footerElement.style.top = '0px';
  53. 			}
  54. 		}
  55. 	}
  56. }
  57. window.onload = function() {
  58. 	setFooter();
  59. }
  60. window.onresize = function() {
  61. 	setFooter();
  62. }
  63. </script>
  64. </head>
  65. <body>
  66. <div id="content">
  67.     inhoud van webpagina  
  68. </div>
  69. <div id="footer">Footer</div>
  70. </body>
  71. </html>
Offline IndexS - 04/12/2009 17:52 (laatste wijziging 04/12/2009 20:05)
Avatar van IndexS MySQL interesse Bedoel je zoiets als dit?

css
Plaatscode: 138151

html
Plaatscode: 138152
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.202s