login  Naam:   Wachtwoord: 
Registreer je!
 Forum

footer positie (Opgelost)

Offline san - 30/03/2010 22:11 (laatste wijziging 30/03/2010 22:12)
Avatar van sanHTML interesse Ik heb een globale template gemaakt maar heb wat problemen met de footer. Deze verschijnt boven de witte balk(van de container) maar ik wil graag dat deze erop komt, dus meer naar beneden, maar krijg het niet voor elkaar.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  3. <div id="container"> 
  4.  
  5.    <div id="header">
  6.        <img src="kop/titel.png" width="900" height="140" alt="">
  7.    </div>
  8.  
  9. <div id="menu">
  10.     <a id="home" href="home.html"></a>
  11.     <a id="col" href="col.html"></a>
  12.     <a id="bestel" href="bestel.html"></a>
  13.     <a id="sale" href="sale.html"></a>
  14.     <a id="contact" href="contact.html"></a>
  15.     <a id="links" href="links.html"></a>
  16. </div>
  17.  
  18. <div id="sidebar">
  19.     <a id="arm" href="arm.html"></a>
  20.     <a id="ket" href="ket.html"></a>
  21.     <a id="oor" href="oor.html"></a>
  22.     <a id="ring" href="ring.html"></a>
  23.     <a id="tas" href="tas.html"></a>
  24. </div>
  25.  
  26. <div id="footer">Footer</div>
  27.  
  28. 	</div>
  29.  
  30. </body>
  31. </html>

css code - Bekijk de code zonder highlighting - Klap code in 
  1. body  {
  2. 	font-family: Arial, Verdana, Helvetica, sans-serif;
  3. 	font-size: 17px;
  4. 	background: #8800FF;
  5. 	color: #000000;
  6. 	margin:0;
  7. 	padding: 0;
  8. 	height: 100%;
  9. 	width: 100%;
  10. 	background-image: url(achtergrond.png);
  11. 	background-repeat: no-repeat;
  12. 	background-position: 50% 0%;	
  13. }
  14.  
  15. #container {
  16.    position: absolute;
  17.    left:50%;  
  18.    margin-left:-450px; 
  19.    min-height: 770px;
  20.    width: 900px;
  21.    background: #CCCCCC;	
  22.    border: 10px solid #FFFFFF;
  23.    border-bottom-style: solid;
  24.    border-bottom-color: #FFFFFF;
  25.    border-bottom-width: 15px;
  26. } 
  27.  
  28. #header { 
  29.    height: 80px;
  30. }
  31.  
  32. #menu {
  33.     width: 900px;
  34.     height: 53px;
  35.     margin-top: 60px;
  36.     background: #FFFFFF;
  37.     text-align: center;
  38.  }
  39.  
  40. #sidebar {
  41. 	float: left; 
  42. 	width: 141px;
  43. 	min-height: 580px;
  44. 	background: #999999;
  45. 	border-right-style: solid;
  46. 	border-right-color: #FFFFFF;
  47. 	border-right-width: 5px;
  48. 	height: 100%;
  49. }
  50.  
  51.  
  52. #footer {
  53. 	float: left;
  54.    	width: 890px;
  55.    font-size: 12px;
  56.    text-align: left;
  57.    padding-left: 5px;
  58. }

3 antwoorden

Gesponsorde links
Offline Jelmerholland - 30/03/2010 22:36 (laatste wijziging 30/03/2010 22:37)
Avatar van Jelmerholland PHP beginner Heb je 'm ook ergens geüpload staan? Dan kan men het wat beter visualiseren Want ik snap er niet veel van, welke 'de witte balk' ? Verklaar je nader aub.
Offline Joost - 30/03/2010 22:40
Avatar van Joost PHP expert Je witte balk is je border. Voor zover ik weet kan je een div daar niet boven krijgen, in ieder geval niet zonder z-index, maar zoveel verstand heb ik niet van css.

Wat je misschien wel kan doen, is de border-bottom 0px maken, zodat er geen border zit ;)
Bedankt door: san
Offline nick5556 - 31/03/2010 11:22
Avatar van nick5556 PHP beginner Joost heeft inderdaad gelijk,

css code - Bekijk de code zonder highlighting - Klap code in 
  1. border-bottom: 0px;


in je container toevoegen.(dit is de toevoeging )

Anders kan je altijd nog je footer, buiten je container zetten, of een negative margin-bottom in je footer proberen.
Bedankt door: san
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.193s