Avatar billede optur Novice
16. oktober 2014 - 18:03 Der er 2 kommentarer og
1 løsning

Sticky footer problem

Hej, jeg har lidt problemer med en kode jeg ikke kan få til at virke.

min html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="form.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<title>Forstenet.dk</title>
</head>
<body>
    <div id="header">
    <div id="navigation">
        <img id="logo" src="images/forstenet-logo.png">
        <ul class="tablist">
            <li<?php if($page=='home') { ?> id="current" <?php } ?>><a href="<?php $_SERVER['PHP_SELF'];?>?page=home">Forside</a></li>
            <li<?php if($page=='portfolio') { ?> id="current" <?php } ?>><a href="<?php $_SERVER['PHP_SELF'];?>?page=portfolio">Portfolio</a></li>
            <li<?php if($page=='contact') { ?> id="current" <?php } ?>><a href="<?php $_SERVER['PHP_SELF'];?>?page=contact">Kontakt</a></li>
        </ul>
    </div>
    </div>
    <div id="content">
    <?php content($page); ?>
    </div>
    <div id="footer"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/contact_form.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</body>
</html>

og min css

/* CSS Document */

p {
    margin:0px;
    padding:0px;
}

h1 {
    margin:0px;
    padding:0px;
}

body {
    margin:0px;
    padding:0px;
    background-image:url(images/bg.jpg);
    background-color:#CCC;
    background-repeat:repeat-x;
    font-family:Tahoma, Geneva, sans-serif;
    line-height:2em;
    margin: 0 0 352px; /* bottom = footer height */
}

#header {
    position:absolute;
    width:100%;
    height:200px;
    background-color: rgba(60,132,200,1);
    background: @include filter-gradient(#3c84c8, #28659a, vertical);
    background: @include background-image(linear-gradient(top, rgba(60,132,200,1) 0%, rgba(40,101,154,1) 100%));
    border-bottom:1px solid #666;
}

    #logo {
        float:right;
        margin-top:-130px;
        margin-right:130px;
    }

    #navigation {
        position:relative;
        width:980px;
        margin:0px auto;
        top:171px;
        left:20px;
    }
   
    #navigation .tablist {
        list-style:none;
        height:2em;
        padding:0;
        margin:0;
        border: none;
    }
   
    #navigation .tablist li {
        float:left;
        margin-right:0.13em;
    }
   
    #navigation .tablist li a {
        display:block;
        padding:0 1em;
        text-decoration:none;
        border:0.06em solid #666;
        border-bottom:1px solid #666;
        font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
        color:#000;
        background-color: rgba(255, 255, 255, 0.7);
   
        /* CSS 3 elements */
        webkit-border-top-right-radius:0.50em;
        -webkit-border-top-left-radius:0.50em;
        -moz-border-radius-topright:0.50em;
        -moz-border-radius-topleft:0.50em;
        border-top-right-radius:0.50em;
        border-top-left-radius:0.50em;
    }
   
    #navigation .tablist li a:hover {
        background:#FFF;
        color:#000;
        text-decoration:none;
    }
   
    #navigation .tablist li#current a {
        background-color: #FFF;
        color: #000;
        border-bottom:1px solid #FFF;;
    }
    #navigation .tablist li#current a:hover {
        background-color: rgba(255, 255, 255, 0.7);
    }

#content {
    position:relative;
    width:940px;
    min-height:100%;
    margin:0px auto;
    top:202px;
    /*background-color:#FFF;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;*/
    padding:25px 30px 15px 30px;
    border:1px solid #FF0;
}

/*#footer {
    position:relative;
    background-color:#F00;
    width:100%;
    margin-top:202px;
    height:200px;;
}*/

#footer {
    position:absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    background-color: blue;
    margin-top:-202px;
}

jeg ved godt det er meget rodet.

siden kan ses her. www.forstenet.dk/tmp/
mit problem er at under kontakt der går indholdet ned under footeren og har søgt google tør og prøver alverdens sticky footer muligheder jeg kunne finde, men intet lader til at virke.

Kan i hjælpe?
Avatar billede keysersoze Guru
17. oktober 2014 - 07:33 #1
en sticky footer er position: fixed; med bottom: 0; og så har det øvrige indhold en margin-bottom svarende til højden på din footer.
Avatar billede optur Novice
05. november 2014 - 01:17 #2
jeg har droppet projektet, og startet forfra med et cms i stedet.
Tak for hjælpen
Avatar billede keysersoze Guru
05. november 2014 - 10:02 #3
Det gør da ingen forskel?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester