Avatar billede lasseq Nybegynder
30. oktober 2005 - 16:45 Der er 8 kommentarer og
2 løsninger

Problem med width

Hej,

Jeg har et simpelt css-layout, hvor der er et banner (top), menu (venstre) og en indholdsrude (til venstre for menuen). Nu er det sådan, at jeg gerne vil have en baggrundsfarve på indholdsruden (som skal have en relativ bredde), og jeg har derfor i body forsøgt at skrive width:100% i håb om at det vil gøre, at min indholdsrude "fylder" resten af skærmen ud - det hjælper desværre bare ikke!

CSS:
body{
    width:100%;
    margin:0px;
    padding:0px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    color: #000000;
    background-image: url(images/udkast01_04.gif);
    background-repeat: repeat-y;
    background-position: left top;
}
div#hoved{
    height:60px;
    background-color:#A7A182;
}
div#menu{
    width:174px;
    float:left;
}
div#indhold{
    float:left;
    background-color:#000000;

}


html:

<body>
<div id="hoved"><img src="../grafik/images/udkast01_01.gif" width="652" height="60"></div>
<div id="menu"><img src="../grafik/images/udkast01_02.gif" width="174" height="223"></div>
<div id="indhold">Test</div>
</body>



Hjælp er meget efterlyst !! :)
Avatar billede skovenborg Nybegynder
30. oktober 2005 - 18:17 #1
prøv at fjerne float:left fra div#indhold

Hvis du virkelig mente det der med "til venstre for menuen" skal du jo egentlig skrive float:right i div#menu... oh well
Avatar billede roenving Novice
30. oktober 2005 - 21:38 #2
Der findes ingen css-property, som kan give dig 'resten' !-)

-- du skal derfor definere det med en bredde på en eller anden måde ...

F.eks. sådan:

html,body{
    width:100%;
    margin:0px;
    padding:0px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    color: #000;
    background: url(images/udkast01_04.gif) repeat-y left top;
}
#site{width:652px;margin:0 auto;}
div#hoved{
    height:60px;
    background-color:#A7A182;
}
div#menu{
    width:174px;
    float:left;
}
div#indhold{
    width:478px;
    float:left;
}


html:

<body>
  <div id="site">
    <div id="hoved"><img src="../grafik/images/udkast01_01.gif" width="652" height="60"></div>
    <div id="menu"><img src="../grafik/images/udkast01_02.gif" width="174" height="223"></div>
    <div id="indhold">Test</div>
  </div>
</body>
Avatar billede lasseq Nybegynder
30. oktober 2005 - 21:42 #3
Jeg vil i mit design så vidt muligt forsøge at lave bredden relativ... ER CSS så primitivt at der kun i ringe grad er kompatibilitet med relative størrelser, som i mit simple tilfælde?

Jeg må have skrevet forkort. Indholdsruden skal ligge til højre for menuen :)
Avatar billede roenving Novice
30. oktober 2005 - 21:54 #4
Browserne reagerer på det punkt forskelligt, så du er nødt til at bruge definerede størrelser, hvis det skal virke rimeligt ens !-)

-- og ja, du kan godt sige at css er så primitivt, men egentlig handler det om det modsatte: At det er beregnet til, at du kan fastlægge designet, og dermed ikke være afhængig af en brugeragents (browsers !-) tilfældige begrænsninger !o]
Avatar billede skovenborg Nybegynder
30. oktober 2005 - 22:02 #5
nu er det jo faktisk sådan, at en div jo fylder hele siden ud (i bredden) minus diverse margins selvfølgelig. Det kan du jo udnytte i dette eksempel ved at flytte indholds-boksen, via margin-left, et stykke til venstre. Herefter kan du jo rykke menuen hen på den tomme plads.

Fx:
div#menu{
    width:174px;
    position:absolute;
    top:60px;
    left:0px;
}
div#indhold{
    background-color:#000000;
    margin-left:174px;

}
Avatar billede lasseq Nybegynder
31. oktober 2005 - 17:10 #6
Skovenborg - din løsning var den absolut bedste :) Det virker sq efter hensigten :)
Tak for jeres kommentarer begge to - jeg vil gerne ha' et svar fra jer begge, da jeg har fået noget positivt ud fra jer begge!
Avatar billede skovenborg Nybegynder
31. oktober 2005 - 21:49 #7
helt i orden :-)
Avatar billede roenving Novice
01. november 2005 - 17:23 #8
Oki '-)
Avatar billede skovenborg Nybegynder
01. november 2005 - 17:40 #9
og tak for points :-)
Avatar billede roenving Novice
01. november 2005 - 17:40 #10
Ditto ;~}
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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