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

altschuler Nybegynder

24. august 2006 - 16:21 Der er 44 kommentarer og
1 løsning

Hel til bunden

Hej, Jeg har en side der opbygget på nogenlunde denne måde:
http://de-haas.dk/opbygning.JPG

Mi problem er nu at jeg gerne vil have den nederste boks (gen grønne) til at gå helt ned til buden af browservinduet.

Hvordan gør jeg det?

Synes godt om

jowii Nybegynder

24. august 2006 - 16:23 #1

Kan du bruge vertical-align: bottom?

Synes godt om

altschuler Nybegynder

24. august 2006 - 16:34 #2

aner det ikke. Har ikke lavet så meget CSS før. Min kode ser lige nu sådan ud:

<body style="background-color:#ececec">
<div style="margin: 0 auto; width: 700px; height: 100%;">

<div style="position:relative; width:100%; height:70px; background-image:url(Graphics/top.jpg);" />

<div style="position:relative; top: 90px; width:100%; background-color:White; height:233px; padding-top:9px;">
<img src="Graphics/picture.jpg" alt="picture" />
</div>

<div style="position:relative; width: 100%; height: 0 auto; background-color:White; top: 100px;">
<p>wikwak</p>
</div>

</div>
</body>

Synes godt om

mclemens Nybegynder

24. august 2006 - 16:42 #3

Kig evt på:
http://www.eksperten.dk/spm/712486#rid6300689
http://www.eksperten.dk/spm/717767#rid6320320

Synes godt om

mclemens Nybegynder

24. august 2006 - 16:42 #4

... (((hvis det skal være height 100%))) ...

Synes godt om

jowii Nybegynder

24. august 2006 - 17:03 #5

Er det sådan her, det skal være?

http://infoscape.dk/hjaelp/tabel.html

Synes godt om

mclemens Nybegynder

24. august 2006 - 17:04 #6

og et alternativ du kan bygge videre
på hvis det andet bliver for voldsomt :D
(der skal dog være den spacer div der passer med højden på footer ... jeg har lige sat en baggrund på og udvidet teksten med et par a<br>...

<!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%;}
body{background-color:#ececec;}
</style>
</head>

<body>
<div style="margin: 0 auto; width: 700px; height: 100%;background-color:White;">

<div style="position:relative; width:100%; height:70px; background-image:url(Graphics/top.jpg);" />

<div style="position:relative; top: 90px; width:100%; background-color:White; height:233px; padding-top:9px;">
<img src="Graphics/picture.jpg" alt="picture" />
</div> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>aslut

</div>
<div style="height:50px;"></div>
</div>

<div style="clear:both;position:relative; width: 100%; height: 0px;">
<div style="background-color:#cccccc; bottom: 0px;position:absolute;left:50%;margin-left:-350px;width: 700px;height:50px;">
wikwak
</div>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

24. august 2006 - 17:05 #7

<div style="height:50px;"></div>
rettes til:
<div style="clear:both;height:50px;"></div>

Synes godt om

jowii Nybegynder

24. august 2006 - 17:06 #8

Heh, ja okay. Rimelig timet.

altschuler>> Tag' Clemens forslag, det er meget mere omfattende :)

Synes godt om

mclemens Nybegynder

24. august 2006 - 17:24 #9

Ok, kaster lige et svar :o) ... (((husk at nulstille eller indstille margin på p elementer så de vises ens i FF og IE f.eks. denne css: p{margin:0px;} ... eller måske mere end 0 i margin ... det samme problem gælder for h elementer hvis du får problemer med dem)))

Synes godt om

altschuler Nybegynder

24. august 2006 - 20:49 #10

Først mange tak for jeres hurtige svar.

Nu har jeg prøvet din kode mclemens. Det hvis passer godt nok med browservinduets højde, men hvis teksten går udover, følger det hvis ikke med. Hvilket ellers var meningen :(

Synes godt om

altschuler Nybegynder

24. august 2006 - 20:51 #11

Der er forresten også et andet problemt. Det område mellem øverste og nederste del, er gråt. Det er meningen dette område skal være gennemsigtet så man kan se baggrunden igennem (baggrunden bliver senere et billede).

Synes godt om

mclemens Nybegynder

24. august 2006 - 20:57 #12

[ Nu har jeg prøvet din kode mclemens. ] Ok :)
[ Det hvis passer godt nok med browservinduets højde, men hvis teksten går udover, følger det hvis ikke med. ] Ah, jah glemte firefox, kigger lige ...

[ Det er meningen dette område skal være gennemsigtet så man kan se baggrunden igennem (baggrunden bliver senere et billede). ] Jeps, det var også kun midlertidig så du kunne se blokken ? Det er jo bare at fjerne background-color:#cccccc; fra den nederste div ...

Synes godt om

jowii Nybegynder

24. august 2006 - 21:06 #13

<<<<<
Nu har jeg prøvet din kode mclemens. Det hvis passer godt nok med browservinduets højde, men hvis teksten går udover, følger det hvis ikke med. Hvilket ellers var meningen :( >>>>>>

Jeg kan ikke se om du har gjort det, fordi jeg intet link har, men det var jo det Clemens skrev. At du skulle nulstille/indstille margin på dine tekstafsnit.

<<<<<Der er forresten også et andet problemt. Det område mellem øverste og nederste del, er gråt. Det er meningen dette område skal være gennemsigtet så man kan se baggrunden igennem (baggrunden bliver senere et billede).>>>>>>

Er det ikke bare baggrunden, som du skal ændre.

Du skal bare lave denne:
body{background-color:#ececec;}

om til:
body{background-color:FARVE/BILLED;}

Altså skift farven (#ececec) ud med den farve du ønsker, eller du kan bruge baggrundsbilledet som baggrund.

Synes godt om

jowii Nybegynder

24. august 2006 - 21:08 #14

Aah - kiggede os lige i FF. Der går den jo udover ja ;) Ups :P

Synes godt om

mclemens Nybegynder

24. august 2006 - 21:36 #15

Synes godt om

mclemens Nybegynder

24. august 2006 - 21:40 #16

Nok lidt tættere på ...

<!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%;}
body{background-color:#ececec;}

#content{margin: 0 auto; width: 700px; height: 100%;}
body>div{height:auto;min-height:100%;}

#footer{position:relative; width: 100%;background-color:White;}
</style>
</head>

<body>

<div id="content">

<div style="position:relative; width:100%; height:70px; background-image:url(Graphics/top.jpg);"></div>

<div style="position:relative; width:100%; background-color:White; height:233px; padding-top:9px;">
<img src="Graphics/picture.jpg" alt="picture" />
</div>

<div>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>aslut</div>

<div id="footer">wikwak</div>

</div>

</body></html>

Synes godt om

mclemens Nybegynder

24. august 2006 - 21:45 #17

En lille ting jeg opdagede ... du havde lavet denne her:

<div style="position:relative; width:100%; height:70px; background-image:url(Graphics/top.jpg);" />

... det må du ikke hvis du skal være kompatibel med html. den skal se sådan her ud hvis det skal være kompatibelt:

<div style="position:relative; width:100%; height:70px; background-image:url(Graphics/top.jpg);"></div>

... og så satte jeg din baggrund på bund div'en igen og rokerede lidt rundt på strukturen ... jeg blandede vist lidt for meget ind fra de andre link - hvor der var taget hensyn til overflow's m.v. ... det blev nok lidt for voldsomt før :D

body>div{height:auto;min-height:100%;} ... IE understøtter desværre ikke min-height ... firefox gør - men låser højden når man definerer height - det gør IE ikke ... derfor det css hack der sætter height tilbage til auto og min-height til 100% for firefox's vedkommende ...

Synes godt om

altschuler Nybegynder

24. august 2006 - 22:05 #18

Det begynder jo at blive helt godt. Har bare stadig en smule problemer.

- Siden skal start 60px fra toppen.
- Der skal være ca. 20px mellemrum mellem top-billedet og den næste boks. Dette område skal være gennemsigtigt, så man kan se baggrungen igennem.

Synes godt om

mclemens Nybegynder

24. august 2006 - 22:09 #19

[ - Siden skal start 60px fra toppen. ] retter
[ - Der skal være ca. 20px mellemrum mellem top-billedet og den næste boks. Dette område skal være gennemsigtigt, så man kan se baggrungen igennem. ] retter oggså lige

Synes godt om

mclemens Nybegynder

24. august 2006 - 22:11 #20

Synes godt om

altschuler Nybegynder

24. august 2006 - 22:32 #21

Jamen det ser jo helt perfekt ud. Hvis det er iorden kunne jeg også godt lige tænke mig at spørge dig om en sidste ting.

Der område hvor der står a, a, etc.

Det skal jeg have detlt op, lidtd ligesom en tabel.

En til venstre og en til højre. Hvordan gøres det med CSS?

Synes godt om

mclemens Nybegynder

24. august 2006 - 22:57 #22

Nu fandt jeg udaf hvorfor jeg lagde den udenfor ... (hvis du fjernede alt det a noget før var den ikke i bunden - det glemte jeg at teste :/ - men godt nok at jeg lige fangede det ... den del kigger jeg lige på ...) her er lige det med de to div's: (tror desværre at jeg skulle lave det indviklet ligesom i http://www.eksperten.dk/spm/712486#rid6300689 / http://www.eksperten.dk/spm/717767#rid6320320 før det virkede ... tester det lige ...)

<!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%;}

body{background-color:#ececec;}

#content{margin: 0px auto; width: 700px; height: 100%;}
body>#content{height:auto;min-height:100%;}

#top{margin-top:60px;height:70px; background-image:url(Graphics/top.jpg);}

#toppic{position:relative; width:100%; margin-top:20px;background-color:White; height:233px; padding-top:9px;}

#lcont{float:left;width:150px;}
#rcont{float:right;width:550px;}

#footer{clear:both;background:#fff;}

</style>

</head><body>

<div id="content">

<div id="top"></div>

<div id="toppic"><img src="Graphics/picture.jpg" alt="picture" /></div>

<div id="lcont">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a-left slut</div>
<div id="rcont">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a-left slut</div>

<div id="footer">wikwak</div>

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

Synes godt om

mclemens Nybegynder

24. august 2006 - 23:18 #23

Slutresultatet baseret på http://www.eksperten.dk/spm/717767#rid6320320
ville ende med noget i denne stil (hvis det skal være height 100%) ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{width:100%;background-color:#ececec;}

#tops{position:absolute;top:0px;left:50%;width:700px;margin-left:-350px;height:392px;}
#toppen{margin-top:60px;height:70px; background-image: url(Graphics/top.jpg);}
#toppic{position:relative; width:100%; margin-top:20px;background-color:White; height:233px; padding-top:9px;}

#nybodyydre{position:absolute;top:0px;height:100%;width:700px;left:50%;margin-left:-350px;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}
#nybody{position:relative;padding-top:392px;width:100%;}

#footer,#spacerdiv{height:30px;}
#footer{position:absolute;bottom:0px;left:0px;background:#fff;width:100%;height:30px;}
#spacerdiv{clear:both;width:100%;}

#lcont{float:left;width:150px;}
#rcont{float:right;width:550px;}

</style>
</head>
<body>

<div id="tops">
<div id="toppen"></div>
<div id="toppic"><img src="Graphics/picture.jpg" alt="picture" /></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<div id="lcont">test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>t<br>test slut<br></div>
<div id="rcont">test</div>
<div id="spacerdiv"></div>
</div>

<div id="footer">Test</div>

</div></div>

</body></html>

Synes godt om

mclemens Nybegynder

24. august 2006 - 23:19 #24

Og mange tak for mange point forresten :)

Synes godt om

altschuler Nybegynder

25. august 2006 - 09:37 #25

Jamen det var da så lidt. Mange tak for hjælpen.

Sad lige og testede lidt. Har lagt noget farve på de to felter der er delt om som en tabel. Problemet er, hvis teksten ikke gå helt ned til bunden, gør farven heller ikke.

Synes godt om

mclemens Nybegynder

25. august 2006 - 09:47 #26

Tabeller har en helt bestemt egenskab, nemlig at en udvidelse i den ene række påvirker længden af den anden ... hvis du skal bruge en sådan funktion anbefaler jeg at du bruger en tabel ... til nøds kan man også have et javascript der sørger for at de er lige høje...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{width:100%;background-color:#ececec;}

#tops{position:absolute;top:0px;left:50%;width:700px;margin-left:-350px;height:392

px;}
#toppen{margin-top:60px;height:70px; background-image: url(Graphics/top.jpg);}
#toppic{position:relative; width:100%; margin-top:20px;background-color:White;

height:233px; padding-top:9px;}

#nybodyydre{position:absolute;top:0px;height:100%;width:700px;left:50%;margin-left

:-350px;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}
#nybody{position:relative;padding-top:392px;width:100%;}

#footer,#spacerdiv{height:30px;}
#footer{position:absolute;bottom:0px;left:0px;background:#fff;width:100%;height:30

px;}
#spacerdiv{clear:both;width:100%;}

#lcont{width:150px;vertical-align:top;background:#f00;}
#rcont{width:550px;vertical-align:top;background:#0f0;height:100%;}

.bcol{border-collapse:collapse;}
.bcol td{padding:0px;}

</style>
</head>
<body>

<div id="tops">
<div id="toppen"></div>
<div id="toppic"><img src="Graphics/picture.jpg" alt="picture" /></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<table class="bcol"><tbody><tr><td

id="lcont">test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br

>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>t

est<br>test<br><br>test<br>test<br><br>test<br>t<br>test slut<br>
</td><td id="rcont">test</td>
</tr></tbody></table>
<div id="spacerdiv"></div>
</div>

<div id="footer">Test</div>

</div></div>

</body></html>

Synes godt om

mclemens Nybegynder

25. august 2006 - 09:51 #27

hvis du ved at det er den højre eller måske den venstre der
altid er højest kan du også snyde med baggrunden som her:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{width:100%;background-color:#ececec;}

#tops{position:absolute;top:0px;left:50%;width:700px;margin-left:-350px;height:392

px;}
#toppen{margin-top:60px;height:70px; background-image: url(Graphics/top.jpg);}
#toppic{position:relative; width:100%; margin-top:20px;background-color:White;

height:233px; padding-top:9px;}

#nybodyydre{position:absolute;top:0px;height:100%;width:700px;left:50%;margin-left

:-350px;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}
#nybody{position:relative;padding-top:392px;width:100%;}

#footer,#spacerdiv{height:30px;}
#footer{position:absolute;bottom:0px;left:0px;background:#fff;width:100%;height:30

px;}
#spacerdiv{clear:both;width:100%;}

#lcont{float:left;width:150px;background:red;}
#rcont{float:right;width:550px;background:green;}

#bgsnyd{ background:green; }
</style>
</head>
<body>

<div id="tops">
<div id="toppen"></div>
<div id="toppic"><img src="Graphics/picture.jpg" alt="picture" /></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody"><div id="bgsnyd">
<div

id="lcont">test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br

>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>t

est<br>test<br><br>test<br>test<br><br>test<br>t<br>test slut<br></div>
<div id="rcont">test</div>
<div id="spacerdiv"></div></div>
</div>

<div id="footer">Test</div>

</div></div>

</body></html>

Synes godt om

dehaas Nybegynder

25. august 2006 - 09:59 #28

Hmm, jeg har bare brug for at de to 'vinduer' går helt til bunden, eller længere ned hvis der er mere tekst.

Synes godt om

mclemens Nybegynder

25. august 2006 - 10:01 #29

her er javascriptet som et sidste alternativ ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{width:100%;background-color:#ececec;}

#tops{position:absolute;top:0px;left:50%;width:700px;margin-left:-350px;height:392px;}
#toppen{margin-top:60px;height:70px; background-image: url(Graphics/top.jpg);}
#toppic{position:relative; width:100%; margin-top:20px;background-color:White; height:233px; padding-top:9px;}

#nybodyydre{position:absolute;top:0px;height:100%;width:700px;left:50%;margin-left:-350px;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}
#nybody{position:relative;padding-top:392px;width:100%;}

#footer,#spacerdiv{height:30px;}
#footer{position:absolute;bottom:0px;left:0px;background:#fff;width:100%;height:30px;}
#spacerdiv{clear:both;width:100%;}

#lcont{float:left;width:150px;background:red;}
#rcont{float:right;width:550px;background:green;}

</style>
</head>
<body>

<div id="tops">
<div id="toppen"></div>
<div id="toppic"><img src="Graphics/picture.jpg" alt="picture" /></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<div id="lcont">test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>t<br>test slut<br></div>
<div id="rcont">test</div>
<div id="spacerdiv"></div>
<script type="text/javascript">lc=document.getElementById("lcont");rc=document.getElementById("rcont");lco=lc.offsetHeight;rco=rc.offsetHeight;rc.style.height=(lco>rco)?lco+"px":rco+"px";lc.style.height=(rco>lco)?rco+"px":lco+"px";</script>
</div>

<div id="footer">Test</div>

</div></div>

</body></html>

(hvis det nu havde været to kolonner der havde maximum height:100%; så kunne det gøres - men når de kommer op over dette går det galt - og så er det over i javascript, tables eller baggrundsfusk)

(((( <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#cont{width:700px;margin:0px auto;height:100%;}
#lcont{float:left;width:150px;background:red;height:100%;}
#rcont{float:right;width:550px;background:green;height:100%;}

</style></head>
<body><div id="cont">
<div id="lcont">test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>test<br><br>test<br>t<br>test slut<br></div>
<div id="rcont">test</div>
</div></body></html> ))))

Synes godt om

dehaas Nybegynder

25. august 2006 - 10:11 #30

Okay, jeg tror jeg har brug for det som det er nu, men der skal bare være hvis baggrund bag de to opdelte vinduer. Denne hvide baggrund skal gå helt ned til footeren/bunder. Endvidere skal den også følge med ned hvi´s der kommer mere tekst end der kan være på siden.

Synes godt om

altschuler Nybegynder

25. august 2006 - 10:15 #31

Beklager, kom til at skrive fra en vens bruger. 'dehhas's kommentare er fra mig.

Synes godt om

mclemens Nybegynder

25. august 2006 - 10:31 #32

[ Beklager, kom til at skrive fra en vens bruger. ]
Ja, sådan noget er uheldigt... http://www.eksperten.dk/regler.phtml punkt 2.1.1

... den løsning du efterlyser bliver meget svær at håndtere og vedligeholde, men kigger på om jeg kan lave det iaften.

Synes godt om

altschuler Nybegynder

25. august 2006 - 10:32 #33

Beklager, det skal ikke ske igen.

Okay, mange tak skal du have.

Synes godt om

mclemens Nybegynder

25. august 2006 - 20:19 #34

<!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{height:100%;margin:0px;padding:0px;}
html{background:#ececec;color:#000;}

.spc{background:#ececec;}

#cont{
margin:0px auto;
width:700px;
height:100%;
background:#fff;
color:#000;
}

body>#cont{
height:auto;
min-height:100%;
}

.h60{height:60px;}

#toplogo{
height:70px;
background: red url('Graphics/top.jpg');
}

.h20{height:20px;}

#toppic{
height:233px;
padding-top:9px;
}

#lcont{
float:left;
width:150px;
background:#f00;
}

#rcont{
float:right;
width:550px;
background:#ff0;
}

#footspc{
clear:both;
}

#footerbund,#footspc{
height:30px;
overflow:hidden;
}

#footer{
clear:both;
height:0px;
position:relative;
}

#footerbund{
position:absolute;
bottom:0px;left:50%;
width:700px;margin-left:-350px;
background:#00f;
}
</style>

</head><body>
<div id="cont">

<div class="spc h60"></div>

<div id="toplogo">Ret background: red url('Graphics/top.jpg'); i css delen #toplogo til background: url('Graphics/top.jpg');</div>

<div class="spc h20"></div>

<div id="toppic"><img src="Graphics/picture.jpg" alt="picture"></div>

<div id="lcont">Venstre side<br><br>a<br>a</div>
<div id="rcont">Højre side</div>

<div id="footspc"></div>

</div>

<div id="footer"><div id="footerbund">wikwak</div></div>

</body></html>

Synes godt om

mclemens Nybegynder

25. august 2006 - 20:19 #35

... der er nok lige et par background defineringer der skal fjernes ...

Synes godt om

mclemens Nybegynder

25. august 2006 - 20:22 #36

og et eksempel med tabel istedet:

<!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{height:100%;margin:0px;padding:0px;}
html{background:#ececec;color:#000;}

.spc{background:#ececec;}

#cont{
margin:0px auto;
width:700px;
height:100%;
background:#fff;
color:#000;
}

body>#cont{
height:auto;
min-height:100%;
}

.h60{height:60px;}

#toplogo{
height:70px;
background: red url('Graphics/top.jpg');
}

.h20{height:20px;}

#toppic{
height:233px;
padding-top:9px;
}

#tabellen{
border-collapse:collapse;
}

#tabellen td{
padding:0px;
vertical-align:top;
}

#lcont{
width:150px;
background:#f00;
}

#rcont{
width:550px;
background:#ff0;
}

#footspc{
clear:both;
}

#footerbund,#footspc{
height:30px;
overflow:hidden;
}

#footer{
clear:both;
height:0px;
position:relative;
}

#footerbund{
position:absolute;
bottom:0px;left:50%;
width:700px;margin-left:-350px;
background:#00f;
}
</style>

</head><body>
<div id="cont">

<div class="spc h60"></div>

<div id="toplogo">Ret background: red url('Graphics/top.jpg'); i css delen #toplogo til background: url('Graphics/top.jpg');</div>

<div class="spc h20"></div>

<div id="toppic"><img src="Graphics/picture.jpg" alt="picture"></div>

<table id="tabellen"><tbody><tr>
<td id="lcont">Venstre side<br><br>a<br>a</td>
<td id="rcont">Højre side</td>
</tr></tbody></table>

<div id="footspc"></div>

</div>

<div id="footer"><div id="footerbund">wikwak</div></div>

</body></html>

Synes godt om

mclemens Nybegynder

25. august 2006 - 20:32 #37

Minder lidt om 24/08-2006 17:04:05 ... bortset fra at jeg i den havde glemt lidt leg med det css hack ( i ovenstående body>#cont ) der er nødvendigt da IE ikke understøtter min-height ... og så selvfølgelig de baggrunde sat ind så den bliver rykket nedad :o)

Synes godt om

altschuler Nybegynder

25. august 2006 - 23:11 #38

Uha, jamen nu skulle jeg mene det er blevet helt pefekt. Mange tak for din hjælp.

Synes godt om

mclemens Nybegynder

25. august 2006 - 23:14 #39

Velbekom :o)

Synes godt om

altschuler Nybegynder

25. august 2006 - 23:21 #40

Hovsa, var vist lige en tand for hurtig.

Jeg skal have et billede som baggrund, og er derfor nødt til at have de tp spacere til at være gennemsnitige (til baggrunden), og ikke bare en farve :(

Synes godt om

mclemens Nybegynder

25. august 2006 - 23:31 #41

så kan jeg kun lave en ustabil javasscript løsning (javascript kan være deaktiveret og så får du ikke det hvide til at nå bunden) ... man kan ikke have et lag der sørger for at nå bunden med en hvid baggrund uden at lade laget fylde en fastsat højde - ellers hvis højden ikke er et fast antal px kan det kun laves som jeg gjorde eller med javascript ... ønsker du et javascript sammen med 25/08-2006 09:47:48 f.eks. ?

... ellers kunne man måske klippe baggrunden i stykker og placere den i elementerne - eller egner baggrunden sig ikke til det ? ... jeg ville selv gøre sådan hvis det var ...

Synes godt om

mclemens Nybegynder

25. august 2006 - 23:54 #42

kaster lige eksemplet på javascriptet:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{width:100%;background-color:#ececec;}

#tops{position:absolute;top:0px;left:50%;width:700px;margin-left:-350px;height:392px;}
#toppen{margin-top:60px;height:70px; background-image: url(Graphics/top.jpg);}
#toppic{position:relative; width:100%; margin-top:20px;background-color:White;

height:233px; padding-top:9px;}

#nybodyydre{position:absolute;top:0px;height:100%;width:700px;left:50%;margin-left:-350px;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}
#nybody{position:relative;padding-top:392px;width:100%;}

#footer,#spacerdiv{height:30px;}
#footer{position:absolute;bottom:0px;left:0px;background:#fff;width:100%;height:30px;}
#spacerdiv{clear:both;width:100%;}

#lcont{width:150px;vertical-align:top;background:#f00;}
#rcont{width:550px;vertical-align:top;background:#0f0;height:100%;}

#bcol{border-collapse:collapse;}
#bcol td{padding:0px;}

</style>

<script type="text/javascript">
window.onload=function(){
document.getElementById("bcol").style.height=document.getElementById("nybodyindre").offsetHeight-422+"px";

}
</script>
</head>
<body>

<div id="tops">
<div id="toppen"></div>
<div id="toppic"><img src="Graphics/picture.jpg" alt="picture" /></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<table id="bcol"><tbody><tr>
<td id="lcont">test<br>
</td><td id="rcont">test</td>
</tr></tbody></table>
<div id="spacerdiv"></div>
</div>

<div id="footer">Test</div>

</div></div>

</body></html>

Synes godt om

mclemens Nybegynder

26. august 2006 - 00:01 #43

<!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{height:100%;margin:0px;padding:0px;}
html{background:#ececec;color:#000;}

#cont{
margin:0px auto;
width:700px;
height:100%;
background: url("hvid1pxbredgange2000pxhoej.gif") repeat-x 0px 150px;
color:#000;
}

body>#cont{
height:auto;
min-height:100%;
}

.h60{height:60px;}

#toplogo{
height:70px;
background: red url('Graphics/top.jpg');
}

.h20{height:20px;}

#toppic{
height:233px;
padding-top:9px;
}

#tabellen{
border-collapse:collapse;
}

#tabellen td{
padding:0px;
vertical-align:top;
}

#lcont{
width:150px;
background:#f00;
}

#rcont{
width:550px;
background:#ff0;
}

#footspc{
clear:both;
}

#footerbund,#footspc{
height:30px;
overflow:hidden;
}

#footer{
clear:both;
height:0px;
position:relative;
}

#footerbund{
position:absolute;
bottom:0px;left:50%;
width:700px;margin-left:-350px;
background:#00f;
}
</style>

</head><body>
<div id="cont">

<div class="h60"></div>

<div id="toplogo">Ret background: red url('Graphics/top.jpg'); i css delen #toplogo til background: url('Graphics/top.jpg');</div>

<div class="h20"></div>

<div id="toppic"><img src="Graphics/picture.jpg" alt="picture"></div>

<table id="tabellen"><tbody><tr>
<td id="lcont">Venstre side<br><br>a<br>a</td>
<td id="rcont">Højre side</td>
</tr></tbody></table>

<div id="footspc"></div>

</div>

<div id="footer"><div id="footerbund">wikwak</div></div>

</body></html>

Synes godt om

mclemens Nybegynder

26. august 2006 - 00:04 #44

lidt fusk - prøv ovenstående men lav filen: hvid1pxbredgange2000pxhoej.gif
... den behøver blot at være 1px bred og rigtig mange px høj - højden den skal have afhænger af dine sidershøjde ... eksempelvis vejede min hvide gif fil 85 byte ved 2000px højde x 1px bredde (gemt i monokrom gif format) ... en på 20000 px vejer hos mig: 215 byte ... så det burde ikke være så slemt :D

Synes godt om

altschuler Nybegynder

26. august 2006 - 00:12 #45

okay, jamen jeg vil prøve at kigge på det imorgen. Endnu engang rigtig mange gange tak for hjælpen.

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
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
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	3	29/09/202410:58	20/03/202513:38

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