css background div scaled niet mee

[Zym0tiC]

Ik ben bezig om een site te maken met phpwcms. Nu heb ik een template gemaakt waarin de volgende div's staan:

code:

<div id="container">
   <div id="banner"></div>
   <div id="center">
      <div id="menu"></div>
      <div id="content"></div>
   </div>
   <div id="footer"></div>
</div>

code:

#container {
    width: 760px;
    \width: 780px;
    w\idth: 760px;
        border: 1px solid #000000;
    margin-left: auto;
    margin-right: auto;
}

#banner {
        height: 160px;
    background: url(/phpwcms/img/site/banner.jpg);
}

#center {
    width: 760px;
    background: url(/phpwcms/img/site/bg_l_r.jpg);
}

#content {
    padding: 5px;
    margin-left: 170px;
        margin-right: 10px;
}

#menu {
        float: left;
    width: 160px;
    \width: 170px;
    w\idth: 160px;
    padding: 5px;
}

#footer {
    clear: both;
        text-align: center;
    background: url(/phpwcms/img/site/footer.jpg);
}

Het probleem is nu echter dat de achtergrond (.content) niet meeschaalt wanneer de linker helft (.menu) lang wordt dan de rechterhelft (.content). Andersom schaalt de achtergrond wel mee.

Ik zelf denk dat het iets te maken heeft met float: left bij menu waardoor .menu uit .center valt. Maar als ik dat weghaal dan krijg ik met geen mogelijkheid de rechterhelft langs de linker helft.

Ik heb al verschillende vergelijkbare css-en nagekeken maar het probleem kan ik echter niet vinden.

[Grom]

Zoek hier eens op faux columns ik denk dat je dan de oplossing zult vinden.

[Zym0tiC]

Grom schreef op donderdag 04 augustus 2005 @ 14:24:
Zoek hier eens op faux columns ik denk dat je dan de oplossing zult vinden.

Ik heb deze pagina: http://www.alistapart.com/articles/fauxcolumns/ als voorbeeld genomen. In .center zit mijn achtergrond die uit een donkere kleur kolom bestaat waar het menu komt en een lichte kleur waar de content komt.

Het probleem zit hem echter in het meeschalen van .center wbt de lengte

Ik heb trouwens de volgende regel toegepast in .center:

code:

background: #ccc url(/phpwcms/img/site/bg_l_r.jpg) repeat-y 50% 0;

Helaas gebeurd dit niet. Pas ik de regel echter toe in het body element dan word mijn beeld wel gevuld met de betreffende image.
Waarom niet als ik dat toepas bij center

[ Voor 25% gewijzigd door Zym0tiC op 04-08-2005 14:41 ]

[Grom]

Heb je al geprobeert om een border te zetten om de divs en te kijken hoe die meeschalen?

Ik vind het zonder een linkje naar je test-site lastig om je te helpen. Kun je die geven?
Dan kan ik je bg-image gebruiken om nog wat te experimenteren.

[Zym0tiC]

url is: http://www.shinebox.ath.cx/phpwcms/

borders zet ik ik nu aan.

[Verwijderd]

doe eens

code:

#center {
    width: 760px;
    background: url(/phpwcms/img/site/bg_l_r.jpg);
    overflow: auto;
    _height: 1%;
}

uitleg: http://annevankesteren.nl/2005/03/clearing-floats

[BtM909]

Verwijderd schreef op donderdag 04 augustus 2005 @ 15:53:
doe eens

code:

#center {
    width: 760px;
    background: url(/phpwcms/img/site/bg_l_r.jpg);
    overflow: auto;
    _height: 1%;
}

uitleg: http://annevankesteren.nl/2005/03/clearing-floats

Handig idd, of een <br clear="all"> achter je menu wilt ook wel helpen

[Zym0tiC]

Verwijderd schreef op donderdag 04 augustus 2005 @ 15:53:
doe eens

code:

#center {
    width: 760px;
    background: url(/phpwcms/img/site/bg_l_r.jpg);
    overflow: auto;
    _height: 1%;
}

uitleg: http://annevankesteren.nl/2005/03/clearing-floats

thanx dit werkt idd

maar alleen als ik mijn css laat validaten dan krijg ik een error op _height: 1%. Haal ik dit weg dan validate hij wel goed en ik zie ook niets veranderen op de site. Maar ik neem aan dat dit toch wel een functie heeft ?

[Verwijderd]

ownee, hij kan weg

het is om voor IE hasLayout te forceren (http://www.satzansatz.de/cssd/onhavinglayout.html), maar dat doe je al met die width