Ha! Dat is een leuke variant! :thumb:
Dit moeten we even systematisch aanpakken.
Er kan voor alle pagina's één algemeen stylesheet gemaakt worden: daka-general.css.
Daarmee zijn we meteen van het inplakken van steeds (bijna) dezelfde styles in de <head> van alle pagina's af.
De truc is als volgt:
- Voor alle pagina's die in het blauw tevoorschijn moeten komen, maken we een class="daka" aan.
- Voor alle pagina's die in het rood tevoorschijn moeten komen, maken we een class="trading" aan.
- Deze class zet je in de body-tag.
- Alle blauwe pagina's krijgen: <body class="daka">.
- Alle rode pagina's krijgen: <body class="trading">.
De nieuwe class is nu de wisselaar voor de afwijkende styles die erna moeten komen. Dit kan zowel in de gewone daka-general.css toegepast worden (voor bv. de pagina-achtergrond) als in het spry-stylesheet voor het menu.
Bijvoorbeeld de algemene styles voor de horizontale menubar zijn:
Code:
ul.MenuBarHorizontal
{
margin: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 780px;
float: left;
padding: 3px 0 3px 20px;
}
De menu-bar verschilt alleen in de achtergrondkleur en in de kleur van het randje onderaan.
Dan gebruiken we voor de blauwe variant:
Code:
.daka ul.MenuBarHorizontal
{
background: #96C2D2; /* blauw */
border-bottom: 1px solid #67ACC5;
}
En voor de rode variant:
Code:
.trading ul.MenuBarHorizontal
{
background: #c85176; /* rood */
border-bottom: 1px solid #F00;
}
Wat betekent: alléén als er een menu-bar is waaraan de class="daka" voorafgaat, moet de blauwe achtergrond en het blauwe randje gebruikt worden. En dat is alleen het geval voor de pagina's waar in de body de class="daka" staat. Dat gaat dus altijd goed.
Voor de trading-pagina's wordt op dezelfde manier het rood gebruikt, want dat zijn de enige pagina's waar de class="trading" in de html voorafgaat aan de menubar.
Dat is nou het mooie van het cascade-karakter van CSS. :d
En eigenlijk heel logisch!
Nu is er één complicatie.
- De pagina-achtergrondkleur is momenteel vastgeknoopt aan de <html> tag.
- Maar die staat in de html boven de <body> tag, dus die kan met <body class="daka"> of <body class="trading"> niet beïnvloed worden.
De pagina-achtergrondkleur kan wel vastgeknoopt worden aan de <body> zelf, die kan wel wisselen met de ingevulde class.
- Probleem is hier, dat de <body> op een breedte van 800px staat, zelf ook kleuren heeft, en niet de volle pagina-breedte heeft.
- Oplossing is om er dan een <div id="wrapper"> tussen te zetten:
HTML:
<body id="daka">
<div id="wrapper">
...
de hele rest van de code
...
</div>
</div>
en ook:
HTML:
<body id="trading">
<div id="wrapper">
...
de hele rest van de code
...
</div>
</div>
- De <body> krijgt nu de kleuren die eerst in de <html> zaten.
- De #wrapper krijgt nu de kleuren die eerst in de <body> zaten.
Nu is alles wel met de body-class te beïnvloeden.
Met vriendelijke groet,
CSShunter
