login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[Css] Automatisch uitrekken

Offline Simax - 07/04/2008 15:10 (laatste wijziging 07/04/2008 15:11)
Avatar van SimaxOnbekend Ik ben al enige tijd op zoek naar een layout die automatisch word uitgerekt zodra de content groter word..

Nu maak ik gebruik van..
[url]http://www.gigadesign.be/2006/07/layout-met-100-hoogte/[/url]

en graag zou ik een layout willen die standaard 100% hoogte heeft. Indien de inhoud groter is, moet de pagina automatisch uitrekken. De footer moet wel altijd onderaan blijven.

Iemand die mij kan helpen?
Alvast bedankt .

10 antwoorden

Gesponsorde links
Offline Jurgo - 07/04/2008 16:00
Avatar van Jurgo PHP interesse wat gaat er nu precies nog fout?
Offline Simax - 07/04/2008 16:05
Avatar van Simax Onbekend de content rekt niet mee, zodra de pagina groter word dan 100%
Offline Jurgo - 07/04/2008 16:07
Avatar van Jurgo PHP interesse hoe ziet je css eruit?
Offline Simax - 07/04/2008 16:10
Avatar van Simax Onbekend style.css
css code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body
  2. {
  3. 	background:			#dfe4e8;
  4. 	height:				100%;
  5. 	text-align:			center;
  6. }
  7.  
  8. .container
  9. {
  10. 	background:			#ffffff;
  11. 	height:				auto !important;
  12. 	height:				100%;
  13. 	margin:				0 auto;
  14. 	min-height:			100%;
  15. 	position:			relative;
  16. 	text-align:			left;
  17. 	width:				800px;
  18. }
  19.  
  20. .header
  21. {
  22. 	height:				350px;
  23. 	width:				800px;
  24. }
  25.  
  26. .header_logo
  27. {
  28. 	background:			url(images/logo.gif);
  29. 	float:				left;
  30. 	height:				110px;
  31. 	width:				240px;
  32. }
  33.  
  34. .header_picture
  35. {
  36. 	background:			url(images/header.gif);
  37. 	float:				left;
  38. 	height:				349px;
  39. 	width:				560px;
  40. }
  41.  
  42. .header_menu
  43. {
  44. 	height:				240px;
  45. 	width:				240px;
  46. }
  47.  
  48. .content_left
  49. {
  50. 	float:				left;
  51. 	width:				650px;
  52. }
  53.  
  54. .content_right
  55. {
  56. 	background:			#fcc300;
  57. 	float:				left;
  58. 	height:				500px;
  59. 	width:				150px;
  60. }
  61.  
  62. .footer
  63. {
  64. 	border-top:			#cccccc solid 1px;
  65. 	bottom:				0;
  66. 	padding:			10px 0;
  67. 	position:			absolute;
  68. 	text-align:			center;
  69. 	width:				800px;
  70. }
Offline Jurgo - 07/04/2008 16:13
Avatar van Jurgo PHP interesse en je content heeft de container class?
Offline Simax - 07/04/2008 16:19
Avatar van Simax Onbekend index.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="container">
  2.   <div class="header">
  3.     <div class="header_logo"></div>
  4.     <div class="header_picture"></div>
  5.     <div class="header_menu">
  6.       <a href="?page=home" class="menu_button"><img src="images/menu/home.gif"/></a>
  7.       <a href="?page=producten" class="menu_button"><img src="images/menu/producten.gif"/></a>
  8.       <a href="?page=voorwaarden" class="menu_button"><img src="images/menu/voorwaarden.gif"/></a>
  9.       <a href="?page=service_onderhoud" class="menu_button"><img src="images/menu/service_onderhoud.gif"/></a>
  10.       <a href="?page=garanties" class="menu_button"><img src="images/menu/garanties.gif"/></a>
  11.       <a href="?page=home" class="menu_button"><img src="images/menu/button6.gif"/></a>
  12.       <a href="?page=userpanel" class="menu_button"><img src="images/menu/mijn_account.gif"/></a>
  13.       <a href="?page=home" class="menu_button"><img src="images/menu/button8.gif"/></a>			
  14.     </div>
  15.   </div>
  16.   <div class="content">	
  17.     <div class="content_left"></div>
  18.     <div class="content_right"></div>
  19.   </div>
  20.   <div class="footer">
  21.     Webshop &copy; 2008
  22.   </div>
  23. </div>
Offline Jurgo - 08/04/2008 08:49
Avatar van Jurgo PHP interesse in je index.php spreek je een class "content" aan. Maar deze mis ik in je css..?
Offline Simax - 08/04/2008 10:34
Avatar van Simax Onbekend Omdat deze geen waardes heeft..
Offline Ontani - 08/04/2008 10:36 (laatste wijziging 08/04/2008 10:37)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 daar gaat het probleem hoogstwaarschijnlijk zitten, die zal ook een min-height van 100% moeten hebben.

Elke container moet een hoogte hebben.
Offline Simax - 08/04/2008 11:20 (laatste wijziging 08/04/2008 17:05)
Avatar van Simax Onbekend De container heeft een min-height..
En de content heeft geen opmaak nodig, kijk maar in het artikel..
[url]http://www.gigadesign.be/2006/07/layout-met-100-hoogte/[/url]
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.197s