link knop van menu vaste kleur geven bij geopende pagina met mouse over effect.

[djeric]

hallo.

ik wil als men op een link klikt in het menu (aan linkerkant) dat deze de mouse over kleur vast houdt bij de pagina die dan open staat.
en weer uit gaat als men op een andere link klikt. en het mouse over effect zoals nu vasthoudt.

dus ik wil de pagina" biografie" bezoeken, (is nu bruin/oranje) deze kleurt bij een mouse over naar geel/blauw dat hij dus deze mouse over kleur (geel/blauw) vasthoud als ik op de pagina "biografie" beland bent. en weer uit gaat als ik bv naar de pagina met "links" ga. (dat dan de menu knop met "links" de kleur blauw/geel vasthoud)

de link naar me website: klik hier

ls. viel me op dat me pagina met gastenboek dit wel doet als ik terug keer naar me webpagina.

 

[csshunter]

Dan kan je in de html van elke pagina de menu-link naar die pagina zelf een id="actual" geven, bv. in de pagina "Biografie":

<div id="menukolom">
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a id="actual" href="biografie.html">Biografie</a></li>
		<li><a href="kenmerken.html">Kenmerken</a></li>
		... enz.

Op de pagina "Kenmerken" zet je de id="actual" in de <a> van de volgende <li>, enz.

In de css geef je dan de opdracht om alleen deze link geel/blauw te maken, net zoals bij een hover:

#menukolom li a:hover, 
#menukolom li a:focus, 
#menukolom li a#actual {
    background: #FFFF00;
    color: #0000FF;
}

 

[djeric]

In de css geef je dan de opdracht om alleen deze link geel/blauw te maken, net zoals bij een hover:

#menukolom li a:hover, 
#menukolom li a:focus, 
#menukolom li a#actual {
    background: #FFFF00;
    color: #0000FF;
}

Heey css hunter...

wederom bedankt :thumb: was ik nooit opgekomen om een id te geven voor iedere pagina.

maar toen ik alles had toegepast viel me op dat als ik een mouse over gebruikte de mouse over de zelfde kleur had als de geopende link van het menu. dus zag ik bv biografie in geel/blauw en bij een mouse over op bv links was deze ook geel/blauw. dit maakte het dus onoverzichtelijk.

heb dus in de css het volgende uitgeprobeerd.

#menukolom li a:hover,
#menukolom li a:focus {
background: #FFFF00;
color: #0000FF;
}


#menukolom li a#actual {
background: #0000FF;
color: #ffffff;
}

 

[csshunter]

Jazekers, da's een goede uitbreiding. :thumb:

Wat je ook nog kan doen:

#menukolom li a#actual {
   background: #0000FF;
   color: #ffffff;
   cursor: default;
   }

Dan wordt de cursor bij een hover over de menu-link van de al openstaande pagina geen handje: want daar hoef je toch niet op te klikken.

 

[djeric]

Dan wordt de cursor bij een hover over de menu-link van de al openstaande pagina geen handje: want daar hoef je toch niet op te klikken.

had ik ook nooit aan gedacht, heb meteen aangepast. ziet er idd beter uit.

maar nog 1 probleem ontdekt.

als ik het gastenboek ben geweest en ik keer terug naar me website dan staat de knop gastenboek nog steeds aan. hoe kan dit?

 

[csshunter]

Ja, dat is een lastige, want hier treden browserverschillen op: dit doen Firefox, Opera en Safari. Maar IE7 en Chrome doen het niet.
De achtergrond zit in de verschillende manier waarop ze met de a:focus eigenschap omgaan.

Je komt er van af door de a:focus uit het rijtje link-kleuren te schrappen.

Nadeel is dat het menu dan wat minder toegankelijk wordt voor mensen die met de Tab-toets de links bedienen ipv met de muis te hoveren: die zien nu minder duidelijk waar ze zich in het menu bevinden.

Met vriendelijke groet,
CSShunter
_________
PS: Hetzelfde verschijnsel doet zich voor als je naar een vorige pagina teruggaat via de Terug-knop van de browser.
En zodra je ergens in het document klikt, verdwijnt de "focus", en is de menuknop weer normaal.

 

[djeric]

Je komt er van af door de a:focus uit het rijtje link-kleuren te schrappen.

Nadeel is dat het menu dan wat minder toegankelijk wordt voor mensen die met de Tab-toets de links bedienen ipv met de muis te hoveren: die zien nu minder duidelijk waar ze zich in het menu bevinden.

Is het een optie om het gastenboek nu in mijn webpagina te zetten? dus geen aparte link er naar toe? zoals: hier?

Of beter de optie om een eigen gastenboek te maken?

 

[csshunter]

Ja, integreren van het gastenboek in de site lijkt me niet z'n slecht idee. Dan kan het gastenboek-gedeelte als <iframe> aan de rechterkant komen, en het menu en het groen kunnen hetzelfde blijven.
Op die manier is het ook makkelijk om snel even in het gastenboek te kijken of er iets nieuws bij staat, en anders weer naar een gewone pagina terug te gaan.

 

[djeric]

Ja, integreren van het gastenboek in de site lijkt me niet z'n slecht idee.

maar hoe krijg ik dit dan precies op al me pagina's te zien?

een zekere "de fietser" hier op helpmij heeft me ooit eens geholpen om een site te bouwen, en heb daar dat gastenboek ook in een code staan maar snap niet precies wat wat is... zie: hier

 

[csshunter]

In principe als volgt:
De <div id="inhoud"> centreren:

#inhoud {
    font-style: italic;
    text-align: center;
}

en dan de link naar het gastenboek inplakken als <iframe>:

...
<div id="inhoud">
    ...
    <iframe src="http://mydiesel.mygb.nl/" height="500px" width="600px"></iframe>
    <div id="footer">
    ....

Vervolgens zal de gastenboekpagina zelf (bij mygb.nl op de site) aangepast moeten worden tot de goede breedte, zodat je niet meer L/R hoeft te scrollen. De tekst aan de linkerkant zal niet nodig zijn, als je die op de pagina van je eigen site zet als inleiding voordat het <iframe> begint.

 

[djeric]

Vervolgens zal de gastenboekpagina zelf (bij mygb.nl op de site) aangepast moeten worden tot de goede breedte, zodat je niet meer L/R hoeft te scrollen. De tekst aan de linkerkant zal niet nodig zijn, als je die op de pagina van je eigen site zet als inleiding voordat het <iframe> begint.

Hellaas bieden ze mij die optie niet. heb nu het gastenboek uiterlijk gewijzigd, waardoor de berichten plaatsen boven aan begint en een bericht er onder komt. enkel hoeft men uit nieuwsgierigheid de scrolbar gebruiken voor verticaal gebruik.

maar ik stoor me er niet aan een berichtje plaatsen is nu een stuk fijner en makelijker geworden, is al veel beter.

heb ook eventjes 2x een </div> afgesloten onderaan :thumb: