Avatar billede 1409 Praktikant
06. oktober 2011 - 11:59 Der er 7 kommentarer og
1 løsning

Ens højde på containere

Jeg har flg. eks.:
CSS:

body  {
  background-color: orange;
  text-align: center;
}
#wrapper {
  width: 1000px;
  background-color: white;
  margin: 0 auto;
  border: 1px solid black;
  text-align: left;
}
#header {
  height: 80px;
  padding: 5px;
  background-color: #CCCCCC;
}
#main {
  background-color: white;
  padding: 10px;
  margin: 0 0 0 170px;
}
#menu {
  float: left;
  width: 160px;
  background-color: #ffff99;
  padding: 20px 5px;
}

HTML:
<div id="wrapper">
  <div id="header">
    <h1>Overskrift</h1>
  </div>
  <div id="menu">
    <ul>
      <li><b>Hjem</b></li>
      <li><a href="side1.html">Side 1</a></li>
      <li><a href="side2.html">Side 2</a></li>
      <li><a href="side3.html">Side 3</a></li>
    </ul>
  </div>
  <div id="main">
    <h1>Overskrift</h1>
    <p>Sidens inhold</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>

  </div>
</div>

Hvordan får jeg menu-div'ens højde til altid at følge højden på main?
Avatar billede olebole Juniormester
06. oktober 2011 - 14:24 #1
<ole>

Det kunne gøres sådan:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body  {
  background-color: orange;
}
#header {
  width: 990px;
  margin: 0 auto;
  height: 80px;
  padding: 5px;
  border: 1px solid black;
  border-bottom: 0;
  background-color: #CCCCCC;
}
#wrapper {
  position: relative;
  width: 1000px;
  background-color: white;
  margin: 0 auto;
  border: 1px solid black;
  border-top: 0;
}
#main {
  background-color: white;
  padding: 10px;
  margin: 0 0 0 170px;
}
#menu {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 160px;
  background-color: #ffff99;
  padding: 20px 5px;
}
</style>
</head>
<body>

<div id="header">
    <h1>Overskrift</h1>
</div>
<div id="wrapper">
  <div id="menu">
    <ul>
      <li><b>Hjem</b></li>
      <li><a href="side1.html">Side 1</a></li>
      <li><a href="side2.html">Side 2</a></li>
      <li><a href="side3.html">Side 3</a></li>
    </ul>
  </div>
  <div id="main">
    <h1>Overskrift</h1>
    <p>Sidens inhold</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.<br><br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>

  </div>
</div>

</body>
</html>



/mvh
</bole>
Avatar billede 1409 Praktikant
07. oktober 2011 - 13:15 #2
Tak for forslaget, men hmm... jeg kan ikke få det til at virke.
De har stadig forskellig højde, dvs. menu-containerens højde ændre sig efter indhold, og har altså ikke 100%.
Avatar billede olebole Juniormester
07. oktober 2011 - 15:57 #3
Hvis det ikke virker for dig, må det skyldes, du laver fejl. Prøv at lægge et link til siden, så vi kan se hele din kode
Avatar billede 1409 Praktikant
08. oktober 2011 - 10:17 #4
Ingen egentlig fejl, men forskel i erklæringer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Ovennævnte er lavet automatisk af Dreamweaver CS3, som jeg bruger.
Og:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Avatar billede olebole Juniormester
08. oktober 2011 - 16:38 #5
Jo, hvis det ikke virker, laver du fejl. Den kode, jeg har lagt, fungerer både med en 'HTML 4.01 Strict' og en 'XHTML 1.0 Transitional' DTD. Prøv at lægge et link
Avatar billede 1409 Praktikant
11. oktober 2011 - 12:19 #6
Takker!
Nu virker det, og, ja, du har fuldstændig ret!

Dreamweaver snød mig lidt, fordi den viser det "forkert" i arbejdsvinduet, hvorimod browserne viser det "rigtigt", altså med fuld højde. Pudsigt...

Læg et svar :-)
Avatar billede olebole Juniormester
11. oktober 2011 - 14:51 #7
Det er desværre ikke så mærkeligt. Stol aldrig på DW's Design View! Det bedste, man kan sige om Design View, er, at det ikke virker  :o|

Når du koder, bør du have DW i Code View - og så have dokumentet åbent i to-tre browsere, så du kan teste. Det er den eneste måde, du kan vide, hvordan din kode bliver renderet.

I DW betyder WYSIWYG: What You See I What You Might Get  *o)
Avatar billede 1409 Praktikant
04. januar 2012 - 09:04 #8
Alle tiders!
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

Log ind eller opret profil

Hov!

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

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

Du kan også logge ind via nedenstående tjenester