CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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>

Synes godt om

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>

Synes godt om

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 : )

Synes godt om

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!

Synes godt om

kirsten Nybegynder

20. august 2011 - 04:06 #4

Du har ret.
Fandt ud af at det er en ul liste der er problemet.....

Synes godt om

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

Synes godt om

Slettet bruger

20. august 2011 - 12:31 #6

Også tæt på : )

li display:inline-block
væk med float - altid : )

Synes godt om

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>

Synes godt om

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!

Synes godt om

Slettet bruger

24. august 2011 - 07:16 #9

gerne et svar!

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS