Notifikationer

Markér alle som læst Log ud

kgp43 Nybegynder

30. maj 2004 - 19:43 Der er 26 kommentarer og
1 løsning

Min footer er ikke placeret rigtigt

Hejsa (igen),

CSS er ved at tage livet af mig.
Jeg har en footer, men den ligger sig ikke i den "aktuelle" bund.
Prøv at scrolle og du vil se problemet:
http://www.tackleprices.com/merchant/

CSS:
/* ---- BOTTOM MENU ---- */
#bottom-menu {
position: absolute;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background-color: #004188;
}

Nogle forslag?

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 22:06 #1

min body:

body {margin:0px;text-align:center;height:100%;}

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 22:10 #2

prøv at starte med at omkranse alt indholdet (også alle de andre divs) i en div kaldet fx container:
<div id="container">
....
</div>

tilføj herefter dette til dit stylesheet:
html,body {height:100%;}
#container {
height:100%;
position:relative;
}
HTML > BODY #container {
height:auto;
min-height:100%;

}

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 22:12 #3

hov, der skal lige også stå:
#container {
height:100%;
position:relative;
padding-bottom:30px;
}
ellers kommer det nederste indhold ikke med

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 22:14 #4

og skriv så bare:
<div id="bottom-menu">
</div>
ellers ser det lidt dumt ud i mozilla. Man behøver nemlig ikke noget indhold i en div hvis man blot har defineret width og height

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 22:46 #5

Det løste problemet.
hehe, det er nok lidt upassende at kalde dig en skat, men takker for den store hjælp i dag :D

Btw. Jeg er med på den første del, men kan ikke lige se hvad dette betyder:

HTML > BODY #container {
height:auto;
min-height:100%;

}

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 22:50 #6

det er et lille trick man kan bruge hvis stylen virker anderledes i mozilla end i IE (og det er netop problemmet med højden). I IE udvider højden sig automatisk når den overskrider den beskrevne højde i CSS'en - men det gør mozilla og opera ikke.
Tricket er så at IE ikke kender til > selectoren men det gør mozilla og opera (i nyere versioner i hvert fald). På den måde vil IE ikke læse den ovenstående style, men det gør mozilla og opera - hvilket løser problemmet.

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 22:52 #7

og tak for point :-)

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 22:55 #8

Okay,

Det ser ud til der er en lille fejl.
Jeg har fjernet alle linieskiftene igen. Men som du kan se, så laver den siden for lang. Skyldes det "padding-bottom:30px", det ser nemlig ud til at det er præcis 30px ?

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:13 #9

Det ser ud til at virke fint hvis jeg fjerne "padding-bottom:30px". Er det noget der kan skabe problemer senere?

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:14 #10

ja, det har du ret i. Det kan løses ved at smide alt indholdet (altså der hvor du havde dine mellemrum og linieskift) ind i endnu en div (det bliver snart kompliceret hva' ;-)

Fx
<div id="content">
INDHOLD Og blablabla
</div>

i stylesheetet skal du så skrive:
#container {
height:100%;
position:relative;
}
#content {
padding-bottom:30px;
}
altså rykke padding-bottom ned i #content. Så burde det virke :-)

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:15 #11

padding-bottom er nemlig til for at teksten ikke lige pludselig ryger om bag din footer-div. Det var derfor jeg lavede den i starten.

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:18 #12

Okay, det bliver lidt kompliceret nu. Vil det sige at mit stylesheet skal se sådan ud:

body {margin:0px;text-align:center;}
html,body {height:100%;}

#container {
height:100%;
position:relative;
}
HTML > BODY #container {
height:auto;
min-height:100%;
}
#bottom-menu {
position: absolute;
padding-bottom: 30px;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background-color: #004188;
}

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:19 #13

Og så skal containeren bare omkrandse mit dokument

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:20 #14

ja, den skal stadig være der, altså som du har den lige nu

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:22 #15

hov, du skal også tilføje #content til stylesheetet.

Min html ser umiddelbart sådan her ud:
<body>
<div id="container">
<div id="tab-layer">
<p> </p>
</div>

<div id="main-menu">
<p> </p>
</div>
<div id="bottom-menu">
</div>
<div id="content">

</div>
</div>
</body>

og stylesheetet sådan her:
html,body {height:100%;}
body {margin:0px;text-align:center;}
#bottom-menu {
position: absolute;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background-color: #004188;
}
#container {
height:100%;
position:relative;
}
#content {
padding-bottom:30px;
}
HTML > BODY #container {
height:auto;
min-height:100%;

}

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:22 #16

Der går kludder i det nu, footeren får dobbelt højde.

Dette er mit stylesheet (komplet):

/* CSS Document */

body {margin:0px;text-align:center;}

html,body {height:100%;}
#container {
height:100%;
position:relative;
}
HTML > BODY #container {
height:auto;
min-height:100%;

}

/* ---- TOP MENU (TABS), [ALL IN ONE] ---- */
#tab-center {
position:relative;
margin:0px auto;
width:40%;
z-index: 1;
}
#tab {
position: relative;
top: 64px;
height: 22px;
width: 25%;
background-color: #004188;
float:left;
color:#FBF9CA;
padding-top: 3px;
z-index: 2;
}
#tab-layer {
position: absolute;
left: 0px;
top: 64px;
height: 25px;
width: 100%;
background-color: #004188;
color: #FFFFFF;
}

/* ---- MAIN MENU ---- */
#main-menu {
position: absolute;
left: 0px;
top: 90px;
height: 40px;
width: 100%;
background-color: #002651;
}

/* ---- BOTTOM MENU ---- */
#bottom-menu {
position: absolute;
padding-bottom: 30px;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background-color: #004188;
}

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:24 #17

Men #content tilhører den ikke min #bottom-menu?

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:24 #18

det er ikke #bottom-menu der skal have padding-bottom:30px men #content (som du så skal lave). Prøv at se min seneste kommentar

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:25 #19

nej, det er en helt anden div - der hvor du skal tilføje dit indhold (hvis du altså har noget).

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:26 #20

Okay.
Er det så rigtigt at #content kun skal bruges ved min footer?

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:27 #21

Ahhh.... #content er altså div'et i min footer, hvor indholdet skal postes

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:28 #22

altså, det jeg havde tænkt mig var at din html så nogenlunde sådan her ud:
<body>
<div id="container">
<div id="tab-layer">
<p> </p>
</div>

<div id="main-menu">
<p> </p>
</div>
<div id="bottom-menu">
</div>
<div id="content">

</div>
</div>
</body>

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:31 #23

Sådan ser den også ud, jeg har bare omdøbt "content" til bottom-menu-content.
Siden er opdateret, men footeren har stadig dobbelt størrelse... weird

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:36 #24

det fordi du stadig har padding-bottom:30px i din #bottom-menu. Fjern den så burde det virke.

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:39 #25

hehe, det er jo superb :)

Tror lige jeg skal læse det stylesheet grundigt igennem imorgen. Set er blevet tilføjet en masse og har ikke så meget overblik over det mere - trænger nok bare til noget søvn :P

Takker for din hjælp endnu engang :)

Synes godt om

skovenborg Nybegynder

30. maj 2004 - 23:45 #26

jamen godnat da - og held og lykke :-)

Synes godt om

kgp43 Nybegynder

30. maj 2004 - 23:50 #27

Tak skal du have.

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

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS