Hvordan "udvider" en div sig??

Har du prøvet med at indsætte en width med procent i din css?

div.test {
width: 80%;
}

Håber at jeg har forstået spørgsmålet.

Det tror jeg ikke - headeren øverst skal kunne give sig i størrelsen, på samme måde hvis jeg havde en TD med baggrundsbillede, så en TD med bgcolor=hvid og til sidst en TD med baggrundsbillede igen - så den midterste TD skalerer sig i str., alt efter hvor stort browservinduet er!
Det skal så bare virke med DIV's i stedet. Vil I hellere se kode end link?

ja

OK - CSS:

/*** BASICS ***/

html { height: 100%;  margin-bottom: 1px; }
html * { padding: 0; margin: 0; }

body {
text-align: center;
/*background: #56585a;*/
background:url(../images/bgrund.gif);
padding: 20px 0px 40px 0px;
font-size: 62.5%;
}

#everything {
background-color:#FFFFFF;
text-align: left;
margin: 0 auto;
width: 70%;
height:100%;
font-family: "Trebuchet MS", Arial, sans-serif;
}

a:hover {
color: #76B900;
}

/*** HEADER ***/
   
/*** MAIN MENU ***/

ul#mainmenu {
position: absolute;
top: 53px; left: 357px;
width: 363px; height: 30px;
list-style-type: none;
background: #3b3f43 url(images/menu.gif) no-repeat;
}

#headmenu, #footmenu {
  background: #8A92B1;
  color: #000;
  border-top:1px solid #8A92B1;
  border-bottom:1px solid #8A92B1;
}
#headmenu .inner, #footmenu .inner {
    align:center;
    padding:0px 5px 0px 20px;
    margin: 0;
    border-top: 2px solid #BBCCEE;
    border-bottom: 2px solid #BBCCEE;
   
}
#headmenu a, #footmenu a {
    font-size:9pt;
    color: #FFFFFF;
    font-weight: bold;
    text-transform : uppercase;
    text-decoration : none;
}
#headmenu a:hover, #headmenu a:active, #headmenu a:focus,  #footmenu a:hover, #footmenu a:active, #footmenu a:focus {
    color: #56585a;
}

#headmenu ul {
  margin: 0; padding: 0;
  padding-bottom:2px;
  list-style: none;
}
#headmenu li {
    text-transform: uppercase;
    display: inline;
    margin: 0;     padding: 0;
    padding-right:1em;

}
/*** HOME PAGE ***/

div#mainpromo {
height: 213px;
background: transparent url(images/home/2006-10.jpg) no-repeat;
margin: 0; padding: 0;
}   

  div#mainpromo p {
  text-indent: -4040px;
    margin: 0; padding: 0; 
    display: none;
  }
 
  div#mainpromo p.moreinfo {
  text-indent: 0px;
  display: block;
  }
 
  div#mainpromo p.moreinfo a {
  display: block;
  height: 213px;
  text-indent: -4040px;
  text-decoration: none;
    margin: 0; padding: 0; 
  }
/*** SUBMENU ***/

div.submenu {
height: 70px;
}

div.blogmenu  { width:100%;background: transparent url(../images/header.gif);background-repeat:no-repeat; }

div.spacer {background-color: #FFFFFF;}

/*** BODY TEXT ***/

div#bodytext {
background-color: #ffffff;
color: #444;

}

    div#bodytext a:link,
    div#bodytext a:visited,
    div#bodytext a:active {
    text-decoration: none;
    color: #545258;
    border-bottom: 1px solid #e7f4c3;
    }
     
    div#bodytext a:hover {
    background-color: #F2F7FA;
    }

  div#bodytext strong {
  color: #555;
  }
 
    div#bodytext strong.highlight {
    font-weight: normal;
    background-color: #ffffbb;
    color: #444;
    } 
   
    div#bodytext strong.subtle {
    font-weight: normal;
    color: #111;
    }

  div#bodytext h2 {
  color: #9D6C3C;
  font-size: 1.8em;
  padding: 20px 0px 0px 0px;
  margin: 0px 20px 0px 20px;
  }
 
  div#bodytext h3 {
  font-weight: normal;
  font-size: 1.6em;
  color: #c0a782;
  border-bottom: 1px solid #c0a782;
  padding: 0px 0px 20px 0px;
  margin: 0px 20px 20px 20px;
  }
 
  div#bodytext h4 {
  font-size: 2em;
  color: #56585A;
  padding: 0px 0px 0px 0px;
  margin: 10px 10px 20px 20px;
  } 
 
  div#bodytext p {
  font-size: 1.5em;
  margin: 0px 20px 0px 20px;
  padding: 0em 0em 1em 0em;
  }


 
  div#bodytext ul {
  margin: 0px 20px 0px 60px;
  padding: 0 0 1em 0;
  font-size: 1.5em;
  }
 
    div#bodytext ul li {
    padding: 0px 0px 3px 10px;
    }
   
  div#bodytext div.sidebar {
  width: 250px;
  margin: 0px 20px 0px 0px; 
  }
   
    div#bodytext div.starboard {
    float: left;
    }
 
    div#bodytext div.sidebar div {
    /*border: 1px solid #56585A;*/
    background-color: #8A92B1;
    color: #d1be9e;
    margin: 0px 0 0px 0;
    }
   
      div#bodytext div.sidebar div h4 {
      padding: 0px 0px 0px 0px;
      font-size: 1.4em;
      color: #56585a;
      margin: 0 0 0 0;
      }
   
      div#bodytext div.sidebar div p {
      font-size: 1.3em;
      padding: 0px 0px 0px 0px;     
      margin: 0 0 0 0;
      line-height: 1.1em;
      color: #FFFFFF;
      }   
 
  div#bodytext blockquote {
    font-family: Georgia, "Times New Roman";
    padding-left: 40px;
    padding-right: 40px;
    color: #777777;
    font-size: 1.1em;
    line-height: 1.7em;
  }

  div.double {
  display: inline-table;
  }
 
    div.double:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
     
/*** OTHER BOXEN ***/
   
p.promo {
padding: 6px 20px 6px 20px;
background-color: #8A92B1;
color: #FFFFFF;
margin: 0 0 0 0;
font-size: 1.2em;
clear: both;
}

  p.promo a:link,
  p.promo a:visited,
  p.promo a:active {
  text-decoration: none;
  border-bottom: 1px solid #aabb00;
  color: #FFFFFF;
  }
   
  p.promo a:hover {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;   
  background: transparent;
  }


/*** BLOG ***/

div#bodytext div.blog div.post h4 {
font-size: 1.8em;
padding: 0px 0px 0px 0px;
margin: 0px 20px 0px 20px;
}


  div#bodytext div.blog div.post h4 a {
  text-decoration: none;
  } 

div#bodytext span.meta {
display: block;
font-size: 0.8em;
color: #c0a782; 
}

  div#bodytext span.meta a:link {
  color: #c0a782; 
  }
 
  div#bodytext span.meta a:hover {
  background-color: #F4EEE6; 
  } 
 
  div#bodytext span.meta strong {
  color: #c0a782;
  }
 

 
/*** FOOTER ***/

div#footer {
background-color:#56585a;
border-top: 2px solid #BBCCEE;
font-size: 1.2em;
color: #8a8a8a;
padding: 6px 0px 4px 20px;
text-align:center;
}
____________________________
og HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="da">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="author" content="Jensen Skruer" />
  <meta name="keywords" content="skruer" />
  <meta name="description" content="Skruer" />
  <meta name="robots" content="all" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/>
</head>

<body>

  <div id="everything">
     
      <div class="submenu blogmenu">
          <div class="spacer"></div>
      </div>
        <div id="headmenu">
        <div class="inner">
            <ul id="menu">
              <li><a href="">Forside</a></li>
              <li><a href="" title="">Profil</a></li>
              <li><a href="" title="">Kontakt</a></li>
            </ul>
        </div>
      </div>
   
      <div id="bodytext">
     
          <div class="post">
            <h4>Forside</h4>
            <p>Velkommen til CMJ Tools' hjemmeside. Vi s&aelig;lger skruer til <br> hvem som helst</p>
            <p>Vi s&aelig;lger skruer til alle
            <p>Vi best&aring;r af to fjolser, der er uddannede ingeni&oslash;rer (siger det hele)</p>
            <p>Vi s&aelig;lger skruer til private bla-bla-bla</p>
            <p>Vi s&aelig;lger skruer til private bla-bla-bla</p>
            <p>Vi s&aelig;lger skruer til private bla-bla-bla</p>
            <p>Vi s&aelig;lger skruer til private bla-bla-bla</p>
          </div>
      </div>
      <p class="promo">Dette er CMJ Tools' hjemmeside. Vi s&aelig;lger alle slags skruer til alle slags fjolser.</p>
</div>   

</body>
</html>

Med header så mener du grå menubaren øverst dvs. den der indeholder "Forside", "Profil" og "Kontakt". Hvis det er den så giver den sig IE (og Firefox).

Nej - jeg mener den med logo/billede i allerøverst!

Ikke den smarteste løsning. Indsat

<img src="images/header.gif" width="100%" height="50px" />

lige efter

<div id="headmenu">

(cirka linie 20)

Jeg havde problemer med at flytte width og height over i css.

img class havde et forkert navn så følgende burde virke:

html:
<img class="image" src="images/header.gif" />

css:
img.image {
    height: 50px;
    width: 100%;
}

Det virker fint, probl. er bare at hvis man gør browservinduet tilstrækkelig lille, så gøres logoet også mindre og mindre og ser fjollet ud til sidst.
Og jeg ville gerne, at logo + billede til højre i header blev ved med at være ens, men at kun det midterste skalerer, hvis du forstår ... ???

Hvad med at dele billedet i tre stykker. Til venstre er "CMJ Tools" som har en fast brede, i midten er billede der er defineret som i min kommentar (kl. 22:28:39) og til højre er billedet af sømmene, som også har en fast brede.

Jeg vil prøve i aften .. det lyder som en OK løsning?

Grrrrr, det kan jeg overhovedet ikke få til at virke.
Nu har jeg prøvet med et image, en div og et image - og de ligger sig på hver sin linje. De skal ligge ved siden af hinanden!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="da">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="author" content="Jensen Skruer" />
  <meta name="keywords" content="skruer" />
  <meta name="description" content="Skruer" />
  <meta name="robots" content="all" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/>
</head>

<body>

  <div id="everything">
        <div id="headmenu">
        <img class="header1" src="images/header1.gif" width="380" height="70">
        <div class="header2"></div>
        <img class="header3" src="images/header3.gif" width="400 height="70">
        <div class="inner">
            <ul id="menu">
              <li><a href="">Forside</a></li>
              <li><a href="" title="">Profil</a></li>
              <li><a href="" title="">Kontakt</a></li>
            </ul>
        </div>
      </div>
   
      <div id="bodytext">
     
          <div class="post">
            <h4>Forside</h4>
            <p>Velkommen til CMJ Tools' hjemmeside. Vi s&aelig;lger skruer til <br> hvem som helst</p>
            <p>Vi s&aelig;lger skruer til alle
            <p>Vi best&aring;r af to fjolser, der er uddannede ingeni&oslash;rer (siger det hele)</p>
            <p>Vi s&aelig;lger skruer til private bla-bla-bla</p>
            <p>Vi s&aelig;lger skruer til private bla-bla-bla</p>
            <p>Vi s&aelig;lger skruer til private bla-bla-bla</p>
            <p>Vi s&aelig;lger skruer til private bla-bla-bla</p>
          </div>
      </div>
      <p class="promo">Dette er CMJ Tools' hjemmeside. Vi s&aelig;lger alle slags skruer til alle slags fjolser.</p>
</div>   

</body>
</html>

CSS

/*** BASICS ***/

html { height: 100%;  margin-bottom: 1px; }
html * { padding: 0; margin: 0; }

body {
text-align: center;
/*background: #56585a;*/
background:url(../images/bgrund.gif);
padding: 20px 0px 40px 0px;
font-size: 62.5%;
}

#everything {
background-color:#FFFFFF;
text-align: left;
margin: 0 auto;
width: 70%;
height:100%;
font-family: "Trebuchet MS", Arial, sans-serif;
}

a:hover {
color: #76B900;
}

/*** HEADER ***/
   
.header1 {
    height: 70px;
    width: 320px;
}
.header2 {
    margin: 0px;
    padding: 0px;
    height: 70px;
    width: auto;
    background-color: blue;
}

.header3 {
    height: 70px;
    width: 400px;
}   
   
/*** MAIN MENU ***/

ul#mainmenu {
position: absolute;
top: 53px; left: 357px;
width: 363px; height: 30px;
list-style-type: none;
background: #3b3f43 url(images/menu.gif) no-repeat;
}

#headmenu, #footmenu {
  background: #8A92B1;
  color: #000;
  border-top:1px solid #8A92B1;
  border-bottom:1px solid #8A92B1;
}
#headmenu .inner, #footmenu .inner {
    align:center;
    padding:0px 5px 0px 20px;
    margin: 0;
    border-top: 2px solid #BBCCEE;
    border-bottom: 2px solid #BBCCEE;
   
}
#headmenu a, #footmenu a {
    font-size:9pt;
    color: #FFFFFF;
    font-weight: bold;
    text-transform : uppercase;
    text-decoration : none;
}
#headmenu a:hover, #headmenu a:active, #headmenu a:focus,  #footmenu a:hover, #footmenu a:active, #footmenu a:focus {
    color: #56585a;
}

#headmenu ul {
  margin: 0; padding: 0;
  padding-bottom:2px;
  list-style: none;
}
#headmenu li {
    text-transform: uppercase;
    display: inline;
    margin: 0;     padding: 0;
    padding-right:1em;

}
/*** HOME PAGE ***/

div#mainpromo {
height: 213px;
background: transparent url(images/home/2006-10.jpg) no-repeat;
margin: 0; padding: 0;
}   

  div#mainpromo p {
  text-indent: -4040px;
    margin: 0; padding: 0; 
    display: none;
  }
 
  div#mainpromo p.moreinfo {
  text-indent: 0px;
  display: block;
  }
 
  div#mainpromo p.moreinfo a {
  display: block;
  height: 213px;
  text-indent: -4040px;
  text-decoration: none;
    margin: 0; padding: 0; 
  }
/*** SUBMENU ***/

div.submenu {
height: 70px;
}

div.blogmenu  { width:100%;background: transparent url(../images/header.gif);background-repeat:no-repeat; }

div.spacer {background-color: #FFFFFF;}

/*** BODY TEXT ***/

div#bodytext {
background-color: #ffffff;
color: #444;

}

    div#bodytext a:link,
    div#bodytext a:visited,
    div#bodytext a:active {
    text-decoration: none;
    color: #545258;
    border-bottom: 1px solid #e7f4c3;
    }
     
    div#bodytext a:hover {
    background-color: #F2F7FA;
    }

  div#bodytext strong {
  color: #555;
  }
 
    div#bodytext strong.highlight {
    font-weight: normal;
    background-color: #ffffbb;
    color: #444;
    } 
   
    div#bodytext strong.subtle {
    font-weight: normal;
    color: #111;
    }

  div#bodytext h2 {
  color: #9D6C3C;
  font-size: 1.8em;
  padding: 20px 0px 0px 0px;
  margin: 0px 20px 0px 20px;
  }
 
  div#bodytext h3 {
  font-weight: normal;
  font-size: 1.6em;
  color: #c0a782;
  border-bottom: 1px solid #c0a782;
  padding: 0px 0px 20px 0px;
  margin: 0px 20px 20px 20px;
  }
 
  div#bodytext h4 {
  font-size: 2em;
  color: #56585A;
  padding: 0px 0px 0px 0px;
  margin: 10px 10px 20px 20px;
  } 
 
  div#bodytext p {
  font-size: 1.5em;
  margin: 0px 20px 0px 20px;
  padding: 0em 0em 1em 0em;
  }


 
  div#bodytext ul {
  margin: 0px 20px 0px 60px;
  padding: 0 0 1em 0;
  font-size: 1.5em;
  }
 
    div#bodytext ul li {
    padding: 0px 0px 3px 10px;
    }
   
  div#bodytext div.sidebar {
  width: 250px;
  margin: 0px 20px 0px 0px; 
  }
   
    div#bodytext div.starboard {
    float: left;
    }
 
    div#bodytext div.sidebar div {
    /*border: 1px solid #56585A;*/
    background-color: #8A92B1;
    color: #d1be9e;
    margin: 0px 0 0px 0;
    }
   
      div#bodytext div.sidebar div h4 {
      padding: 0px 0px 0px 0px;
      font-size: 1.4em;
      color: #56585a;
      margin: 0 0 0 0;
      }
   
      div#bodytext div.sidebar div p {
      font-size: 1.3em;
      padding: 0px 0px 0px 0px;     
      margin: 0 0 0 0;
      line-height: 1.1em;
      color: #FFFFFF;
      }   
 
  div#bodytext blockquote {
    font-family: Georgia, "Times New Roman";
    padding-left: 40px;
    padding-right: 40px;
    color: #777777;
    font-size: 1.1em;
    line-height: 1.7em;
  }

  div.double {
  display: inline-table;
  }
 
    div.double:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
     
/*** OTHER BOXEN ***/
   
p.promo {
padding: 6px 20px 6px 20px;
background-color: #8A92B1;
color: #FFFFFF;
margin: 0 0 0 0;
font-size: 1.2em;
clear: both;
}

  p.promo a:link,
  p.promo a:visited,
  p.promo a:active {
  text-decoration: none;
  border-bottom: 1px solid #aabb00;
  color: #FFFFFF;
  }
   
  p.promo a:hover {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;   
  background: transparent;
  }


/*** BLOG ***/

div#bodytext div.blog div.post h4 {
font-size: 1.8em;
padding: 0px 0px 0px 0px;
margin: 0px 20px 0px 20px;
}


  div#bodytext div.blog div.post h4 a {
  text-decoration: none;
  } 

div#bodytext span.meta {
display: block;
font-size: 0.8em;
color: #c0a782; 
}

  div#bodytext span.meta a:link {
  color: #c0a782; 
  }
 
  div#bodytext span.meta a:hover {
  background-color: #F4EEE6;
  } 
 
  div#bodytext span.meta strong {
  color: #c0a782;
  }
 

 
/*** FOOTER ***/

div#footer {
background-color:#56585a;
border-top: 2px solid #BBCCEE;
font-size: 1.2em;
color: #8a8a8a;
padding: 6px 0px 4px 20px;
text-align:center;
}

For at sætte billederne ved siden af hinanden skal man bruge float i css f.eks.

.test {
float: left
}

Jeg er sikker på det kan lade sig gøre med divs og css, men måske er det nemmere med en table.

Lille eksempel:

<table width="100%" align="center" >
<tr>
<td>
  <div class="header1">
  <img src="images/header.gif" width="200" height="70">
  </div>
</td>
<td width="90%">
  <div class="header2" width="100%"></div>
</td>
<td>
<div class="header3">
  <img src="images/header.gif" width="200" height="70">
</div>
</td>
</tr>
</table>

og css:

.header1 {
}
div.header2 {
width: 100px;
background-color: blue;
}

.header3 {
}

Du kan selv flytte ting og sager over i css header 1,2 og 3, og tilrette tabellen med margin etc.

aaaaarh, men det er jeg jo *lidt* ked af, når jeg hele vejen igennem har undgået tabeller.
Jeg prøvede alt muligt med float igår, og de 3 header-stykker dansede rundt som om de blev betalt for det - men kunne ikke stå ved siden af hinanden! :o(

<ole>

Det kan vel aldrig være et mål i sig selv at undgå tabeller. Så er der i hvertfald noget, man fundamentalt har misforstået  =)

/mvh
</bole>

Det er heller ikke sådan du skal forstå mit indlæg.
Jeg så det bare som en udfordring at prøve at lave det uden tabeller - for at lære den nyere metode med DIV - og jeg vil da vædde på, at det må kunne lade sig gøre at lave den header ... det er dét, jeg gerne ville kunne!
Hm, men hvis ingen har et bud må jeg jo lave det med tabeller.

jeg lukker spgsm. - jeg har lavet det med tabeller men har fået et nyt problem, som jeg synes kræver et nyt indlæg. Så det har jeg lige oprettet.

zappa - vil du smide et svar, så du kan få points?

Svar og tak.

-- og så er det vel tid til at lukke ?-)