login  Naam:   Wachtwoord: 
Registreer je!
 Forum

CSS:footer verdwenen (Opgelost)

Offline janwillem117 - 16/01/2009 16:43
Avatar van janwillem117Nieuw lid ik ben een site aan het maken met css nu heb ik het al bijna klaar maar de footer doet het niet meer,
de site http://www.kleurrijkpalet.nl/goed/

hier de code:
style.css
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #header {
  2. height: 150px;
  3. width:800px;
  4. background-image:url("images/header.png");
  5. }
  6.  
  7. #menu {
  8. width:800px;
  9. height:28px;
  10. background-image:url("images/menu.png");
  11. }
  12.  
  13. #inhoud {
  14. width:650px;
  15. height:400px;
  16. background-image:url("images/achtergrond.png");
  17. float: left;
  18. }
  19.  
  20. #thumbs {
  21. width:150px;
  22. height:400px;
  23. background-image:url("images/thumbs.png");
  24. float: left;
  25. }
  26.  
  27.  
  28. #footer {
  29. background-image:url("images/footer.png");
  30. width:800px;
  31. height:50px;
  32. }
  33.  
  34. #container {
  35. width:800px;
  36. margin:auto;
  37. }
  38.  
  39. .style1 {
  40.     font-family: "Lucida Handwriting";
  41.     font-size: x-large;
  42. }
  43. .style2 {
  44.     font-family: "Lucida Handwriting";
  45. }


en de index.php:
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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3.  
  5. <meta http-equiv="Content-Language" content="nl" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Suzan Van Der Sman - Kleurrijkpalet.nl</title>
  8. <LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
  9. <script type="text/javascript" language="JavaScript1.2" src="images/um_menu.js"></script>
  10. </head>
  11.  
  12. <body style="background-color: #E0E0E0">
  13. <div id="container"><div id="header"></div><div id="menu"><script type="text/javascript" language="JavaScript1.2" src="images/menu.js"></script></div><div id="inhoud"></div><div id="thumbs"></div><div id="footer"></div></div>
  14. </body>
  15.  
  16. </html>


kan iemand mij vertellen hoe ik die footer goed krijg?

2 antwoorden

Gesponsorde links
Offline Romic - 16/01/2009 16:57 (laatste wijziging 16/01/2009 17:00)
Avatar van Romic Nieuw lid
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #footer {
  2. background-image:url("images/footer.png");
  3. width:800px;
  4. height:50px;
  5. clear: both;
  6. }

Onder floating elements moet je altijd een clear:both zetten
Offline Nanon - 16/01/2009 17:30 (laatste wijziging 16/01/2009 17:30)
Avatar van Nanon PHP interesse Handig is dus om een class te maken om floats te clearen.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .clear {
  2. clear: both;
  3. overflow: hidden;
  4. font-size: 0;
  5. line-height: 0;
  6. height: 0;
  7. }


En die plaats je dus boven je footer;

html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="clear"></div>

  2. <div class="footer">...</div>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.188s