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

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?

Synes godt om

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

Synes godt om

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 .

Synes godt om

olebole Juniormester

18. februar 2013 - 23:10 #3

<ole>

Prøv at lægge et link til siden

/mvh
</bole>

Synes godt om

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.

Synes godt om

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>

Synes godt om

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...

Synes godt om

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.

Synes godt om

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>

</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>

Synes godt om

mclemens Nybegynder

23. februar 2013 - 11:50 #9

Bemærk dog at du ikke kan scrolle hvis musen er nede på footeren.

Synes godt om

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.

Synes godt om

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>

</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"> 
</div>
</div>

</body></html>

Synes godt om

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"> 
</div>
</div>

</body></html>

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
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
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

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