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
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
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
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 går 21:08 Hvor kan man se Alan Turings mekaniske apparat til at løse Enignas koder Af KurtG i Andet hardware
I går 18:46 Kan det passe ;-) Af fjorbak i Routere & Switches
I går 15:27 Billeder kan ikke åbnes Jpeg.modd Af KristinaS i Billedbehandling
I går 13:44 eM Client Af valby i E-mail programmer
I går 13:33 Facebook gruppe Af Btimmer i Sociale medier
White papers
Flere white papers »


Premium
Teaser billede
Det er blevet kaldt ”det største it-nedbrud i historien” og omkostningerne kan nemt løbe op i syv milliarder kroner: Men hvem skal betale for Crowdstrikes fejl?
Læs mere »
Europas største software-leverandør stryger frem på cloud-fronten – men 97 procent af overskuddet er forduftet
Frustrerede synshaller og billister: Motorstyrelsens it-system plages af store driftsforstyrrelser
Fire år gamle Wiz takker nej til Alphabets historiske opkøbstilbud på 160 milliarder kroner: Satser i stedet på børsnotering
Se alle »
Computerworld
Teaser billede
Microsoft-nedbrud spreder sig: It-systemer i lufthavne verden over er ramt
Læs mere »
Test: Denne mikro-pc er smartere end de stærkeste desktop-maskiner - men flopper alligevel
Elon Musk dropper CrowdStrike efter kæmpe nedbrud
Hundredevis af flyafgange ramt af stort Microsoft-nedbrud
Se alle »
CIO
Teaser billede
Microsoft er på sagen: I gang med at løse kæmpe nedbrud efter katastrofal Crowdstrike-fejl
Læs mere »
Så mange Microsoft-enheder blev ramt af gigantisk Crowdstrike-koks
Peter Lüth udlever CTO-drømmen: Bygger et system fra bunden og tjener kassen på det
Sådan forbereder energiselskabet OK sig på cyberangreb: "Prisen for ikke at gøre noget kan være forfærdeligt høj"
Se alle »
Job & Karriere
Teaser billede
Efter 12 år er NNIT's hovedkvarter i Søborg nu ryddet og tomt - alle arbejder hjemme: "Det er med et vist vemod"
Læs mere »
Norlys skal splittes op i fem selskaber: Nu bliver flere ansatte og ledere fyret
Dansk top-profil trækker sig fra Microsoft: Skal være direktør i TDC Erhverv
KMD-direktør forlader selskabet: Det skal hun nu
Se alle »
White paper
Teaser billede
Opdag fordelene ved cloud-baseret backup og recovery
Læs mere »
Rapport kortlægger de 13 bedste muligheder for at sætte turbo på din cloud computing
Guide: Sådan udvikler du en moderne netværksstrategi
Unbreakable - sådan sikrer du dig vedvarende og uafbrudt adgang til dine data
Se alle »

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