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
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 3 29/09/202410:58 20/03/202513:38
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
30/0616:17 Brugere må gerne redigere, men ikke overskrive default sortering eller filtrering Af mj72 i Excel
30/0613:37 Google Drev til PC vil ikke logge på Af k_lindholm i Backup- & Antivirus
27/0623:48 Mærkelige Mapper i Stifinder? Af jonpet i PC
27/0608:16 Nulstille pc'er Af 1Dorte i Windows
26/0613:50 Brugt Mac bærbar Af costanza1974 i Mac
White papers
Flere white papers »


Premium
Teaser billede
Slår alarm: Disse syv statslige it-projekter er ude af kontrol
Læs mere »
Efter opkøb: Netcompany vil flytte alle 630 medarbejdere ud af SDC's hovedkvarter i Ballerup efter 47 år - får ny adresse
Lønnen fortsætter med at stige i den danske it-branche: Så høj er gennemsnitshyren nu
Da vi får fat i Tina Esbech vil hun intet fortælle om sin exit fra topposten i Kyndryl: "Jeg har ingen kommentarer," siger hun
Se alle »
Computerworld
Teaser billede
Danmarks største fiberselskab skifter navn: Norlys skal ikke længere hedde Norlys
Læs mere »
Hundredevis af printer-modeller ramt af sårbarheder
Microsoft kæmper med at få Copilot ud over rampen – og det skyldes især én ting
Verdensberømt lommeregner-firma vil investere mere end 380 milliarder kroner i amerikansk chipproduktion
Se alle »
CIO
Teaser billede
Sådan får hackere adgang til Gmail-konti med tofaktor-login
Læs mere »
It-sikkerheden dumper totalt i disse danske kommuner: Ny kortlægning viser, hvilke der står pivåbne for cyberangreb
Microsoft kæmper med at få Copilot ud over rampen – og det skyldes især én ting
Hackerne slog til under stor SAP-migrering: Tvang Bauhaus til at vælge én af disse tre løsninger for it-infrastrukturen
Se alle »
Job & Karriere
Teaser billede
Fungerede ikke: Dropper AI som erstatning for kundeservice-medarbejdere - har nu brug for nye folk
Læs mere »
NNIT har fyret 100 medarbejdere - nedjusterer markant
It-chef og halv it-afdeling fyret i forsikringsselskab på grund af kommentar om potteplante
Danske it-folk tør ikke længere skifte job hele tiden - og det er der en særlig årsag til
Se alle »
White paper
Teaser billede
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis
Læs mere »
Undgå at printeren bliver svageste led i sikkerheden
Cybersikkerhed 2025: Er din branche blandt de mest udsatte?
IT i front: Sådan bliver netværk en strategisk driver
Se alle »

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