login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Footer probleem

Offline radem205 - 21/01/2006 11:44 (laatste wijziging 21/01/2006 11:51)
Avatar van radem205Nieuw lid Hey,

Ik wil graag dat de footer onderaan de pagina komt te staan en mee beweegt wanneer de content langer is dan de viewport van de browser. Dus wanneer de tekst korter is dan de viewport dat dan de footer onderaan de viewport komt te staan en als de tekst langer is dan de viewport dat ie dan mee gaat met de tekst.

Nu heb ik onderstaande code en deze werkt perfect in IE, maar in Firefox komt de footer niet onderaan de viewport te staan als de tekst korter is dan de viewport (de footer beweegt wel mee met de content).

Weet iemand wat ik fout doe?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <title>
  3. <style type="text/css">
  4.  
  5. html { 
  6.     width: 100%; 
  7.     height: 100%;
  8. }
  9. html>body, html>body #holder { 
  10.     height: auto;
  11. }
  12. body { 
  13.     position: relative;
  14.     min-height: 100%;
  15.     margin: 0; 
  16.     padding: 0; 
  17.     background: url(images/achtergrond2.jpg) repeat-y 50% 0;
  18. }
  19. #holder { 
  20.     min-height: 100%;
  21.     width: 748px;
  22.     position: relative; 
  23.     margin: 0 auto;
  24.     height: 100%;
  25. }
  26.  
  27.  
  28. #content {
  29.     margin-left: 191px; 
  30.     margin-top: 60px; 
  31.     padding-bottom: 3em; 
  32.     height: auto;
  33.     background: url(images/index_12.jpg) no-repeat;
  34.     background-position: top right;
  35. }
  36.  
  37. #footer {
  38.     clear: both; 
  39.     width: 748px;
  40.     height: 20px;    
  41.     background-color: gray;
  42.     position: absolute; 
  43.     bottom: 0; 
  44.     left: 0; 
  45.     border: none; 
  46. }
  47.  
  48. #nav p, #content p {
  49.     margin: 0px 10px 10px 10px;
  50.     font-family: Verdana, Century Gothic, Arial;
  51.     font-size: 10px;
  52.     color: #000000;
  53.     line-height: 155%;
  54.     width: 365px;
  55.  
  56.  
  57. }
  58. #nav ul {margin-left: 0; padding-left: 0;}
  59. #nav li {margin: 0 1em 0 2em;}
  60. </style>
  61. <!--[if lt IE 7]>
  62.         <style type="text/css"> body { height: 100%; } </style>
  63.   <![endif]-->
  64. </head>
  65. <body>
  66. <div id="holder">
  67.             <div id="header">
  68.                      </div>
  69.            <div id="navigatie">
  70.                      </div>
  71.             <div id="home">
  72.                     </div>
  73.            <div id="informatie">
  74.                     </div>
  75.            <div id="diensten">
  76.                     </div>
  77.            <div id="portfolio">
  78.                     </div>
  79.            <div id="contact">
  80.                    </div>
  81.            <div id="balkonder">
  82.                    </div>
  83.            <div id="nav">
  84.                   <div id="balkonder2">
  85.                              </div>
  86.                   <div id="klantenlogin">
  87.                              </div>
  88.                   <div id="headlines">
  89.                              </div>
  90.                    </div>
  91.            <div id="balkonder3">
  92.                    </div>
  93.            <div id="content">
  94.  
  95. <p>
  96. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam convallis est sed sapien. Nunc viverra dolor. Quisque luctus pulvinar arcu. Phasellus condimentum lorem nec purus. Curabitur sagittis, nisl nec ullamcorper tempor, enim arcu venenatis tellus, id accumsan magna lacus sed sem. Nulla facilisi. Suspendisse et erat. Suspendisse potenti. Phasellus lacus. Praesent est. Quisque dolor massa, sagittis sit amet, porttitor et, semper at, lacus. Sed facilisis arcu venenatis nisi aliquam laoreet. Quisque euismod dolor eu urna. Cras varius libero vitae nulla. Sed vitae elit vel tellus ullamcorper consectetuer. Vestibulum vitae purus at turpis auctor rutrum. 
  97. </p>
  98.  
  99.                  </div>
  100.           <div id="footer">
  101.                 </div>
  102. </div>
  103. </body>
  104. </html>

2 antwoorden

Gesponsorde links
Offline Duikboot - 21/01/2006 11:47
Avatar van Duikboot Grafische gevorderde Check regels even: voorzie het bericht eventueel van codefragmenten (géén lappen text)

Post het stukje waarvan jij denkt dat het fout gaat, zo is het zoeken naar een speld in een oceaan.
Offline radem205 - 21/01/2006 11:49 (laatste wijziging 21/01/2006 11:51)
Avatar van radem205 Nieuw lid Maar ik weet dus echt niet meer waar het aan ligt, heb al heel veel geprobeerd dus is moeilijk te zeggen waar het probleem zit.

Heb ff wat codes verwijderd waarvan ik denk dat het daar niet aan ligt
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.339s