Footer onderaan de website

  • Onderwerp starter Onderwerp starter Criz
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
C

Criz

Gebruiker
Lid geworden
19 feb 2009
Berichten
42
Ik ben al urenlang bezig de footer op mijn website onderaan de website te plaatsen, helaas nog zonder succes. Doordat de ene pagina langer van de website langer is dan de andere, is het niet mogelijk om de footer onderaan de pagina in de browser te plaatsen. Het is dus de bedoeling de footer altijd onderaan de website te plaatsen (ongeacht een verticale scroll of niet). Wie kan mij helpen?

CSS:
Code: 
.header-container {
	margin:0;
	padding:0;
	background: url(../images/header-bg.jpg) no-repeat top left;
	height:609px;	
}	

.main-container {
	margin:0;
	padding:0;
}
.main-container .content {
	margin: 0 auto;
	padding: 0;
	width:980px;
}

.footer-container  {
	margin:0;
	padding:0;
	background:url(../images/footer_bg.png) repeat-x top left;
	height:98px;
}

Alvast bedankt :)
 
zet dit onderaan de code waar je de footer wilt, dus na alles inhoud etc
<div id="footer">
</div>
zet in je css
#footer
{
min-height:200px;
background-color:#fafafa;
}

kijk eens of dat werkt.
 
Bedankt voor je reactie! Deze code maakt mijn footer langer en dat is niet de bedoeling. Het is juist de bedoeling dat mijn footer een height van 98px moet behouden die onderaan de website blijft hangen.
 
dan maak je er max-height:98px van in je css ;)
 
Daarmee komt de footer nog niet onderaan de website.
 
plaats je html code eens dat is iets makkelijker.
 
Code: 
<!doctype html>
<html>
<head>
	<title>...</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="...">	
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/pagina.css">
    
</head>
<body>
<div class="header-container">
    <div class="header">
		<div class="header-logo">
     	 <a href="index.html">
          <img src="images/header-logo.png" class="logo" >
         </a>
    </div>
        
      <div class="navigatie">
      	 <a href="index.html">
          <img src="images/link_home.png">
         </a>
         
         <a href="portfolio.html">
          <img src="images/link_portfolio.png" >
         </a>
         
         <a href="over-mij.html">
          <img src="images/link_overmij.png" >
         </a>
         
          <a href="contact.html">
           <img src="images/link_contact.png">
          </a> 
      </div>
    </div>
</div>


<div class="main-container">
	<div class="content">
    	<div class="main">
            <h1>Over Mij</h1>
            <hr>
        <p class="info-text-column">
       ... 
       </p>
        </div>
    </div>
</div>

<div class="footer-container">
	<div class="footer">
		<div class="footer-first">
            <div class="footer-logo"></div>
            
            <div class="footer-nav">
                <a href="index.html">Home</a> |
                <a href="portfolio.html">Portfolio</a> |
                <a href="over-mij.html">Over mij</a> |
                <a href="contact.html">Contact</a>
            </div>
            
            <ul class="socialmedia">
                <li>
                 <a href="/" target="_blank">
                  <img src="images/sm_twitter.png" class="sm-icon" alt="twitter">
                 </a>
                </li>
                
                <li>
                 <a href="/" target="_blank">
                  <img src="images/sm_linkedin.png" class="sm-icon" alt="linked in">
                 </a>
                </li>
                
                <li>
                 <a href="/" target="_blank">
                  <img src="images/sm_deviantart.png" class="sm-icon" alt="deviantart">
                 </a>
                </li>
           </ul> 
       </div>
       <p class="copyright">
        DIGITALE PORTFOLIO | &copy; 2013
       </p> 
	</div>
</div>
</body>
</html>
 
zet in je css bij footer

position: absolute;
bottom: 0px;
width: 100%;

heb je een link naar je site dat is makkelijker testen
 
Dan moet je zorgen dat de inhoud altijd meer als 100% is dan is het beeld altijd hetzelfde (anders heb je soms wel een scrollbalk soms niet.
 
Net als op link verwijderd op verzoek staat hij wel goed toch?

en waarom gebruik je in je css .header en niet #header?
 
Laatst bewerkt door een moderator:
Dat maakt niet uit, sommige pagina's zijn langer dan andere pagina's. De homepagina is de langste, daar zullen bezoekers moeten scrollen. Bij het stukje over-mij zal er slechts twee alinea's met text komen, waardoor er bij de meeste resoluties geen scrollbar nodig is.
 
Je hebt toch multimedia design geleerd? of is dit niet jouw site?
ik dacht dat css er de basis van was.
 
Wat heeft dat te maken met dit topic? Tot op heden heb jij mij ook nog niet kunnen helpen nietwaar?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan