actuele pagina knopkleur

Ik bepaal momenteel de tekstkleur en achtergrond van een menuknop die bij een pagina hoort (dus pagina audio heeft de menuknop audio in afwijkende kleur), door onder de aanroep van de css-file in een interne style aanroep:

[quote:de25f49f9f]
<style type=“text/css” media=“screen”><!–
dl#menu dt#mpunt2 a { color: #800000; background-color: #8e9295;}
–></style>
[/quote:de25f49f9f]
de afwijkende tekstkleur van die menuknop te zetten. Dat kan omdat iedere knop een eigen <div</div> heeft met eigen ID. De variabele in bovenstaande aanroep is dan ook de ID, die is verschillend op de verschillende pagina’s.
De kleur evenwel is steeds hetzelfde, en ik zoek naar een manier om die afwijkende tekst- en achtergrondkleur buiten mijn html pagina’s om te bepalen…zodat die niet in elke html-pagina gewijzigd moet worden als ik de kleur wil veranderen.
O ja, voor je je afvraagt waarom ik niet gewoon in het menugedeelte bij de bedoelde knop een aparte ID geef zodat er een afwijkende kleur komt: het stuk html wat het menu maakt wordt als geheel opgehaald via een php-include.

Ik denk dat het zonder javascript NIET kan, en met javascript (of misschien php) wel. Wie weet raad?

Ik heb na het nodige gepiel (PHP is niet de taal van mijn dromen, maar van mijn nachtmerries) gebruik ik [url=http://www.alistapart.com/articles/keepingcurrent/]Keeping content current[/url] van Alistapart om d menuutjes op orde te houden. [quote:6019f64ef8]If you haven't figured it out, the current-page magic is determined by the PHP value of $thisPage. Since we have assigned a unique value to $thisPage for each XHTML file, we are able to craft a navigational menu that will automatically add the id="currentpage" to the appropriate link before the page is ever sent to the user. Here’s how we do it:[/quote:6019f64ef8]

Het hangt alleen af van de rest van je structuur of dit makkelijk is toe te passen. Het idee is wel slim…

Of ik begrijp niet goede wat je doet, of je ziet iets heel simpels over het hoofd, maar waarom definieer je die afwijkende kleuren niet gewoon in een externe stylesheet?

Je kan zelfs een aparte stylesheet eraan hangen die gegenereerd wordt in een loopje in php als het aantal menu-items varieert.

Verder is het misschien mogelijk om ook semantisch aan te geven dat een knop geselecteerd is. Stel dat je HTML er als volg uit ziet:

[code:1:c981062f97]
<dl>
<dt><a href="#">…</a></dt>
</dl>
[/code:1:c981062f97]

dan kan je in PHP in je loopje laten bepalen of een item al dan niet geselecteerd is en bij een geselecteerd item de code als volgt laten genereren:

[code:1:c981062f97]
<dl>
<dt><strong><a href="#">…</a></strong></dt>
</dl>
[/code:1:c981062f97]

In plaats van strong kan je ook <b>, <i>, <em> gebruiken. Op die manier zie je al zonder stylesheet dat het item geselecteerd is.

In je css doe je dan:

[code:1:c981062f97]
dl dt strong a { color: #800000; background-color: #8e9295;}
[/code:1:c981062f97]

en alles is in 1 keer geregeld.

[quote:43aa1e17b5] maar waarom definieer je die afwijkende kleuren niet gewoon in een externe stylesheet? [/quote:43aa1e17b5] Omdat de externe stylesheet niet weet door welke pagina hij (of zij..) wordt aangeroepen.

Op het moment als je je menu NIET includet, en in de html al aanwezig is, zou je de knop in de html kunnen aangeven met bijv. een ID=“geselecteerdeknop”, en dan kun je inderdaad in een externe stylesheet alles afhandelen.
Haal je het menugedeelte ergens anders vandaan, via php-include, dan gaat dat niet.

Mijn werkwijze, met een intern stylecommando per pagina de ID van de knop aanroepen en de stijl ervan wijzigen, is zo gek niet en simpel, maar nadeel is dat de kleuren op elke pagina zijn gedefinieerd, en dit gaat tegen het principe van scheiding van opmaak en inhoud in.

Ik ga nog eens rustig jullie suggesties bekijken. Voorzover bekeken denk ik dat er wellicht een middenweg mogelijk is tussen de Alistapart oplossing en wat Tennapel zegt.

[quote:e3becbe98e="Harryk"] Op het moment als je je menu NIET includet, en in de html al aanwezig is, zou je de knop in de html kunnen aangeven met bijv. een ID="geselecteerdeknop", en dan kun je inderdaad in een externe stylesheet alles afhandelen. Haal je het menugedeelte ergens anders vandaan, via php-include, dan gaat dat niet. [/quote:e3becbe98e]

Dit begrijp ik niet. Als je via PHP een include doet, dan wordt eerst door de webserver en de php engine de pagina door de PHP parser gerendert en vervolgens wordt het eindresultaat daarvan – een HTML pagina – naar de browser gestuurd.

De browser weet niet dat het menu ergens anders vandaan komt, de browser ziet 1 HTML pagina. Waarom kan je dan niet via een externe stylesheet de layout regelen? Ik doe niets anders.

Ik snap niet wat de dwingende reden is waarom je perse een interne style moet gebruiken, omdat je het menu met PHP include. Kennelijk mis ik nog een stukje informatie. Kan je wat code voorbeelden posten?

http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css

Zo te lezen geeft deze pagina het antwoord op wat ik wil. Het gaat er dus om in een menu het item te highlighten wat bij de huidige pagina hoort.
Ik moet het nog uittesten.

De aardigheid van de geboden oplossing ligt erin dat de details van de highlight ook in het css-bestand kunnen worden gedefinieerd.

Deze oplossing werkt prima als je handmatig onderhoudt doet van je pagina's.

Als je echter bijvoorbeeld MySQL gebruikt om je data (en menu) op te slaan en PHP om die informatie op een pagina te toveren, dan is het beter om er in je HTML wat mee te doen.

De CSS oplossing met id’s is niet semnatisch; zonder CSS kan je niet zien in je browser waar je bent in het menu. Als je het in je HTML oplost – dus semantisch – kan je in CSS alsnog er alles mee doen.

Kijk maar eens naar de verschillen met en zonder CSS op de volgende twee websites:
http://www.doublea.net
http://www.noipo.org

De eerste website werkt met de CSS id oplossing, de tweede gebruikt HTML om aan te geven waar je bent in het menu.