Gå til innhold

CSS - Footer på bunn problem:

The Prodigy

Anbefalte innlegg

The Prodigy

The Prodigy

Skrevet
Skrevet (endret)

Hei,

 

Holder på med en side...

Hvordan få footer til å ligge helt på bunn..?

 

#footer {clear: both; margin: 0 0 0 195px; padding: 10px 0 0 0; width: 400px; border-top: 3px dotted #605e4c;}
#footer p {position: relative; margin: 0 10px; padding: 0 0 5px 0; font-size: 0.8em;}
#footer p span {position: absolute; right: 10px;}
#footer p span span {position: relative; right: 0; color: #ccc;}

 

 

----Redigert....

Endret av The Prodigy
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
The Prodigy

The Prodigy

Skrevet
  • Forfatter
Skrevet

Jeg jobber med det samme fil, som jeg hadde et annet problem på... 100% height.

 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">

 

bruker denne..?

 

 

hvordan får jeg footer til å ligge helt i bunn..?

Lenke til kommentar
Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet (endret)

Bruk en hovedramme,

<div id="ramme">
..innhold

<div id="bunn">
bla bla
</div>
</div>

 

Så gjør du følgende i stilskjemaet ditt

 

body,html
{
 height: 100%;
 min-height: 100%;
}
div#ramme
{
 position: relative;
 width: 960px; // eller hva du måtte ønske
 height: 100%;
 min-height: 100%;
 height: 100% !important;
}
div#bunn
{
 position: absolute;
 bottom: 100%;
 width: 100%;
}

 

Stilskjemaet blir valdiert, men med en warning. Dette er fordi vi bruker "height" to ganger for å lure IE..

 

 

..husk:

Du kan ikke bryte floats når du har et element med absolutt posisjon.

Endret av MrNeeon
Lenke til kommentar
  • 2 år senere...
Avean

Avean

Skrevet
Skrevet

Bumper denne siden jeg lurer litt på det samme. Men først så er noe av koden her feil. Sånn som footeren setter du som bottom: 0; istedenfor 100% for å få den helt nederst på siden.

 

Problemet mitt som jeg ikke har funnet noen løsning på enda. Er at jeg vil ha footeren helt nederst, og for å få til dette så må jeg bruke position: absolute. Problemet da oppstår med at divs som er absolutt posisjonert ikke tar hensyn til andre divs og resizer du vinduet da så havner den oppå andre divs.

 

Greitnok jeg kan sette footeren som relativt, men da må jeg angi en verdi på hvor den skal være. Jeg vil den skal være fluid pga innhold som kan bli større med tiden.

 

Her er koden sålangt som funker bortsett fra at footeren havner oppå tekst og alt mulig når du resizer vinduet. Jeg vil at den skal alltid være under innholdet.

 

[b]CSS:[/b]

#wrapper {
position: relative;
width: 1005px;
height: 100%;
min-height: 100%;
height: auto !important;
border: #000 1px solid;
margin: 0 auto;
}

#header {
position: absolute;
top: 0px;
}

#content {
   position: relative;
top: 280px;
left: 5px;
text-align: left;
width: 600px;
color: #000;

}

#footer {
position: absolute;
bottom: 0;
font-size: 10px;
font-family: Arial;
color: #069;
width: 1000px;


}

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...