Søg
Avatar billede mortvader Nybegynder
18. februar 2013 - 21:04 Der er 12 kommentarer

Div align to bottom

Hejsa.

Jeg sætter min div i bunden sådan:

<style>
.footer{
  position:absolute;
  height:180px;
  background-color:black;
  bottom:0;
  width:100%;
  opacity:0.4;
  filter:alpha(opacity=40);
  margin-left:0px;
}
</style>

<body>
hello World
<div class=footer>
Det her er bunden
</div>
</body>


Men hvis jeg har rigtigt meget over min footer div, altså mere end et skærmbillede, så placeres footer diven i bunden af billedet, altså ikke i bunden af dokumentet. Men over dele af indholdet.

Hvordan får jeg footer div'en til ikke at placere sig foran det øvrige tekst?
Avatar billede Vixo Novice
18. februar 2013 - 21:53 #1
Husk lige "" rundt om class defineringen :)
Altså: <div class="footer">

Mener at den gør det fordi du har sat position:absolute;
Prøv at fjerne den og se om det virker :)
Avatar billede NielsErikP Mester
18. februar 2013 - 22:27 #2
Hej...

Kan du ikke bruge position:fixed ??

.footer {
position: fixed;
top:    //Din placering fra top til bunden af skærmen.
left:  //Din placering fra venstre på skærmen.
}



Og så skal du selvfølgelig huske "gåseøjene" ved både id  og class .
Avatar billede olebole Juniormester
18. februar 2013 - 23:10 #3
<ole>

Prøv at lægge et link til siden

/mvh
</bole>
Avatar billede mortvader Nybegynder
19. februar 2013 - 07:50 #4
@NielsErikP:

Nej, desværre. Fixed giver samme resultat som relative.

se her: http://www.godvagt.dk/testdefault.asp

@olebole:

Det er den her: http://www.godvagt.dk

Det ser fint nok ud på en alm monitor som vender horizontalt.
Men hvis man ser på den på en telefon eller tablet, hvor man vender skærmen på højkant, lægger footeren sig ikke i bunden af skærmen. Det er den effekt jeg gerne vil frem til.
Avatar billede olebole Juniormester
19. februar 2013 - 15:07 #5
Så er det rart at have en svingbar 24" monitor  *o)

Du skal ud i en lidt anden opbygning. Prøv at kikke på denne grundstruktur:

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper {
    position: relative;
    min-height: 100%;
    height:    100%;
    background: red;
}
#inner-wrapper {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 180px;
}
#footer {
    position: absolute;
    width: 100%;
    height: 180px;
    bottom: 0;
    background: yellow;
}
</style>
</head>
<body>

<div id="wrapper">
    <div id="inner-wrapper">
        Indhold
    </div>
   
    <div id="footer">
        Fodenden
    </div>
</div>

</body>
</html>
Avatar billede mortvader Nybegynder
19. februar 2013 - 15:35 #6
Hej Olebole.

Jeg synes ikke jeg får det ønskede resultat.

Hvis jeg fylder din div med indholdet op med linier:

    <div id="inner-wrapper">
        Indhold<br>
        linie<br>
        linie<br>
        linie<br>
        linie<br>
        linie<br>
(plus mange flere)
    </div>


og tester det, vises fodende-div'en stadig nederst på skærmen, foran linierne som fortsætter nedenunder, og ikke nederst i dokumentet.

Jeg tænker at jeg måske er nødt til at pakke det hele ind i en table med height 100% ?

Jeg ville dog hellere løse det med CSS hvis det var muligt...
Avatar billede NielsErikP Mester
19. februar 2013 - 21:38 #7
Hej...

Nej.. kan ikke se, hvad det er du vil have den til. Så hopper af.. En af Ekspertens "ubetalte" hajer er også igang.
Held og lykke.
Avatar billede mclemens Nybegynder
23. februar 2013 - 11:49 #8
Her er lidt gammelt som jeg havde liggende, doctype skal nok lige rettes plus lidt andet, men byg evt. videre på det hvis det virker ;).



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}

#bodyen{
  position:absolute;
  height:100%;
  width:100%;
  overflow:auto;
  background:#ccc;
}

#main{
  width:100%;
  float:right;
  background:#ccc;
}

#footerspc{
  clear:both;
  height:100px;
}

#footer {
  position:absolute;bottom:0px;left:0px;
  width:100%;
  height: 100px;
}
#footer2{
  margin-right:17px;
  height:100%;
  position:relative;
}
#footer3{
  background:#ddd;
  position:absolute;
  top:0px;left:0px;
  width:100%;
  height:100%;
  z-index:2;
}
</style>
<!--[if IE]><style type="text/css">#footer{z-index:2;}</style><![endif]-->
</head><body>

<div id="footer"><div id="footer2"><div id="footer3"> .footer..  </div></div></div>

<div id="bodyen">
<div id="main">main... start<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...main...slut</div><div id="footerspc">
</div>
</div>

</body></html>
Avatar billede mclemens Nybegynder
23. februar 2013 - 11:50 #9
Bemærk dog at du ikke kan scrolle hvis musen er nede på footeren.
Avatar billede mclemens Nybegynder
23. februar 2013 - 12:01 #10
Kan ikke lige huske hvorfor jeg lavede den så langhåret, tror der var lidt der drillede på forskellige browsere, samt lidt med baggrunde på elementer der ikke fulgte med m.v..

Men footeren flytter sig dog ikke nedad hvis der er mere indhold oventil ... hvis det er det som du ville have den til. Hvis det er kan jeg ikke lige gennemskue hvordan den bliver både fixed i bund af skærmbillede og placeret helt i bunden uden til skærm såfremt der er mere indhold end der er plads til uden at køre JS ind over.
Avatar billede mclemens Nybegynder
23. februar 2013 - 12:11 #11
Sådan, men skal ryddes op ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;min-height:100%;}

#bodyen{
  position:absolute;
  min-height:100%;
  width:100%;
  overflow:auto;
  background:#ccc;
}

#main{
  width:100%;
  float:right;
  background:#ccc;
}

#footerspc{
  clear:both;
  height:100px;
}

#footer {
  position:absolute;bottom:0px;left:0px;
  width:100%;
  height: 100px;
}
#footer2{
  height:100%;
  position:relative;
}
#footer3{
  background:#ddd;
  position:absolute;
  top:0px;left:0px;
  width:100%;
  height:100%;
  z-index:2;
}
</style>
<!--[if IE]><style type="text/css">#footer{z-index:2;}</style><![endif]-->
</head><body>



<div id="bodyen">
<div id="main">main... start<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main..<br>main...<br>main...<br>main...<br>main...<br>main...<br>main..<br>main...<br>main...<br>main...<br>main...<br>main...<br>main..<br>main...<br>main...<br>main...<br>main...<br>main...<br>main..<br>main...<br>main...<br>main...<br>main...main...slut</div>


<div id="footer"><div id="footer2"><div id="footer3"> .footer..  </div></div></div>

<div id="footerspc">&nbsp;
</div>
</div>

</body></html>
Avatar billede mclemens Nybegynder
23. februar 2013 - 12:27 #12
Gud hvor er det lang tid siden jeg har rodet med html og css ...



<!DOCTYPE html><html><head><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;}

#bodyen{
  position:absolute;
  min-height:100%;
  width:100%;
  background:#ccc;
}

#footerspc{
  clear:both;
  height:100px;
}

#footer {
  position:absolute;bottom:0px;left:0px;
  width:100%;
  height: 100px;background:#ddd;
}

</style>
</head><body>



<div id="bodyen">
main... start<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main..<br>main...<br>main...<br>main...<br>main...main...slut


<div id="footer"> .footer..  </div>

<div id="footerspc">&nbsp;
</div>
</div>

</body></html>
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
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 07:57 Pludselig begyndte min computer at larme Af lenej i PC
02/1117:28 Tekst format i Kodevinduet Af per2edb i Access
02/1116:55 Et pludselig opstået ikon på skrivebordet Af ErikHg i Windows
02/1110:32 Asus R565 legetøj Af Svend_J i PC
01/1118:59 Ang fifa 26 til Ps5 Af made18 i Andet software
White papers
Flere white papers »