login  Naam:   Wachtwoord: 
Registreer je!
 Forum

divs lopen over footer

Offline clonedonkey - 22/09/2008 22:36 (laatste wijziging 22/09/2008 22:37)
Avatar van clonedonkeyNieuw lid Ik heb onderstaan css/html bestand. Het ziet er op het eerste gezicht prima uit. Alleen als er in left/middel/right tekst wordt gezet en deze is lang dan gaat deze over de footer heen. dit is natuurlijk niet de bedoeling. de bedoeling is dat als er meer in left/middel/right wordt gepost dat deze dan langer worden en de footer gewoon naar onder verschuift. Hoe kan ik dit bereiken ? Alvast bedankt !

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=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. html,body{
  9. padding:0;
  10. margin:0;
  11. height:100%;
  12. background-color: #8d8f8e;
  13. } 
  14. #container{ 
  15. width:800px; 
  16. margin:0px auto; 
  17. height:100%; 
  18. min-height:100%; 
  19. margin-bottom:-19px;
  20. background-color:#ffffff;
  21. }
  22. div{
  23. margin:0px auto;
  24. } 
  25. html>body #container{ 
  26. margin-bottom:-131px; 
  27. height:auto; 
  28. } 
  29. #header{ 
  30. background-image:url(img/header1.jpg);
  31. height:111px;
  32. width:100%;
  33. } 
  34. #menu{
  35. height:37px;
  36. width:100%;
  37. background-image:url(img/menu.jpg);
  38. } 
  39. #content{
  40. width:100%;
  41. } 
  42. #clearfooter{
  43. height:10px;
  44. border-width:0;
  45. } 
  46.  
  47. #footer{ 
  48. background: repeat-x url(img/bottom1.jpg); 
  49. height:131px; 
  50. width:800px; 
  51. position:relative; 
  52. left:0; 
  53. bottom:-8px; 
  54. } 
  55. html>body #footer{ 
  56. position:static; 
  57. } 
  58. #left {
  59.     width:290px;
  60.     float:left;
  61.     background: repeat-x url(img/left.jpg);
  62.  
  63. }
  64. #middel {
  65.     width:312px;
  66.     float:left;
  67.     background: repeat-x url(img/middel.jpg); 
  68.  
  69. }
  70. #right {
  71.     width:198px;
  72.     float:left;
  73.     background: repeat-x url(img/right.jpg); 
  74.  
  75. }
  76. -->
  77. </style></head>
  78.  
  80. <div id="container"> 
  81.       <div id="header"></div> 
  82.       <div id="menu"></div>
  83.       <div id="content">
  84.  
  85.         <div id="left"></div>
  86.         <div id="middel"></div>
  87.         <div id="right"></div>
  88.  
  89.       </div>
  90.       <div id="clearfooter"></div> 
  91. </div> 
  92. <div id="footer"></div> 
  93. </body>
  94. </html>

16 antwoorden

Gesponsorde links
Offline vinTage - 22/09/2008 22:52
Avatar van vinTage Nieuw lid geen height opgeven (voor geen enkel elemant wat moet/mag groeien)
Offline clonedonkey - 22/09/2008 22:53
Avatar van clonedonkey Nieuw lid Doe ik toch ook niet ? left/middle/right hebben geen hoogte en deze staan in content welke ook geen hoogte heeft meegekregen.
Offline Martijn - 22/09/2008 23:02
Avatar van Martijn Crew PHP overflow: auto; zetten voor degene die meer inhoud heeft dan vakje groot is or scroll als je wilt dat die div scrollbaar word
Offline BramBo - 23/09/2008 09:11
Avatar van BramBo JS gevorderde in je clearfooter, clear: both; zetten?
Offline clonedonkey - 24/09/2008 12:33 (laatste wijziging 24/09/2008 12:34)
Avatar van clonedonkey Nieuw lid Met clear:both in de clearfooter gebeurt er niks. Als ik overflow:auto in de content zet werkt het bijna ! De footer blijft onderaan staan en de left/middle/right rekken zich netjes op. Enige probleem is dat de tekst dus nog over de footer gaat. Hoe los ik dit op ? Hierbij ook even een klein screenshotje van het probleem :

http://img1.foto-hosting.nl/407173css.jpg

De rode streep geeft aan waar de footer begint en waar de tekst dus eigenlijk moet eindigen.
Offline zointer - 24/09/2008 12:58
Avatar van zointer HTML gevorderde zet eens clear: both; in je footer en zie eens wat er gebeurd 
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #footer{ 
  2. background: repeat-x url(img/bottom1.jpg); 
  3. height:131px; 
  4. width:800px; 
  5. position:relative; 
  6. left:0; 
  7. bottom:-8px; 
  8. clear: both;
  9. }
Offline clonedonkey - 24/09/2008 15:03
Avatar van clonedonkey Nieuw lid Gebeurt niks. Probleem blijft het zelfde helaas..
Offline zointer - 24/09/2008 15:29
Avatar van zointer HTML gevorderde inderdaad in ie gebeurd er niks maar wel met ff
Offline clonedonkey - 24/09/2008 15:47
Avatar van clonedonkey Nieuw lid Nee want gebruik juist alleen firefox...
Offline zointer - 24/09/2008 16:02
Avatar van zointer HTML gevorderde  ff - ie
Offline Kr4nKz1n - 24/09/2008 16:08 (laatste wijziging 24/09/2008 16:09)
Avatar van Kr4nKz1n Onbekend Al gekeken naar:
overflow: hidden;
?

Edit

Die left en die right moeten die meegaan zolang middle content heeft?
Offline clonedonkey - 24/09/2008 16:10 (laatste wijziging 24/09/2008 16:12)
Avatar van clonedonkey Nieuw lid Raar. Want hier doet hij het in FF toch echt niet goed. Doet het ook in IE beter dan wat jij laat zien. Hierbij even de site online gezet. Heb de images niet kunnen uploaden aangezien deze nog niet openbaar gemaakt mogen worden. Maar zoals je kan zien loopt de lorem tekst helemaal tot onderaan de site waar eigenlijk de footer van 131px hoog staat

http://www.maxi-hosting.nl/dump/

@Kr4nKz1n : waar zou ik die overflow moeten zetten of juist niet ? En left/middle/right mogen allemaal afzonderlijk lang worden zegmaar. Het is niet zo dat als left 1000px. hoog wordt dat middle en right dat ook moeten. Mag wel maar hoeft niet. Zolang left er dan maar voor zorgt dat de footer op zijn plaats blijft, onderaan 
Offline Kr4nKz1n - 24/09/2008 16:23
Avatar van Kr4nKz1n Onbekend In middel.

Ook moet je in clearfooter
clear: both hebben staan.

Ik zelf heb ook zo`n soort probleem gehad en heb gewoon veel op internet gezocht en veel geprobeerd. Aanhouder wint.
Offline clonedonkey - 24/09/2008 16:27
Avatar van clonedonkey Nieuw lid Heb het toegepast maar geen resultaat weer helaas. Snap er zelf helemaal niks meer van Site met nieuwe toevoegingen is weer te vinden op
http://www.maxi-hosting.nl/dump/
Offline Kr4nKz1n - 24/09/2008 16:32
Avatar van Kr4nKz1n Onbekend
php 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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. html,body
  8. {
  9. 	padding:0;
  10. 	margin:0;
  11. 	background-color: #8d8f8e;
  12. } 
  13. #container
  14. { 
  15. 	width:800px; 
  16. 	height:100%; 
  17. 	min-height:100%; 
  18. 	background-color:#ffffff;
  19. }
  20. div
  21. {
  22. 	margin:0 auto;
  23. } 
  24.  
  25. #header
  26. { 
  27. 	background-image:url(img/header1.jpg);
  28. 	height:111px;
  29. 	width:100%;
  30. } 
  31. #menu
  32. {
  33. 	height:37px;
  34. 	width:100%;
  35. 	background-image:url(img/menu.jpg);
  36. } 
  37. #content
  38. {
  39. 	width:100%;
  40. 	overflow: hidden;
  41. } 
  42.  
  43. #left
  44. {
  45.     width:290px;
  46.     float:left;
  47.     background: repeat-x url(img/left.jpg);
  48.  
  49. }
  50. #middel
  51. {
  52.     width:312px;
  53.     float:left;
  54.     background: repeat-x url(img/middel.jpg); 
  55.  
  56. }
  57. #right
  58. {
  59.     width:198px;
  60.     float:left;
  61.     background: repeat-x url(img/right.jpg); 
  62.  
  63. }
  64.  
  65. #footer
  66. { 
  67. 	background: repeat-x url(img/bottom1.jpg); 
  68. 	height:131px; 
  69. 	width:800px; 
  70. 	left:0; 
  71. 	bottom:-8px; 
  72. } 
  73.  
  74. -->
  75. </style></head>
  76.  
  77. <body>
  78. <div id="container"> 
  79.       <div id="header"></div> 
  80.       <div id="menu"></div>
  81.       <div id="content">
  82.  
  83.         <div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam non orci. Aliquam urna dui, bibendum sit amet, suscipit sed, ultricies blandit, enim. Morbi vel nunc sagittis nibh commodo feugiat. Nunc ornare, purus quis suscipit sodales, purus purus consequat neque, eu congue ligula libero in nisi. Donec tristique ultricies nisl. Aenean ante ipsum, dignissim sit amet, aliquam nec, fringilla id, pede. Ut volutpat, erat vel consectetuer dictum, risus lacus bibendum neque, eu imperdiet nisi diam at diam. Vivamus placerat augue vitae neque. Morbi commodo. Integer sed est. Nam at nibh sed dui congue pellentesque. Curabitur ullamcorper auctor purus. Nulla nunc est, egestas vitae, iaculis vitae, mattis vel, lacus.</div>
  84.         <div id="middel">Vivamus gravida adipiscing metus. Pellentesque sed lectus eget dolor tempor congue. Phasellus commodo aliquet sem. Suspendisse sed mi. Nulla tellus. In congue dolor nec lorem. Vestibulum nulla enim, eleifend vel, facilisis et, luctus sit amet, mi. Mauris a felis. Ut sed mauris. Aenean sollicitudin tristique lacus.</div>
  85.         <div id="right">Duis vel ante eu justo fermentum commodo. Maecenas posuere orci. Maecenas a odio eget magna egestas vestibulum. Mauris suscipit, nibh vel interdum volutpat, mi lacus dapibus lorem, quis euismod turpis diam non diam. Suspendisse ut lorem vel nisi eleifend ornare. Nam cursus, velit quis eleifend ultrices, nulla tortor aliquam enim, ut scelerisque diam arcu at mi. Aliquam erat volutpat. Donec eleifend ipsum ac turpis. Etiam vitae augue. Nunc tincidunt pede. Vestibulum bibendum ornare tortor. Nunc vitae ligula non nulla dignissim blandit. Phasellus iaculis, pede vitae eleifend rhoncus, diam diam euismod metus, at convallis nunc neque quis dui.</div>
  86.  
  87.       </div>
  88.       <div id="clearfooter"></div> 
  89. </div> 
  90. <div id="footer">De footer dan</div> 
  91. </body>
  92. </html>


Ik vind dat je onnodig veel CSS-code al hebt.

Maar footer komt er zo bij mij onder. In IE en FF.
Offline clonedonkey - 24/09/2008 16:46 (laatste wijziging 24/09/2008 23:13)
Avatar van clonedonkey Nieuw lid Footer blijft nu niet helemaal onderaan de pagina staan. Tekst loopt inderdaad niet meer door de footer heen maar de footer moet ALTIJD helemaal onderaan de pagina blijven staan en dat doet hij nu helaas niet meer...

http://www.maxi-hosting.nl/dump/
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.205s