kurt.santo Posted November 2, 2007 Share Posted November 2, 2007 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 More sharing options...
Reg Edit Posted November 2, 2007 Share Posted November 2, 2007 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 More sharing options...
jlhaslip Posted November 3, 2007 Share Posted November 3, 2007 or server side scripting will do it also Link to comment Share on other sites More sharing options...
kurt.santo Posted November 3, 2007 Author Share Posted November 3, 2007 or server side scripting will do it alsoSo, the way to do it is either JavaScript or Servier Side Scripting... Let's take JavaScript first, how would I accomplish this or what would be the phrase to Google? Actually, the same question for server side scripting...Kurt Link to comment Share on other sites More sharing options...
jlhaslip Posted November 3, 2007 Share Posted November 3, 2007 or CSS, toohttp://www.456bereastreet.com/archive/2005...state_with_css/ Link to comment Share on other sites More sharing options...
Reg Edit Posted November 3, 2007 Share Posted November 3, 2007 [...] what would be the phrase to Google?[...]javascript navigationcss navigationphp navigationasp navigation Link to comment Share on other sites More sharing options...
kurt.santo Posted November 4, 2007 Author Share Posted November 4, 2007 javascript navigationcss navigationphp navigationasp navigationCheers, will have a go... Link to comment Share on other sites More sharing options...
boen_robot Posted November 4, 2007 Share Posted November 4, 2007 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 More sharing options...
kurt.santo Posted November 5, 2007 Author Share Posted November 5, 2007 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 More sharing options...
jlhaslip Posted November 5, 2007 Share Posted November 5, 2007 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 More sharing options...
kurt.santo Posted November 6, 2007 Author Share Posted November 6, 2007 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 More sharing options...
jlhaslip Posted November 6, 2007 Share Posted November 6, 2007 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 More sharing options...
kurt.santo Posted November 7, 2007 Author Share Posted November 7, 2007 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 More sharing options...
Reg Edit Posted November 7, 2007 Share Posted November 7, 2007 [...] If you are interested: http://www.jalp.co.uk/testing/layout/colours.htm (incorporates some advanced styling and layout);-)I'm interested--is it £1000 each, or for all 6? Link to comment Share on other sites More sharing options...
kurt.santo Posted November 8, 2007 Author Share Posted November 8, 2007 I'm interested--is it £1000 each, or for all 6? Have a think... Kurt Link to comment Share on other sites More sharing options...
jlhaslip Posted November 8, 2007 Share Posted November 8, 2007 is that Fuschia or Puce? Link to comment Share on other sites More sharing options...
kurt.santo Posted November 8, 2007 Author Share Posted November 8, 2007 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 More sharing options...
SpOrTsDuDe.Reese Posted November 9, 2007 Share Posted November 9, 2007 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 More sharing options...
kurt.santo Posted November 9, 2007 Author Share Posted November 9, 2007 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 twoThank 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 More sharing options...
SpOrTsDuDe.Reese Posted November 9, 2007 Share Posted November 9, 2007 If you want I can get the entire links code put up here. For active links, after click links, and before click links. You want that code posted? Link to comment Share on other sites More sharing options...
SpOrTsDuDe.Reese Posted November 9, 2007 Share Posted November 9, 2007 If you want I can get the entire links code put up here. For active links, after click links, and before click links. You want that code posted? Link to comment Share on other sites More sharing options...
SpOrTsDuDe.Reese Posted November 9, 2007 Share Posted November 9, 2007 If you want I can get the entire links code put up here. For active links, after click links, and before click links. You want that code posted? Link to comment Share on other sites More sharing options...
kurt.santo Posted November 9, 2007 Author Share Posted November 9, 2007 If you want I can get the entire links code put up here. For active links, after click links, and before click links. You want that code posted?Yes, would be great. Thanks!Kurt Link to comment Share on other sites More sharing options...
SpOrTsDuDe.Reese Posted November 11, 2007 Share Posted November 11, 2007 <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 More sharing options...
kurt.santo Posted November 11, 2007 Author Share Posted November 11, 2007 <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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.