[CSS/XHTML 1.0]Image vervangen dmv stylesheet.

[Verwijderd]

Ik probeer voor een site van mij meerdere layouts mogelijk te maken door enkel een stylesheet te vervangen. het gaat daarbij voornamelijk om kleuren.

enkele van de 'onderdelen' van de layout zijn plaatjes. zoals een horizontaal balkje die de de links van elkaar scheid.

nu wil ik graag dat zodra er een andere stylesheet geladen wordt die plaatjes ook veranderen. dus de stylesheet moet bepalen wel plaatje wordt weergegeven.

op dit moment heb ik:

HTML:

<div class="topmenu">
    <ul>
        <li class="seperator"><img src="images/softgreen/h_sep.png" /></li>
        <li><a href="#">Resultaten</a></li>
        <li class="seperator"><img src="images/softgreen/h_sep.png" /></li>
        <li><a href="#">Iets anders</a></li>
        <li class="seperator"><img src="images/softgreen/h_sep.png" /></li>
        <li><a href="#">Nogwat</a></li>
        <li class="seperator"><img src="images/softgreen/h_sep.png" /></li>
    </ul>
</div>

Cascading Stylesheet:

.topmenu{background:#b4c6bd;clear:both;height:35px;overflow:hidden;}
.topmenu ul{display:block;list-style:none;margin:auto;padding:0 0 0 0px;}
.topmenu li{float:left;margin:0 0 0 0;padding:0px;}
.topmenu a{color:#545c5f;font:1.25em Arial,Helvetica,sans-serif; display:block;float:left;font-size:20px;font-weight:bold;height:30px;padding:5px 10px 0 10px; text-decoration:none;}
.topmenu a:hover{color:#e9f2ee;text-decoration:none;}
.topmenu a:active{color:#e9f2ee;text-decoration:none;}

dit geeft netjes de layout 'softgreen' weer. maar wanneer ik nu de css vervang blijven die 'seperators' natuurlijk de verkeerde kleur.

ik heb al van alles geprobeert. dmv een div ipv die <img ,,, /> en dan die een background image te geven. dat li.seperator element een background image geven, etc.

maar het lukt me maar niet om dat plaatje te veranderen. ook op google kom ik vandaag helaas niet veel verder.

iemand een idee welke methode ik hier toe moet passen?

vast bedankt.

[crisp]

Waarom lukt het je niet om de LI een background-image te geven? Een IMG-element gebruiken voor puur styling is eigenlijk niet echt netjes.

Overigens hoef je er zelfs geen aparte LI's voor te gebruiken...

[CH4OS]

Je zegt dat je het een en ander al hebt geprobeerd met de HTML en CSS zelf.
Heb je hierbij een specifieke browser gebruikt? Zo ja, dan kan het goed mogelijk zijn, dat het bij een andere browser wél werkt zoals je graag wilt.

Ook geef je te kennen, dat je hebt gezocht bij Google, kun je misschien aangeven welke zoektermen dat zijn geweest? Heeft de search op GoT zelf je trouwens wat licht in de duistere tunnel kunnen geven?

En of je een voorbeeldje online hebt staan...

[Verwijderd]

tjonge jonge jonge... stomheid van de eeuw... exuses voor het lastigvallen

ik had om te testen 2 stylesheets gemaakt. softgreen.css en newstyle.css ik had softgreen gelinked staan en stond vrolijk de ander te editen...

stom stom stom... gewoon met een <div class="seperator"></div> en een background-image in css werkt het dus wel.. vond het al zo stom dat het maar steeds niet werkte terwijl het wel op het internet zo gedaan werdt

[50Miles]

Dat is het nadeel van CSS bestanden vind ik altijd;). Het overkomt mij regelmatig dat ik de verkeerde edit:P.

[CH4OS]

Tja, dan zou je natuurlijk ook een CSS-stylesheet dynamisch kunnen maken, bijvoorbeeld met PHP of zo... Heb je 1 stylesheet die je aanroept, maar toch verschillende outputs heeft...

[Zoefff]

Of je houd gewoon je koppie erbij en gebruikt duidelijke namen voor je stylesheets?

Anyway, crisp merkt natuurlijk al terecht op dat het niet geheel correct is dat je image-elementen gebruikt voor de opmaak. Het gebruik van 'spacers' en 'separators' stamt nog uit het tijdperk dat vormgeving met tabellen werd gedaan, je hebt ze tegenwoordig echt niet meer nodig. Voor ruimte tussen elementen kan je nu prima 'margin' en / of 'padding' gebruiken. In dit geval kan je het 'separator-plaatje' prima als achtergrond op de li's met content zetten, en creeer je wat afstand met een margin en padding. Zo heb je geen vervuilende list- en imageelementen nodig