[HTML] active link underlined

[CaptBiele]

Ik hoop niet weer de zoveelste kneus te zijn met een underlined link vraag, maar ik moet het toch kwijt

Ik ben bezig met een simpele site voor mijn achterbuurman. Het is eigenlijk mijn eerste site met css, en dus is het menu opgebouwd zonder plaatjes. (ik gebruik alleen een grote background image)

Het probleem is dat ik niet het active menu-item kan tonen. Bij een klik op een menu-item wordt de hele pagina opnieuw geladen. Hierbij wordt de keuze niet onthouden......lijkt me op zich best logisch, alleen heb ik het gevoel dat ik hier als enige tegen aan loop. Als ik de href's verander in # dan werkt het prima... Hieruit mag ik toch concluderen dat de css zelf in orde is.
Ik heb ook al andere menu's bekeken, en zie geen grote verschillen tov mijn code.

volgens mij zie ik iets heel basaals over het hoofd, maar ik wil het toch graag weten.....

[André]

Een 'active' link is de link waar op dat moment de focus op staat, en niet de link welke geopend is. Je kunt op de pagina "info" de knop "info" een class "actief" geven waarin je hem een underline geeft.

[sjaakaq]

Inderdaad, de "active" state is de staat zolang je erop klikt (1 seconde lang dus...).

[frickY]

De active-state blijft wel bewaard als je de pagina laat openen in een ander frame of venster, maar dat lijkt me ook niet de bedoeling.

Je kunt kunt met een script, of serversie (php, asp, etc) of clientside (javascript, vdscript) afvangen welke pagina is opgevraagd en de class van de bijbehorende link aanpassen.

[Verwijderd]

Een workaround in CSS: Geef elke pagina een unieke id dmv een id toetewijzen aan de body tag. Bijvoorbeeld #service voor de service pagina, #info voor de info pagina. Geef ook elke list item in je menu een unieke id. Bijvoorbeeld #knop_service voor de service knop en #knop_info voor de info knop.

Dan kun je de actieve pagina laten zien dmv:

#service #knop_service a {
font-weight: bold;
}

#info #knop_info a {
font-weight: bold;
}

Als de link normaal gezien niet bold is zul je dus een link zien voor service die bold is alleen op de service pagina zelf en niet op de andere paginas. Zo kun je dus aangeven op welke pagina de bezoeker zit. Simpel en te realiseren met alleen maar wat simpele css

[CaptBiele]

leokennis schreef op maandag 07 november 2005 @ 19:54:
Inderdaad, de "active" state is de staat zolang je erop klikt (1 seconde lang dus...).

aha. Dus toch iets stoms van mezelf....

Verwijderd schreef op maandag 07 november 2005 @ 21:42:
Een workaround in CSS: Geef elke pagina een unieke id dmv een id toetewijzen aan de body tag. Bijvoorbeeld #service voor de service pagina, #info voor de info pagina. Geef ook elke list item in je menu een unieke id. Bijvoorbeeld #knop_service voor de service knop en #knop_info voor de info knop.

Dan kun je de actieve pagina laten zien dmv:

#service #knop_service a {
font-weight: bold;
}

#info #knop_info a {
font-weight: bold;
}

Als de link normaal gezien niet bold is zul je dus een link zien voor service die bold is alleen op de service pagina zelf en niet op de andere paginas. Zo kun je dus aangeven op welke pagina de bezoeker zit. Simpel en te realiseren met alleen maar wat simpele css

Zoiets zocht ik al. Lijkt me handig... ga het nu proberen te implementeren....
tnx zover!

[joint_me]

als ik het goed begrijp, wil je je de gebruiker feedback geven doormiddel van een het veranderen van de looks van de button van de pagina waar je je op bevind.

Mijn oplossing die ik daarvoor gebruik is PHP, en de methode staat mooi uitgelegd op deze pagina >> http://www.alistapart.com/articles/keepingcurrent/

Dit is voor mij de makkelijkste methode en je het is niet veel meer werk

[CaptBiele]

joint_me schreef op dinsdag 08 november 2005 @ 12:25:
als ik het goed begrijp, wil je je de gebruiker feedback geven doormiddel van een het veranderen van de looks van de button van de pagina waar je je op bevind.

Mijn oplossing die ik daarvoor gebruik is PHP, en de methode staat mooi uitgelegd op deze pagina >> http://www.alistapart.com/articles/keepingcurrent/

Dit is voor mij de makkelijkste methode en je het is niet veel meer werk

je begrijpt het goed!
maar het principe van de oplossing van ALA was al eerder genoemd. Het extra handige is dat je met php ervoor kan zorgen dat je weinig onderhoud hebt.... maar ik heb maar 4 simpele linkjes, en dat zal ook niet veranderen.

maar tnx anywayz

[PhoeniX-]

Op mijn site check ik met javascript de locationbar op het 'menu_id' (uniek id voor elke pagina in deze situatie) en verander ik de stijl van de tabbutton die naar dit menu_id linkt naar 'active'. Hetzelfde principe kan je misschien toepassen om te checken welk html bestand er actief is om zo de link hiernaar een andere stijl te geven.

[ Voor 11% gewijzigd door PhoeniX- op 09-11-2005 10:49 ]

[CaptBiele]

potverdikkie, dit viel nog best tegen. Ik had eerst de betreffende links een class "actief" gegeven, maar dit werkte niet. Het werkt wel als ik er een span omheen zet met het id "actief".

Alleen nu werkt het weer niet in FF

zo moeilijke code is het toch niet d8 ik:

code:

span#actief a{
    text-decoration: underline;
}

[Verwijderd]

Je maakt het jezelf vooral moeilijk als je de verkeerde volgorde gebruikt (minder specifieke regels kun je beter eerst opschrijven, specifiekere regels later), of als je niet specifiek genoeg bent bij het overriden van eerdere rules.

[Pendaco]

Een beetje offtopic reactie;

Ik zou die achtergrond image een stuk kleiner in grootte maken, dat plaatje kun je qua kb's door 10 delen en nog dezelfde kwaliteit behouden (probeer wat met de settings van je beeldbewerkingsprogramma te spelen > photoshop laat bijv precies zien hoe groot de afbeelding wordt

[Verwijderd]

je maakt het jezef moeilijk, ik zou het volgende doen:
-eerst geeft alle links een style
-vervolgens defineer je een class .active
-en zet je gewoon in de source van de betreffende pagina dat de actieve link de class="active" gebruikt.

Let ook op bij info dat als je alle vragen openklapt de tekst uit je venster loopt, dit kan je makkelijk oplossen door de #content (of #submenu, weet trouwens niet waarom je deze gebruikt) een vaste grootte te geven (zo groot als het plaatje) en de overflow op auto te zetten, als de tekst uit het venster gaat lopen krijg je een scrolbalk

900kb voor een achtergrond plaatje is idd wel groot, ik zou er een jpg op 60 kwaliteit van maken

[ Voor 9% gewijzigd door Verwijderd op 12-11-2005 17:57 ]

[CaptBiele]

Verwijderd schreef op zaterdag 12 november 2005 @ 16:56:
Je maakt het jezelf vooral moeilijk als je de verkeerde volgorde gebruikt (minder specifieke regels kun je beter eerst opschrijven, specifiekere regels later), of als je niet specifiek genoeg bent bij het overriden van eerdere rules.

Ik dacht dus dat ik dit gerealiseerd had. Eerst de stijl van de algemene links. En dan pas de stijl van de actieve link.

Pendaco schreef op zaterdag 12 november 2005 @ 17:43:
Een beetje offtopic reactie;
Ik zou die achtergrond image een stuk kleiner in grootte maken, dat plaatje kun je qua kb's door 10 delen en nog dezelfde kwaliteit behouden (probeer wat met de settings van je beeldbewerkingsprogramma te spelen > photoshop laat bijv precies zien hoe groot de afbeelding wordt

tnx voor de tip. Deze staat nog op mijn 2do lijstje!

Verwijderd schreef op zaterdag 12 november 2005 @ 17:55:
je maakt het jezef moeilijk, ik zou het volgende doen:
-eerst geeft alle links een style
-vervolgens defineer je een class .active
-en zet je gewoon in de source van de betreffende pagina dat de actieve link de class="active" gebruikt.

Let ook op bij info dat als je alle vragen openklapt de tekst uit je venster loopt, dit kan je makkelijk oplossen door de #content (of #submenu, weet trouwens niet waarom je deze gebruikt) een vaste grootte te geven (zo groot als het plaatje) en de overflow op auto te zetten, als de tekst uit het venster gaat lopen krijg je een scrolbalk

900kb voor een achtergrond plaatje is idd wel groot, ik zou er een jpg op 60 kwaliteit van maken

Ook tnx voor de goede tips.
De link met een class active definieren lukte me dus niet. Zie mijn vorige post.
Ook van de scrollbalk ben ik me bewust. Dit is het laatste punt van mijn todo lijstje
Ik zorg ervoor dat er maar max 1 item open kan worden geklapt.
En het plaatje ga ik idd wat kleiner maken....