Avatar billede hypofysen Nybegynder
09. juli 2008 - 11:51 Der er 13 kommentarer og
1 løsning

height - hvad gør jeg forkert?

Jeg har lavet følgende css.
Jeg vil gerne at baggrunden fra min wrapper udvides itakt med indholdet af left, center eller right og det virker også fint indtil bunden af skærmen er noget... lidt kryptisk formuleret måske men håber der en der kan hjælpe alligevel :)

body {
margin-bottom:0px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
background-color:#000000;
height:100%;
}

#wrapper {
top:0px;
width:800px;
height:100%;
left:-400px;
margin-left:50%;
position:absolute;
background-image:url(../images/bg.png);
background-repeat:repeat;

}

#left {
width:200px;
height:auto;
left:0px;
top:0px;
position:absolute;
background-color:#0000FF;
}

#center {
width:400px;
height:auto;
left:200px;
top:0px;
position:absolute;
background-color:#00FFCC;
}

#right {
width:200px;
height:auto;
left:600px;
top:0px;
position:absolute;
background-color:#0000FF;
}
Avatar billede w13 Novice
09. juli 2008 - 13:41 #1
Prøv at indsætte <div style="clear:both"></div> nederst i det omkransende element, som skal have baggrunden.
Avatar billede hypofysen Nybegynder
09. juli 2008 - 14:10 #2
det ændrer ingen ting..

min html ser sådan ud, ved ikke om det har nogen betydning!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
    <div id="left">1<br /><br /><br /></div>
   
    <div id="center">2<br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    bla bla
    </div>
   
    <div id="right">3</div>
   
</div>

</body>
</html>
Avatar billede w13 Novice
09. juli 2008 - 14:15 #3
Synes umiddelbart, det ser ud til at virke hos mig både i FF og IE?
Avatar billede hypofysen Nybegynder
09. juli 2008 - 14:36 #4
okay hvor præcist sætter du det så ind
Avatar billede w13 Novice
09. juli 2008 - 14:40 #5
Ingenting overhovedet. Jeg synes bare, det ser korrekt ud, når jeg prøver din kode.
Avatar billede w13 Novice
09. juli 2008 - 14:40 #6
Men måske har jeg misforstået problemet så.
Avatar billede hypofysen Nybegynder
09. juli 2008 - 14:48 #7
prøv at se her

http://www.lool.dk/test

det grønne i midten stopper sammen med skærmen i stedet for at fortsætte!
Avatar billede w13 Novice
09. juli 2008 - 15:13 #8
Nej, det ser fint ud hos mig både i IE og FF.
Avatar billede roenving Novice
10. juli 2008 - 01:04 #9
Hvis indholdet i hoved-området bliver højere end skærmens højde, w13 ...

-- et tric kan være at bruge en conditional comment til at sæte height på IE, hvor man så bruger min-height til andre browsere:

<style type="text/css">
html,body {
margin:0;
background-color:#000000;
min-height:100%;
}

#wrapper {
top:0px;
width:800px;
min-height:100%;
margin:0 auto;
position:absolute;
background-image:url(../images/bg.png);
background-repeat:repeat;

}
/*...*/
</style>
<!--[if lt IE 7]>
<style type="text/css">
  html,body{height:100%;}
  #wrapper{height:100%;}
</style>
<![endif]-->
Avatar billede hypofysen Nybegynder
10. juli 2008 - 10:48 #10
det lød som den rigtige løsning, men fattede desværre ikke ret meget af det :(

vil du ikke komme med en mere uddybende forklaring? Tak
Avatar billede roenving Novice
10. juli 2008 - 15:54 #11
Med korrekt doctype skal også html-elementet have den relative højde, og så bør browserne tage den højde, der angives med procent bogstaveligt, og height:100% betyder altså 100% af _viewporten_ ...

-- men det gør ie6- ikke, den forhøjer, så hele indholdet kan ses, til gengæld forstår den ikke min-height, som ellers gør det rigtige, derfor indsættes den property, den forstår, med en conditional comment, der tester på om det er en ie mindre end v7 !-)
Avatar billede hypofysen Nybegynder
10. juli 2008 - 17:31 #12
se det hjalp, skulle bare ha skåret det ud i pap :)
Avatar billede roenving Novice
10. juli 2008 - 17:35 #13
Velbekomme '-)
Avatar billede roenving Novice
10. juli 2008 - 22:58 #14
-- og tak for point ;~}
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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