login  Naam:   Wachtwoord: 
Registreer je!
 Forum

achtergrondkleur sidebar doorlopen

Offline san - 30/07/2009 01:35 (laatste wijziging 30/07/2009 01:41)
Avatar van sanHTML interesse In de volgende code loopt de achtergrondkleur over de lengte van de inhoud bij sidebar. Maar hoe kun je ervoor zorgen dat de lengte tot de onderkant van de pagina doorloopt? Met 100% height lukt het me niet of loopt het te ver door.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body {
  2.      background-color: #CC33FF;/*paars*/
  3.      margin: 0; 
  4.      padding: 0;
  5.      height: 100%;
  6. }
  7.  
  8. .titel{
  9.      background-color:#33CCFF;/*blauw*/
  10.      text-align:center;
  11. }
  12.  
  13. .sidebar{
  14.      height: 100%; 
  15.      background-color:#FF0000;/*red*/
  16.      float: left;
  17. }
  18.  
  19.  .container{
  20.      height: auto !important;
  21.      height: 100%;
  22. }
  23.  
  24. #tekst {
  25.      font-size: 17px;
  26.      font-style: normal;
  27.      font-family: arial, verdana;
  28.      color: #000000;
  29.      margin-left: 235px;
  30. }
  31.  
  32. .footer {
  33.      position: absolute;
  34.      width: 100%;
  35.      background-color:#FFFFFF;
  36.      font-size: 13px;
  37.      bottom: 0;
  38. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  3.  <div id="container">
  4.  
  5.   <div class="titel">
  6.      <img src="titel1.png" height="80" width="800" alt="">     
  7.   </div>
  8.  
  9.  
  10.  
  11.  
  12.   <div class="sidebar">
  13.      <br><a href="#"><img src="menu/menu1.png" border="0" height="100" width="149" alt=""></a>
  14.      <br><a href="#"><img src="menu/menu2.png" border="0" height="100" width="149" alt=""></a>
  15.      <br><a href="#"><img src="menu/menu3.png" border="0" height="100" width="149" alt=""></a>
  16.      <br><a href="#"><img src="menu/menu4.png" border="0" height="100" width="149" alt=""></a>
  17.   </div>
  18.  
  19.  
  20.  <div id="tekst">
  21.    Tekst </div>     
  22.  
  23.  <div style="margin-left: 135px; margin-top: 50px; border: solid 2px black; height: 200px; width: 312px; float: left;">
  24.      <img src="image/foto3.jpg" height="200" width="312" alt="">     
  25.  </div>       
  26.  
  27.  <div style="margin-left: 15px; margin-top: 50px; border: solid 2px black; height: 200px; width: 301px; float: left;">
  28.      <img src="image/foto2.jpg" height="200" width="301" alt="">    
  29.  </div>
  30.  
  31. <div class="footer">
  32.     <div style="margin-left: 30px">Footer</a></div>
  33. </div>
  34.  
  35. </div>
  36.  
  37.  
  38.  
  39. </body>

12 antwoorden

Gesponsorde links
Offline meerweten - 30/07/2009 11:55
Avatar van meerweten Lid heb dit probleem ook eens gehad

ik zal opzoeken wat ik toen gedaan heb om dit op te lossen maar ik kan niets beloven want ik denk dat ik dat reeds verwijdert heb
Offline san - 05/08/2009 13:33
Avatar van san HTML interesse Heb het gevonden: met overflow:hidden
Offline wvmaaren - 05/08/2009 16:04
Avatar van wvmaaren Nieuw lid overflow: hidden is niet echt een goede oplossing... dit betekend dat je geen scrollbars meer op je website krijgt...

Werken met een 100% height is altijd een drama. Ik werk meestal met een javascriptje wat mijn div oprekt tot 100% height als de content minder is dan de hoogte van de browser. en als de content meer is dan de hoogte van de browser, rekt de div gewoon met de content mee...
Offline san - 05/08/2009 17:08
Avatar van san HTML interesse Oke ja dat is zo. Bedankt voor de tip. Ik heb een javasript gevonden in jouw onderwerp van 15 dec jl. Is dat degene die je bedoelt? Moet daar nog iets in veranderd worden zodat hij in mijn script past?
Offline wvmaaren - 06/08/2009 08:52
Avatar van wvmaaren Nieuw lid Ik zal je even een update van dat script geven en wat commentaar erbij zetten...

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript" language="javascript">
  2.         function resizescreen() 
  3.         {
  4.             //Hier bekijk je welke hoogte er beschikbaar is voor de browser. 
  5.             var WindowHeight = 0;
  6.             if( typeof( window.innerHeight ) == 'number' ) 
  7.                 {
  8.                     //Non-IE
  9.                     WindowHeight = window.innerHeight;
  10.                 } 
  11.             else if( document.documentElement && ( document.documentElement.clientHeight) ) 
  12.                 {
  13.                     //IE 6+ in 'standards compliant mode'
  14.                     WindowHeight = document.documentElement.clientHeight;
  15.                 } 
  16.             else if( document.body && ( document.body.clientHeight ) ) 
  17.                 {
  18.                     //IE 4 compatible
  19.                     WindowHeight = document.body.clientHeight;
  20.                 }
  21.             //Einde bepalen window inner height
  22.  
  23.             //In deze situatie is er een gekozen om altijd fullscreen te werken. De contentdiv wordt dus altijd opgerekt
  24.             //tot de maximum hoogte minus de hoogte van de footer en de header. de "2" die gepost wordt is borderafhankelijk
  25.             //Hiermee moet je even zoeken naar "the magic number".
  26.             var content = document.getElementById('content');
  27.             var header = document.getElementById('header');
  28.             var footer = document.getElementById('footer');
  29.             var DivHeight = WindowHeight - header.offsetHeight - footer.offsetHeight - 2  + "px";
  30.             if (content.style.height < DivHeight)
  31.             {
  32.                 content.style.height = DivHeight;
  33.             }
  34.          } 
  35.     </script>


Je kan het onderste gedeeltje ook veranderen met deze code. Op deze manier wordt de pagina tot 100% afgevuld als de content div niet voldoende content bevat om de pagina volledig te vullen.

staat er echt wel meer content in dan dat er windowheight is. Wordt de div automatisch opgerekt.


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var content = document.getElementById('content');
  2.             var header = document.getElementById('header');
  3.             var footer = document.getElementById('footer');
  4.             var DivHeight = WindowHeight - header.offsetHeight - footer.offsetHeight - 2  + "px";
  5.             content.style.height = DivHeight;


Dit laatste stukje code zorgt ervoor dat je een trigger toevoegd aan je pagina. Deze trigger fired het resize event op het moment dat de user het scherm resized.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.  
  3.         window.onresize = resize;
  4.  
  5.         function resize()
  6.         {
  7.          setTimeout('resizescreen()', 1000);
  8.         }
  9.     </script>
Offline san - 07/08/2009 13:32
Avatar van san HTML interesse Ik heb bovenstaand javascript in mijn pagina gezet maar bij werkt het niet. Blijf onder de footer een stuk menu achtergrondkleur en body achtergrondkleur houden. Moet ik soms nog iets in de css aanpassen?
Offline wvmaaren - 07/08/2009 14:35
Avatar van wvmaaren Nieuw lid Als je even je je volledige code paste, dan zal ik het voor je fixxen
Offline san - 07/08/2009 17:17
Avatar van san HTML interesse Bijgaande de code. Hierin heb ik jouw javascript weggelaten. Alvast hartstikke bedankt. Als het werkt is het super.Plaatscode: 137313
Offline wvmaaren - 08/08/2009 21:03
Avatar van wvmaaren Nieuw lid Ik heb een werkende opzet voor je gemaakt. Hier moet je wel mee verder kunnen!

Succes,

Wouter

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. <script type="text/javascript" language="javascript">
  6.         function resizescreen() 
  7.         {
  8.             //Hier bekijk je welke hoogte er beschikbaar is voor de browser. 
  9. 			var WindowHeight = 0;
  10. 			if( typeof( window.innerHeight ) == 'number' ) 
  11.                 {
  12.                     //Non-IE
  13.                     WindowHeight = window.innerHeight;
  14.                 } 
  15.             else if( document.documentElement && ( document.documentElement.clientHeight) ) 
  16.                 {
  17.                     //IE 6+ in 'standards compliant mode'
  18.                     WindowHeight = document.documentElement.clientHeight;
  19.                 } 
  20.             else if( document.body && ( document.body.clientHeight ) ) 
  21.                 {
  22.                     //IE 4 compatible
  23.                     WindowHeight = document.body.clientHeight;
  24.                 }
  25.  
  26. 			//Einde bepalen window inner height
  27.  
  28.             //In deze situatie is er een gekozen om altijd fullscreen te werken. De contentdiv wordt dus altijd opgerekt
  29.             //tot de maximum hoogte minus de hoogte van de footer en de header. de "2" die gepost wordt is borderafhankelijk
  30.             //Hiermee moet je even zoeken naar "the magic number".
  31.             var contentLeft = document.getElementById('content-left');
  32. 			var contentMain = document.getElementById('content-main');
  33.             var header = document.getElementById('header');
  34.             var footer = document.getElementById('footer');
  35.             var DivHeight = WindowHeight - header.offsetHeight - footer.offsetHeight;
  36.             if (contentLeft.offsetHeight  < contentMain.offsetHeight)
  37.             {
  38. 				if (contentMain.offsetHeight < DivHeight)
  39. 				{
  40. 					contentMain.style.height = DivHeight + "px";
  41. 					contentLeft.style.height = DivHeight + "px";
  42. 				}
  43. 				else
  44. 				{
  45. 					contentLeft.style.height = contentMain.offsetHeight + "px";
  46. 				}
  47.             }
  48. 			else
  49. 			{
  50. 				if (contentLeft.offsetHeight < DivHeight)
  51. 				{
  52. 					contentMain.style.height = DivHeight + "px";
  53. 					contentLeft.style.height = Divheight + "px";
  54. 				}
  55. 				else
  56. 				{
  57. 					contentMain.style.height = contentLeft.offsetHeight + "px";
  58. 				}
  59. 			}
  60.  
  61.          } 
  63.  
  64. <script type="text/javascript">
  65.  
  66.         window.onresize = resize;
  67.  
  68.         function resize()
  69.         {
  70.          setTimeout('resizescreen()', 1000);
  71.         }
  72.     </script>
  73. <style type="text/css">
  74.  
  75.  html, body
  76.  {
  77. 	 font-family: Verdana, Geneva, sans-serif;
  78. 	 font-size: 12px;
  79.  }
  80.  
  81.  p
  82.  {
  83. 	margin: 0px 0px 10px 0px; 
  84.  }
  85.  
  86.  #header
  87.  {
  88. 	 position: absolute;
  89. 	 top: 0px;
  90. 	 left: 0px;
  91. 	 background-color: fuchsia;
  92. 	 width: 100%;
  93. 	 height: 100px;
  94. 	 text-align: center;
  95.  }
  96.  
  97.  #content-left
  98.  {
  99. 	 position: absolute;
  100. 	 top: 100px;
  101. 	 left: 0px;
  102. 	 background-color: green;
  103. 	 float: left;
  104. 	 width: 165px;
  105.  }
  106.  
  107.  .menu
  108.  {
  109. 	 border: 2px solid blue;
  110. 	 background-color: silver;
  111. 	 margin: 10px;
  112. 	 width: 141px;
  113. 	 height: 20px;
  114. 	 text-align: center;
  115.  }
  116.  
  117.  #content-main
  118.  {
  119. 	 position: absolute;
  120. 	 top: 100px;
  121. 	 left: 165px;
  122. 	 padding: 10px;
  123.  }
  124.  
  125.  #footer
  126.  {
  127. 	 position: fixed;
  128. 	 width: 100%;
  129. 	 bottom: 0px;
  130. 	 left: 0px;
  131. 	 height: 20px;
  132. 	 background-color: black;
  133. 	 color: white;
  134. 	 text-align: center;
  135.  }
  136.  
  137.  
  139.  
  140.  
  141. </head>
  142.  
  143. <body onLoad="resizescreen();">
  144. 		<div id="header"><h1>Dit is de header</h1></div>
  145.  
  146.         <div id="content-left">
  147.         	   	<div class="menu"><a href="#">Menu Item 1</a></div>
  148.                 <div class="menu"><a href="#">Menu Item 1</a></div>
  149.                 <div class="menu"><a href="#">Menu Item 1</a></div>
  150.                 <div class="menu"><a href="#">Menu Item 1</a></div>
  151.         </div>
  152.  
  153.         <div id="content-main">
  154.         	<p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p>
  155.             <p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p>
  156.             <p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p>
  157.             <p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p>
  158.         </div>
  159.  
  160.         <div id="footer">Dit is de footer</div>
  161. </body>
  162. </html>
Offline san - 08/08/2009 22:34
Avatar van san HTML interesse Het werkt perfect. Echt hartstikke bedankt. Ben er wat mee aan het expirementeren en ziet er goed uit. Ik heb alleen nog 1 vraagje:
Ik heb in mijn menu 4 afbeelding van buttons. Als ik er 3 plaats werkt het nog prima maar bij de 4e gaat het mis en geeft hij foutmelding divheight niet definieerbaar. Waarschijnlijk wordt de div dan te hoog ofzo? Valt hier iets aan te doen?
Offline wvmaaren - 08/08/2009 23:58
Avatar van wvmaaren Nieuw lid nee er zit een typefoutje in het script... sorry...

in de laatste if statement in het javascript staat Divheight ipv DivHeight. je moet dus even een hoofdletter H ervan maken :-)

succes
Offline san - 10/08/2009 01:52
Avatar van san HTML interesse Ziet er nu helemaal fantastisch uit ja. Werkt goed. Alleen in IE 5.5 en 6 verschijnt de footer bovenaan in beeld?? Nu weet ik niet of deze versies nog wel veel gebruikt worden. In FF en IE 7 en 8 wel goed. Hartstikke bedankt.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.207s