Avatar billede kirsten Nybegynder
19. august 2011 - 20:10 Der er 8 kommentarer og
1 løsning

Sidefod

Hej som 1000 andre har jeg problemer med at få en sidefod til at blive i bunden af siden.
Som min css er nu forsvinder indholdet ind under sidefoden og vises igen efter sidenfoden...

Håber der er en css ekspert der kan hjælpe :-)

Css:

* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
    font-family: PTSansRegular, sans-serif;
    font-size: 15px;
    background-color: #ECECEC;
}
#header {
    color: #fff;
    background: #474750;
    height: 30px;
    border-width: 0 0 2px 0;
    border-style: none none solid none;
    border-color: #F89C31;
}
#header #login {
    float: right;
    width: 170px;
    padding: 4px 10px 0 0;
    background-image: url(images/log-in.png);
    background-repeat: no-repeat;
    text-align: right;
}
#logo {
    width: 300px;
    height: 90px;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;   
}
#container {
    background: #fff;
    width: 978px;
    margin: 0 auto;
    position: relative;
    height: auto !important;
    min-height: 100%;
    height: 100%;
    border-width: 0 1px 0 1px;
    border-style: none solid none solid;
    border-color: #474750;
}
#content {
    padding-bottom: 100px;
}
#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: #474750;
    border-width: 2px 0 0 0;
    border-style: solid none none none;
    border-color: #F89C31;
}

Html:

<div id="container">
    <div id="header">
        <div id="login">
        Du er ikke logget ind.
        </div>
  </div>
    <div id="content">
        <div id="logo">
        </div>
</div>
    <div id="footer">
        Footer here
    </div>       
</div>
Avatar billede claes57 Ekspert
19. august 2011 - 20:16 #1
jeg fik selv denne kode i et indlæg - det er ret genialt, da man ikke kender sidefod's placering før siden er optegnet, så der er indlagt en kort pause.
Denne kode er ydermere så genial, at den (når der er plads i bredden) kører i 3 kolonner, og ellers går ned på enkelt kolonne.
Det er koden til enkelt-kolonne, som du står og mangler.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=ISO-8859-1">
  <META HTTP-EQUIV="Content-language" CONTENT="dan">
  <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<title>HTML</title>
<style type="text/css">
html {width:100%;height:100%;}
body {width:100%;height:100%; margin:0; padding:0; overflow:auto;}
</style>
<script>
window.onresize=function(){reFit()}
function reFit()
    {
    if (document.body.clientWidth > 899)
        {
        document.getElementById("bl").style.position = "absolute"
        document.getElementById("bl").style.width = "300px"
        document.getElementById("bl").style.height = ""
        document.getElementById("bl").style.minHeight = "100%"

        document.getElementById("bc").style.position = "absolute"
        document.getElementById("bc").style.left = "300px"
        document.getElementById("bc").style.right = "300px"
        document.getElementById("bc").style.width = ""
        document.getElementById("bc").style.height = ""
        document.getElementById("bc").style.minHeight = "100%"
     
        document.getElementById("br").style.position = "absolute"
        document.getElementById("br").style.right = "0px"
        document.getElementById("br").style.width = "300px"
        document.getElementById("br").style.height = ""
        document.getElementById("br").style.minHeight = "100%"
     
        var h = Math.max(document.getElementById("bl").offsetHeight
                ,document.getElementById("bc").offsetHeight
                ,document.getElementById("br").offsetHeight)
        document.getElementById("bl").style.height = h+"px"
        document.getElementById("bc").style.height = h+"px"
        document.getElementById("br").style.height = h+"px"
        }
    else
        {
        document.getElementById("bl").style.position = "static"
        document.getElementById("bl").style.width = "100%"
        document.getElementById("bl").style.minHeight = ""
        document.getElementById("bl").style.height = ""

        document.getElementById("bc").style.position = "static"
        document.getElementById("bc").style.width = "100%"
        document.getElementById("bc").style.minHeight = ""
        document.getElementById("bc").style.height = ""

        document.getElementById("br").style.position = "static"
        document.getElementById("br").style.width = "100%"
        document.getElementById("br").style.minHeight = ""
        document.getElementById("br").style.height = ""

        setTimeout(function() // kender ikke footer/headers offsetHeight før rendering, vent 10 tix
            {
            var h = document.body.clientHeight
                - document.getElementById("bl").offsetHeight
                - document.getElementById("br").offsetHeight
            if (h > 0)
                document.getElementById("bc").style.minHeight = h+"px"
            }
        ,10)
        }
    }

</script>
</head>
<body onload="reFit();document.getElementById('splash').style.display='none'" bgcolor="#000000">

<div id="splash" style="position:fixed; top:0px;left:0px;right:0px;bottom:0px; z-index:2; background-color:#FEB;">
    Liige et øjeblik...
</div>

<div id="bl" style="background-color:#6C6; position:absolute; left: 0px; top:0px; text-align:center;">
    Venstre eller header
</div>

<div id="bc" style="background-color:#FEB; position:absolute; left: 0px; top:0px; text-align:center;">
    Midt
    <table border="3" height="400px" width="200px" align="center"><tr><td>fyld</td></tr></table>
</div>

<div id="br" style="background-color:#C66; position:absolute; right:0px; top:0px; text-align:center;">
    Højre<br>eller<br>footer
</div>

</body>
</html>
Avatar billede Slettet bruger
19. august 2011 - 23:37 #2
Det ser da ud til at funke glimrende..?

Bortset fra 2 pixels.
- Fordi din footer er 100px høj + 2px border-top = 102.
skal din content's padding-bottom også være 102px.
<!DOCTYPE html>
<html><head><title>Fodfæste</title><style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
    font-family: PTSansRegular, sans-serif;
    font-size: 15px;
    background-color: #ECECEC;
}
#header {
    color: #fff;
    background: #474750;
    height: 30px;
    border-width: 0 0 2px 0;
    border-style: none none solid none;
    border-color: #F89C31;
}
#header #login {
    float: right;
    width: 170px;
    padding: 4px 10px 0 0;
    background-image: url(images/log-in.png);
    background-repeat: no-repeat;
    text-align: right;
}
#logo {
    width: 300px;
    height: 90px;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;   
}
#container {
    background: #fff;
    width: 978px;
    margin: 0 auto;
    position: relative;
    height: auto !important;
    min-height: 100%;
    height: 100%;
    border-width: 0 1px 0 1px;
    border-style: none solid none solid;
    border-color: #474750;
   
    spadding-bottom:1px;
}
#content {
    padding-bottom: 102px;
}
#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: #474750;
    border-width: 2px 0 0 0;
    border-style: solid none none none;
    border-color: #F89C31;
}
</style></head><body>
<div id="container">
    <div id="header">
        <div id="login">Du er ikke logget ind.</div>
    </div>
    <div id="content">
        <div id="logo">Logo her</div>
       
        <div style="display:inline-block; height:400px; width:200px;border:2px dashed green;">
            Jeg fylder bare
        </div>
        <br>linje1
        <br>linje2
        <br>linje3
        <br>linje4

    </div>
    <div id="footer">
        Footer here
    </div>       
</div>
</body>
Ingen problemer i hverken Firefox, Chrome eller Opera  : )
Avatar billede Slettet bruger
19. august 2011 - 23:39 #3
Hov, jeg efterlog en linje nederst i container:
spadding-bottom:1px;
- den gør hverken fra eller til - væk!
Avatar billede kirsten Nybegynder
20. august 2011 - 04:06 #4
Du har ret.
Fandt ud af at det er en ul liste der er problemet.....
Avatar billede kirsten Nybegynder
20. august 2011 - 11:41 #5
Du kan måske svare mig på hvorfor det ikke virker med min ul liste ?

css :

#advert_list {
    margin:0 auto;
    width: 100%;
}
#advert_list ul {
    list-style-type: none;
    padding: 15px;
}
#advert_list li {
    float: left;
    display: inline;
    width: 350px;
    margin: 0 15px 25px 0;
    padding: 1em;
    border: 1px dotted gray;
    -moz-box-shadow: 0 0 10px 2px #cecece;
    -webkit-box-shadow: 0 0 10px 2px #cecece;
    box-shadow: 0 0 10px 2px #cecece;
}

html:

<div id="advert_list">
<ul>
<li>
noget fyld
</li>
</ul>
</div
Avatar billede Slettet bruger
20. august 2011 - 12:31 #6
Også tæt på : )

li  display:inline-block
    væk med float - altid : )
Avatar billede olebole Juniormester
20. august 2011 - 15:10 #7
<ole>

Man kan også bruge float, men det kræver naturligvis, at man efterfølgende ophæver float'en med clear.

Ønskes siden vist i browsere, der ikke hører til seneste generation, bør inline-block bruges lidt varsomt. Der har i tidligere browserversioner været forskellige renderingsproblemer med denne værdi - bl.a. med hensyn til white-space

/mvh
</bole>
Avatar billede kirsten Nybegynder
23. august 2011 - 18:14 #8
Jeg siger tusinde tak for input :-)
Hvis der er nogle der føler for point så smid gerne et svar!
Avatar billede Slettet bruger
24. august 2011 - 07:16 #9
gerne et svar!
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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