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 3 30/10/202409:37 01/01/202515:27
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
20 min siden YouSee App går i sort ved opstart på Tizen styresystem Af Blød trafikant i Fjernsyn & projektorer
I dag 11:57 Echo virker ikke i php Af KurtG i Andet programmering
I dag 11:37 Installere Norlys App på ældre TV via Chromecast / Netværkskabel Af Uvanga i Fjernsyn & projektorer
I dag 09:22 Punktopstilling af tekst i celler Af Balar Seir i Excel
I dag 08:18 Synology Drive client Af desist i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Alt om den prisvenlige iPhone 16E: Så god er den i forhold iPhone 16 og 16 Pro
Læs mere »
Derfor ender dine AI-projekter ofte med at blive for dyre: Tre store udfordringer, som det er svært at tackle
Regeringen har sendt brev til den danske it-branche som svar på bekymringer: Og svaret er "stærkt, klart og meget kærkomment," siger branchen
En lille håndfuld cloud-leverandører sidder på 64 procent af det globale marked: Omsætter for flere hundrede milliarder kroner
Se alle »
Computerworld
Teaser billede
Test: Verdens vildeste trådløse højttaler trodser naturlovene og udløser et sjældent seks-tal
Læs mere »
Test: En af de bedste elbiler, som du overhovedet kan købe, er fransk
Selv pc’er fra 2020 efterlades i kulden: Her er de processorer som mister Microsoft Windows-support
Ny Windows-opdatering skaber store problemer for brugerne: Alvorlige fejl
Se alle »
CIO
Teaser billede
Microsoft gør klar til at lukke for WSUS efter 20 år - alle it-admins bør forberede sig
Læs mere »
Tre ud af fire it-projekter løber af sporet og går over budgettet - og det er der en særlig forklaring på
Regioner klar med licens-aftale med Microsoft: Priserne stiger markant
SAP-kunder tøver med at flytte over på S/4 Hana - foretrækker at bliver hængende på det gamle ECC
Se alle »
Job & Karriere
Teaser billede
40 år gammelt dansk it-selskab fusionerer med hollandsk firma og skifter navn
Læs mere »
Her er deres månedsløn: Så meget tjener CIO'erne i de danske regioner - den bedst lønnede får mere end digitaliseringsministeren
Lønninger i den danske it-branche fortsætter med at stige - så meget tjener de danske it-folk i gennemsnit
Nørgaard: I de gode gamle dage havde jeg for vane at fyre alle mine medarbejdere jævnligt
Se alle »
White paper
Teaser billede
Sådan: Opgradér din printerløsning uden store investeringer
Læs mere »
Sikkerhed gjort enkelt: Beskyt din virksomhed direkte i browseren
Se alle »

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