Sticky footer werkt niet

  • Onderwerp starter Onderwerp starter Tdj
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
Tdj

Tdj

Gebruiker
Lid geworden
7 dec 2007
Berichten
125
Hallo,

Ik ben bezig met een website en ik wil daarin een sticky footer.
Helaas heb ik vele dingen geprobeerd maar het lukt mij maar niet om het voor elkaar te krijgen

Weet iemand hoe ik dit wel goed voor elkaar krijg?

Dit is mijn website:

Default.aspx
HTML: 
<body>
    <form id="form1" runat="server">

    <div class="Master">
        <asp:Image ID="Logo" runat="server" ImageUrl="~/images/logo.png" CssClass="Logo" />   
    </div>

    <div class="Footer">
        Copyright
    </div>

    </form>
</body>

Default.css
HTML: 
body
{    
    background-color: #004080;
}
.Master
{
    width: 1000px;
    height: 500px;
    margin: 50px auto 0 auto;
    background-color: #0082ff;
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.Logo
{
    right: -80px;
    bottom: -80px;
    position: absolute;
}
 
De link naar de website zien we niet
Waarom allemaal classen en geen id's (id's gebruik je een maal, header, footer enz. classes kan altijd gebruiken)
Misschien even googlen op sticky footer zou ja al een eind vooruithelpen
Mvg
Defietser
 
Ik ben net begonnen met het maken van websites en moet het allemaal nog leren.
Ik heb vele methodes al gezocht op internet, maar ze werken niet bij mij.
Ik snap ook niet waarom niet.
 
Ik heb hier een klein voorbeeldje gewoon gecopieeerd van het internet en voor het gemak heb ik een interne stylsheet gebruikt
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
clear: both; /*Multicolumn Layout With Sticky Footer clear: both toegevoegd*/
}
</style> 
</head>
<body>
	<div class="wrapper">
    	<p>Your website content here.</p>
       <div class="push"></div>
    </div>
    <div class="footer">
    	<p>Copyright (c) 2008</p>
    </div>
</body>
</html>
Dat werkt in verschillende browsers. je kan daar mee oefenen door de instellingen wat te veranderen en kijken wat er gebeurd.
Mvg
Defietser
 
Laatst bewerkt:
Bedankt voor je voorbeeldje.
Ik had deze ook al gevonden op een website maar dat werkte niet goed.

Ik heb al wel een ander oplossing op deze website gevonden.
Dit heeft mijn probleem opgelost.

Toch bedankt voor je hulp :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan