Website menu paar items andere kleur

[damnsharp]

Nou, mijn vormgever heeft weer wat leuks bedacht voor een website voor een wijkraad. Namelijk een menu met meerdere kleurtjes en.... dan moeten een paar menu items (de laatste 3) ook precies op die plek staan. Aargh...



Ik stel de vraag hier toch maar, kan het zo? Zo nee, ga ik het anders oplossen: het gehele oranje menu als 1 menu (nav) en dan de laatste drie items (contact, fotoalbum, nieuws) als losse aanklikbare plaatjes met een oranje hover. Nadeel daarvan is dat ik dan volgens mij niet die oranje hover kan laten vast staan, dus dat de gebruiker weet dat die bijvoorbeeld op de contact pagina is.
Bedankt voor het meedenken!

 

[csshunter]

Hoi damnsharp,
Kan je niet gewoon de laatste 3 items in het menu laten staan, en de <li>'s ervan elk een eigen class meegeven (of id)?
Dan kan je er alles mee doen wat je wilt (afwijkende gewone kleur, afwijkende hoverkleur, afwijkende "actuele pagina" kleur, enz.).

Met vriendelijke groet,
CSShunter

 

[damnsharp]

Dank je wel CSShunter voor reageren :thumb:. Dat is zeker een idee mogelijkheid maar de laatste 3 knoppen moeten op een precieze plaats staan. Ik weet zelf niet hoe ik dat bij CSS doe.

 

[csshunter]

#menu li
    width: 147px;    /* i/h alg. = voor de 5 linkerkant-items; 1/5 van de witte kolombreedte */
    background: orange;
    color: white;
    }
#menu li#contact { 
    width: 90px;     /* uitzondering */
    background: blue;
    }
#menu li#fotoalbum {
    width: 133px;    /* uitzondering */
    background: darkviolet;
    }
#menu li#nieuws {
    width: 139px;    /* uitzondering */
    background: green;
    }

Samen zijn de 3 aan de rechterkant dan precies de breedte van de rechterzijkolom.
Voor het hoveren enz. maak je vervolgens een analoog rijtje, bv.:

#menu li:hover { background: darkviolet; } /* voor het nut van het algemeen */
#menu li#contact:hover (background; yellow; }
enz.

Zoiets?

 

[damnsharp]

Ik ga het proberen CSShunter, het ziet eruit alsof dat de oplossing is
Trouwens, bedoel je dat bijv. menu item Contact een extra div dan erom heen krijgt?

 

[damnsharp]

super!

Ja, werkt! Snapte je niet helemaal (dat #menu li#contact) maar je bedoelt met id. Dus <li id="contact"><a href="#">contact</a></li>
Top maar weer.