Avatar billede jamiros Novice
23. marts 2005 - 02:50 Der er 7 kommentarer og
1 løsning

div med overflow - height 100% dog XXXpx fra top og bund

Hej Eksperter

Jeg forsøger at få mit div (contentarea) til at følge højden på siden, dog -291px fra top og -58px fra bottom. Nedenstående virker i firefox, men ikke i IE... Nogen der kender en løsning?

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
       
        <style type="text/css" media="screen"><!--
body {margin: 0 0 0 0; overflow: auto}
#leftside  { background-image: url(grafik/v_side_bg.jpg); width: 20px; height: 100%; position: absolute; z-index: 80 }
#rightside  { background-image: url(grafik/h_side_bg.jpg); width: 20px; height: 100%; position: absolute; z-index: 100; margin-left: 744px}
#container  { background-color: #f30; margin-left: -382px; position: absolute; left: 50%; width: 764px; height: 100% }

#logotop {background-image: url(grafik/top_bg.jpg); width: 724; height: 63px; position: absolute; margin-left: 20px; z-index: 80;}
#flasharea {background-color: #3b5a74; width: 528px; height: 226px; position: absolute; margin-left: 21px; margin-top: 64px;}
#menuarea {background-color: #C3D3E2; width: 193; height: 226px; position: absolute; margin-left: 550; margin-top: 64px;}

#contentarea  { background-color: #006300; overflow: auto; position: absolute; z-index: 80; margin: 0 0 0 21; top: 291px; bottom: 58px; width: 528px; height: auto;}

#bund {background-image: url(grafik/bund_adresse.jpg); width: 724px; height: 57px; position: absolute; margin-top: -57px; top: 100%; margin-left: 20px; z-index: 80;}
        --></style>
    </head>

    <body bgcolor="#ffffff">
        <div id="container">
        <div id="leftside"></div>
        <div id="logotop"><a href="default.asp?lang=<%=lang%>" target="_top"><img src="grafik/top_logo.jpg" border="0"></a></div>
        <div id="flasharea">528x226</div>
        <div id="rightside"></div>
        <div id="menuarea">menu</div>
        <div id="contentarea">billeder<br>billeder<br>billeder<br>billeder<br>
        billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>
        billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>
        billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>
        billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>
        billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>
        billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>
        billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>billeder<br>
        billeder<br></div>
       
        <div id="bund"></div>
        </div>
    </body>

</html>
Avatar billede alister_crowley Nybegynder
23. marts 2005 - 03:12 #1
Start med en kvalificeret doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
...

Derefter så er den struktur du gerne vil have, mest optimal at lave i tables, da de sjovt nok har nogle funktioner som <div> boxe ikke har, netop på dette punkt :)

Og så er det også nemmere at løse browser problemerne.
Avatar billede alister_crowley Nybegynder
23. marts 2005 - 03:23 #2
Din kode er også komplet fucked. Du har fejl over det hele.

HEX koder skal skrives med 100% CAPS (store bogstaver).
Der skal ALTID være ; efter en angivelse.
Og der skal også ALTID være px,pt eller lign. efter værdier (med undtaglese af 0)

Og kode er nærmest umuligt at overskue.

Og height: 100%; skal også tilføjes i både body {} og html {} eller bare

body,html { height: 100%; }
Avatar billede alister_crowley Nybegynder
23. marts 2005 - 03:24 #3
Prøv at skrive hvad det helt nøjagtigt er meningen du vil lave, istedet for en masse absolut placeret boxe, med height: 100% som alligevel ikke gælder for postion: absolute; elementer ect...

Så kan det være der kan gives et forslag som kan bruges til noget.
Under alle omstændigheder skal det hele kodes fuldstændigt om.
Avatar billede olebole Juniormester
23. marts 2005 - 07:26 #4
<ole>

Nej, alister_crowley ... ikke 'komplet fucked'.

1. Der står ingen steder, at HEX-koder skal skrives med stort - kun i din kommentar.
2. Der skal semikolon efter alle property-angivelser i en CSS-regel - undtagen den sidste. Der er vist ikke noget at komme efter her.
3. Hvad er der galt med 'height:100%' på et absolut positioneret element - hvis det omkransende element har fået sat en højde?
4. Om man synes, CSS-regler skal stå på én eller flere linier, er en smagssag. For nogen giver det ene et godt overblik ... for andre det andet

- så kan vi slås om, hvad der er mest fejlfyldt ... koden eller kommentarerne  :)

/mvh
</bole>
Avatar billede jamiros Novice
23. marts 2005 - 11:18 #5
--> alister crowley
Tanken er at der ikke skal benyttes tables
Og Ole har kommenteret det andet du skriver.

--> olebole
Har du så et bud på hvordan det lykkedes mig at undgå tables?
Avatar billede alister_crowley Nybegynder
23. marts 2005 - 18:06 #6
olebole

1. okay, jeg havde lært det skulle være stort.
2. igen okay, men vil stadig påpege det er pænt at gøre det
3. hmm, virker ikke helt hos mig.
4. Hvis man beder andre debugge ens kode, så er det at gøre den overskuelig en god ting, og alle de fejl med manglende px og lign. har altså stor betydning, men er svært at opdage uden overskuelighed.

jamiros

Tanken er netop at tables er genialt til formålet... En hel side bygget op af position: absolute; element er altså noget skrammel..
Avatar billede roenving Novice
24. marts 2005 - 14:28 #7
Måske den type løsning, jeg har lagt i dette spørgsmål: http://www.eksperten.dk/spm/497362 !-)
Avatar billede jamiros Novice
22. juni 2005 - 16:40 #8
lukker
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

Seneste spørgsmål Seneste aktivitet
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging