Jump to content

States of link


kurt.santo
 Share

Recommended Posts

Still got problems understanding the states of a link. So, there is no state indicating that this is the current link? In another post I learned already that the :active is only for when you click the link and it does not last as such. But how do you style then the active link in nav bars etc? I have seen so many sites, which change the link colour for the current selected item in a nav bar and it only changes when another item gets clicked upon (which will highlight this element)...Kurt

Link to comment
Share on other sites

Still got problems understanding the states of a link. So, there is no state indicating that this is the current link? In another post I learned already that the :active is only for when you click the link and it does not last as such. [...]
It's not consistent across browsers: in Firefox, the :active style is applied till you release the mouse-click, but in IE, it remains after you release the mouse-click.
But how do you style then the active link in nav bars etc? I have seen so many sites, which change the link colour for the current selected item in a nav bar and it only changes when another item gets clicked upon (which will highlight this element) [...]
Javascript.
Link to comment
Share on other sites

ANY method by which you can insert an ID - or better yet a class - to an element will do it.A JavaScript method won't work with JavaScript disabled (but CSS enabled) whereas a server side method will work, because the page is already received with the new class, rather than that class being dymaically added with JS.The CSS technique jlhaslip shows would require that you add a new CSS selector (delimited with a comma) for each new page. Doing that automatically again requires some sort of scripting, which in turns kills the purpose.I've also been able to insert the class with a client side XSLT, which however requres that you add an xml:base to each document, as well as create an entry in a site map file, thus making the "automatization" equivalent to the CSS approach.Inserting a class from the server is the best way. How would you do that depends on the actual way you generate the navigation to begin with.

Link to comment
Share on other sites

jlhaslip, The CSS menu is great for a small site I am working on. I manually insert the id into each body tag, which is no problem as the size of the site is not too big. Only one more question: How would you adjust the css, so that I can style the li item instead of the <a>? I would prefer to change bg for li item...boen_robot,Could you give me some more feedback on your quote "I've also been able to insert the class with a client side XSLT, which however requres that you add an xml:base to each document, as well as create an entry in a site map file, thus making the "automatization" equivalent to the CSS approach." XSLT is the stylesheet of XML, isn't it? What is xml:base? I work on a website where the nav items pass a parameter as id=id-nr to querystring to select appropriate product. I am still not too sure in how to "generate" sidebar. Currently trying my way through a given example to see if it fits my purposes. If worst comes to worst have to manually code it (hope it won't come to that...).Kurt

Link to comment
Share on other sites

The CSS menu is great for a small site I am working on. I manually insert the id into each body tag, which is no problem as the size of the site is not too big. Only one more question: How would you adjust the css, so that I can style the li item instead of the <a>? I would prefer to change bg for li item...
I would like to see your coding and css before I answer that.Please post it up here, thanks.Also, describe what you want the Menu to behave like.
Link to comment
Share on other sites

I would like to see your coding and css before I answer that.Please post it up here, thanks.Also, describe what you want the Menu to behave like.
Cheers...The link is http://www.jalp.co.uk/testing/linkState/index.htm. Instead of the bg of the link text I would like the complete li background (60px wide) to change...KurtAgain: if anyone needs colour choice advice...;-)
Link to comment
Share on other sites

Might need a consult on the colour selection for my next site... what do you charge???Add to the css for the a tags:

a { display: block; }

Can we see some Fuschia in your next sample? I always wondered what colour that was... :)

Link to comment
Share on other sites

Might need a consult on the colour selection for my next site... what do you charge???Add to the css for the a tags:
a { display: block; }

Can we see some Fuschia in your next sample? I always wondered what colour that was... :)

Cheers, that does the job! KurtIf you are interested: http://www.jalp.co.uk/testing/layout/colours.htm (incorporates some advanced styling and layout);-)
Link to comment
Share on other sites

:) is that Fuschia or Puce?
Do not even want to go so far to think it might be Puce... Wikipedia:"puce literally means "flea". It is speculated that it refers to the colour of a squashed flea or the colour of a flea full of blood. Another theory is that the colour name comes from the flea's droppings of digested blood, which spread out in deep red stain when water contacts them." :) Kurt
Link to comment
Share on other sites

a:link {color: #FFFFFF}a:visited {color: #FFFFFF}a:hover {color: #217ec0}a:active {color: #FFFFFF}There. You can change the color of the active link accordingly to what you see fit. Thats just an example of something I whipped up in a minute or two

Link to comment
Share on other sites

a:link {color: #FFFFFF}a:visited {color: #FFFFFF}a:hover {color: #217ec0}a:active {color: #FFFFFF}There. You can change the color of the active link accordingly to what you see fit. Thats just an example of something I whipped up in a minute or two
Thank you for your post. Unfortunately, this one will really only change the colour for the time you click. I was more after sth more permanent as such (but use the solution given before now, which is great!)...Kurt
Link to comment
Share on other sites

<style type="text/css"><!--a:link {	color: #000000;}a:visited {	color: #3300FF;}a:hover {	color: #009900;}a:active {	color: #CC0000;}--></style>

Post that code into your HEAD. You can change around the colors accordingly, I just whipped that up real quick. O and also I just realized this but if you want to try out your links before you put it on a webpage, I would do it on a white background. The general link color is black. Have no idea why I put that, must be too early in the morning. But yea..theres the code

Link to comment
Share on other sites

<style type="text/css"><!--a:link {	color: #000000;}a:visited {	color: #3300FF;}a:hover {	color: #009900;}a:active {	color: #CC0000;}--></style>

Post that code into your HEAD. You can change around the colors accordingly, I just whipped that up real quick. O and also I just realized this but if you want to try out your links before you put it on a webpage, I would do it on a white background. The general link color is black. Have no idea why I put that, must be too early in the morning. But yea..theres the code

Cheers, but this is not what I was after. Do not worry as I found a solution now in using the example from stu nichol's site (link given above). Works well for me (just a lot of lines to achieve the "keeping" the link colour as red as long as you are on a page).Kurt
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...