Notifikationer

Markér alle som læst Log ud

kimlarsen1978 Nybegynder

10. august 2008 - 17:57 Der er 25 kommentarer og
1 løsning

DIV skal ligge nederst i browser som "fixed". Virker ikke i IE

HEjsa
Jeg har lige inden </body> denne div:

<div id="sponsorbar">
<center>
<div id="banners">
<div id="sponsortype1" class="banner">div1</div>
<div id="sponsortype2" class="banner">div2</div>
<div id="sponsortype3" class="banner">div3</div>
<div id="sponsortype4" class="banner">div4</div>
<div id="sponsortype5" class="banner">div5</div>
</div>
</center>
</div>

CSS til sponsorbar:

div#sponsorbar{
bottom: 0px;
height: 60px;
left: 0pt;
margin: 0;
overflow: hidden;
position: fixed;
width: 100%;
z-index: 100;
border-top: 1px solid #000000;
background-color: #000000;
}

Dette skulle gerne gøre at mit DIV element blev placeret nederst i browservinduet og ved scroll så kører "siden" ind under DIV'en- DIV'en ligger altså som en slags browser bund.

Det virker som det skal i FireFox og Safari, men i Internet Explore, der kommer DIV helt i bunden af HTML siden - og altså ikke som bund i browseren.

Hvis jeg ændret til position: absolute så kommer den frem i bunden af IE, men følger så med siden når der scrolles...

Hjælp!

Synes godt om

w13 Novice

10. august 2008 - 18:20 #1

Hvilken Doctype bruger du?

Synes godt om

kimlarsen1978 Nybegynder

10. august 2008 - 18:32 #2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Synes godt om

kimlarsen1978 Nybegynder

10. august 2008 - 18:33 #3

Havde ingen Doctype til at starte med, men har så prøvet at sætte ovenstående ind, men det hjalp ikke...

Synes godt om

jesper-moeller Nybegynder

10. august 2008 - 22:15 #4

Årsagen er at IE ikke eller dårligt understøtter fixed posision.
Men det kan man komme uden om ved et CSS hack

http://tagsoup.com/cookbook/css/fixed/

Synes godt om

ssv Nybegynder

11. august 2008 - 09:57 #5

Altså, det her fungerer udemærket (lad være med at bruge <center> sammen med div's :-)):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#sponsorbar{
bottom: 0px;
height: 60px;
left: 0pt;
margin: 0;
overflow: hidden;
position: fixed;
width: 100%;
z-index: 100;
border-top: 1px solid #000000;
background-color: #000000;
}
body { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; }
.banner { background: red; width: 200px; float: left; margin: 10px 0 0 10px; }
</style>
</head>

<body>
<div style="width: 780px; background: #ccc; margin: auto; padding: 10px;">

Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />

</div>

<div id="sponsorbar">
<div id="banners">
<div id="sponsortype1" class="banner">div1</div>
<div id="sponsortype2" class="banner">div2</div>
<div id="sponsortype3" class="banner">div3</div>
<div id="sponsortype4" class="banner">div4</div>
<div id="sponsortype5" class="banner">div5</div>
</div>
</div>
</body>
</html>

Synes godt om

ssv Nybegynder

11. august 2008 - 10:00 #6

Og hvorfor egentlig lægge en sort streg på toppen af en sort baggrund? ;-)

Desuden er "Indhold<br />.." bare sludder-tekst, kun for test. Og du skal lige have en "display: inline" for at IE 6 ikke laver dobbelt-margin på .banner pga. float: left; hvis du vil gå efter min model. :-)

Synes godt om

mclemens Nybegynder

11. august 2008 - 13:21 #7

<!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-y:scroll;
background:#666;
}

#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...<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...slut</div>
<div id="footerspc"></div>
</div>

</body></html>

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 16:54 #8

Jeg kigger lige på jeres svar.

ssv 11/08-2008 09:57:45:
CENTER er sat ind for ellers vil den ikke lave centrer i FireFOX

Synes godt om

ssv Nybegynder

11. august 2008 - 17:12 #9

>> Margin: auto; som jeg har lagt ind gør tricket. Ellers kan du positionere div'et. Jeg mener at <center> er noget man bruger sammen med tables. Correct me if im wrong ;-)

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 17:19 #10

ssv 11/08-2008 09:57:45: Tak for indlægget. Hvis jeg gør som du og laver så meget sideindhold at jeg skal scrolle, så står "boksen" nederst på siden og ikke nederst i browseren - kan ikke se forskellen på dit og det jeg selv har skrevet i spørgsmålet? Afviser indtil videre dit svar...

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 17:20 #11

mclemens 11/08-2008 13:21:47: Tak for indlægget.
Det virker sådan set OK, men er dette CSS hak sikkert at bruge? Tænker om det virker ikke alle browsere/versioner?

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 17:50 #12

Hmmm - din test side virker som sagt fin, men når jeg implementere det på mit site, så står der bare FOOTER i toppen af siden ???

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 17:58 #13

hehe - det var mit stylesheet der var lagret i browseren så det var slet ikke slået igenne. Det er det nu og "foote'ren" er nu på, men den følger forsat med op og ned ved scroll

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 18:01 #14

Den gråkasse (foote'ren) har også en margin ude til højre når jeg sætter den på min side?

Noget må jeg jo gøre forkert...

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 18:26 #15

Nu har jeg kopieret mit enorme stylesheet ind på testsiden - og det virker fortsat 100%. Nogle ideer til hvorfor det så opføre sig anderledes på min "rigtige" side?

Synes godt om

mclemens Nybegynder

11. august 2008 - 18:32 #16

Kast lidt kildekode ...

M.h.t. hacket så var det hvad jeg kom frem til efter
at have leget med løsningen af et par spørgsmål med
position: fixed problemer i IE6. Umiddelbart virker
det fint i FF2-3 samt IE. (hacket var for at få IE
til at kaste laget op oventil, hvis laget lå på en
anden måde lå det vist oventil uden hacket, men så
kunne man ikke klikke på scrolleren i bunden med musen).

Synes godt om

mclemens Nybegynder

11. august 2008 - 18:36 #17

Hmm, for at lave det skulle der en margin-right på det ene element
(footer2) - det er måske sat lidt for lavt, jeg har øget det til
19px, og indsat det du skrev i starten - umiddelbart ser det fint ud her.

<!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-y:scroll;
background:#666;
}

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

#footer {
position:absolute;bottom:0px;left:0px;
width:100%;
height:60px;
}
#footer2{
margin-right:19px;
height:100%;
position:relative;
}
#footer3{
background:#ddd;
position:absolute;
top:0px;left:0px;
width:100%;
height:100%;
z-index:2;
}

div#sponsorbar{
height: 60px;
overflow: hidden;
border-top: 1px solid #000000;
background-color: #ff0000;
}

</style>

</head><body>

<div id="footer"><div id="footer2"><div id="footer3"><div id="sponsorbar">
<center>
<div id="banners">
<div id="sponsortype1" class="banner">div1</div>
<div id="sponsortype2" class="banner">div2</div>
<div id="sponsortype3" class="banner">div3</div>
<div id="sponsortype4" class="banner">div4</div>
<div id="sponsortype5" class="banner">div5</div>
</div>
</center>
</div></div></div></div>

<div id="bodyen">
<div id="main">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...slut</div>
<div id="footerspc"></div>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

11. august 2008 - 18:40 #18

Det kan være noget css der overskriver noget eksisterende
- eller margin/padding der påvirker elementers placering.
Du har <!doctype stående som det første i din kildekode ?

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 19:04 #19

Forhelvede da!
Nu har jeg siddet i næsten 2 timer og reloaded og reloaded og forsøgt op og ned. Også viser det sig satme at fucking FireFox og fucking IE har haft cach på css filen. FUCK SHIT ASH!

Nå, men nu virker det da :-)

Men er løsningen browser/version sikker?

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 19:06 #20

Tak for hjælpen!

Synes godt om

mclemens Nybegynder

11. august 2008 - 19:11 #21

Så længe der ikke er andre browsere der har behov for

- for at få elementet til at poppe op igennem main laget skulle der ikke være
problemer. Jeg har kun testet det på IE6, 7 - samt FF2-3 (kan ikke huske om jeg
testede opera og netscape da jeg lavede det første gang).

Resten er css, der var kun den ene nitte på IE's rendering.
(hvis IE8 ikke behøver #footer{z-index:2;} kan du nok rette
[if IE] til [if lt IE 8.0], men hop evt. en smut forbi
http://msdn.microsoft.com/en-us/library/ms537512.aspx
for at læse om conditional comments.

Et problem på et senere tidspunkt kan være hvis browsere
laver scrollbaren i forskellige bredder - så er det lidt svært
at komme omkring med det "margin-right:19px" i footer2 ...

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 19:11 #22

Ang. det med margin: auto, så kan jeg ikke så det til at spille uden <center>

<div class="pagecontent">
<center> 
<div class="pagewidth pagetop">
indhold
</div>
</center>
</div>

Jeg har forsøgt at fjerne <center> og lave CSS sådan her:

div.pagecontent{
width: 100%;
text-align: center;
margin: auto;
}

Det spiller i hvert fald ikke...???

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 19:13 #23

mclemens 11/08-2008 19:11:49:
Det virker i hvert fald her i FF og IE samt Safari 3.1

Synes godt om

mclemens Nybegynder

11. august 2008 - 19:15 #24

Du satte margin på det forkerte element.
Sæt evt. text-align center på igen...

<!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">
div.pagecontent{
width: 100%;
}

.pagewidth{
background:red;width:950px;margin: 0 auto;
}

</style>
</head><body>

<div class="pagecontent">
<div class="pagewidth pagetop">
indhold
</div>

</div>

</body></html>

Synes godt om

mclemens Nybegynder

11. august 2008 - 19:16 #25

Tak for point og bemærkningen om Safari :)

Synes godt om

kimlarsen1978 Nybegynder

11. august 2008 - 19:27 #26

Selvtak

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