CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede 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?
Avatar billede jowii Nybegynder
24. august 2006 - 16:23 #1
Kan du bruge vertical-align: bottom?
Avatar billede 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>
Avatar billede 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
Avatar billede mclemens Nybegynder
24. august 2006 - 16:42 #4
... (((hvis det skal være height 100%))) ...
Avatar billede jowii Nybegynder
24. august 2006 - 17:03 #5
Er det sådan her, det skal være?

http://infoscape.dk/hjaelp/tabel.html
Avatar billede 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>
Avatar billede mclemens Nybegynder
24. august 2006 - 17:05 #7
<div style="height:50px;"></div>
rettes til:
<div style="clear:both;height:50px;"></div>
Avatar billede jowii Nybegynder
24. august 2006 - 17:06 #8
Heh, ja okay. Rimelig timet.

altschuler>> Tag' Clemens forslag, det er meget mere omfattende :)
Avatar billede 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)))
Avatar billede 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 :(
Avatar billede 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).
Avatar billede 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 ...
Avatar billede 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.
Avatar billede jowii Nybegynder
24. august 2006 - 21:08 #14
Aah - kiggede os lige i FF. Der går den jo udover ja ;) Ups :P
Avatar billede mclemens Nybegynder
24. august 2006 - 21:36 #15
<!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%;}

</style>
</head>

<body>

<div id="content">

  <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>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>
Avatar billede 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>
Avatar billede 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 ...
Avatar billede 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.
Avatar billede 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
Avatar billede mclemens Nybegynder
24. august 2006 - 22:11 #20
<!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; margin-top:60px;width:100%; height:70px; background-image:url(Graphics/top.jpg);"></div>
   
  <div style="position:relative; width:100%; margin-top:20px;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>
Avatar billede 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?
Avatar billede 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>
Avatar billede 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>
Avatar billede mclemens Nybegynder
24. august 2006 - 23:19 #24
Og mange tak for mange point forresten :)
Avatar billede 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.
Avatar billede 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>
Avatar billede 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>
Avatar billede 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.
Avatar billede 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> ))))
Avatar billede 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.
Avatar billede altschuler Nybegynder
25. august 2006 - 10:15 #31
Beklager, kom til at skrive fra en vens bruger. 'dehhas's kommentare er fra mig.
Avatar billede 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.
Avatar billede altschuler Nybegynder
25. august 2006 - 10:32 #33
Beklager, det skal ikke ske igen.

Okay, mange tak skal du have.
Avatar billede 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>
Avatar billede mclemens Nybegynder
25. august 2006 - 20:19 #35
... der er nok lige et par background defineringer der skal fjernes ...
Avatar billede 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>
Avatar billede 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)
Avatar billede 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.
Avatar billede mclemens Nybegynder
25. august 2006 - 23:14 #39
Velbekom :o)
Avatar billede 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 :(
Avatar billede 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 ...
Avatar billede 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>
Avatar billede 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>
Avatar billede 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
Avatar billede 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.
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
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
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 16:03 Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
I går 14:43 html <Input.. Danske bogstaver Af pjotre i Andet software
I går 14:35 Brænde musik fra usb drev til cd Af Caso i Andet hardware
21/1222:16 Er "OneDrive" et "Must" ? Koster det penge ? Af Ikke-ekspert i Windows
21/1216:42 Windows Media Player - Hvilken version (Versioner) er gode til at afspille og kopiere ? Af Ikke-ekspert i Musik & videoafspillere
White papers
Flere white papers »


Premium
Teaser billede
Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer
Læs mere »
Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter
Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret
Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge
Se alle »
Computerworld
Teaser billede
Mord på it-profil truer San Franciscos status som tech-mekka: Byen er forvandlet til en zombie-by
Læs mere »
Netværkstest: Første mesh-sæt med komplette WiFi 7-features sætter nye rekorder for dækning og hastighed
Temu åbner stort varehus i Sverige og kan nu sende varer til danskerne endnu hurtigere: "Hvad vi frygtede, er sket"
Nørgaard: Copilot scorer pænt højt i min kendte 3D-test (Dyrt, Dumt, Dårligt)
Se alle »
CIO
Teaser billede
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Læs mere »
Software-selskabernes prisstigninger får nu danske virksomheder til at søge mod open source
AI er et falmende buzzword: Lad mig fluks dele en god og en dårlig nyhed
Region Sjælland vil skrive evighedskontrakt med Oracle-specialister: Står klar med 150 millioner kroner
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Merete Søby klar med nyt top-job efter pludselig exit fra Schultz: Her er hendes nye job
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Se alle »
White paper
Teaser billede
Derfor kræver AI, cloud og sikkerhed et stærkere netværk
Læs mere »
Sådan: Én løsning til compliance, sikkerhed og overblik
Beskyt virksomheden mod trusler – og hold ressourceforbruget nede
SAP: Skab værdi og minimér omkostninger med effektiv dokumenthåndtering
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »