|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
Killer Web Design Tips, Secrets and Techniques.
Thread: Create link roll-over affects without images - a basic CSS 'menu'.
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 3
|
|
| Author |
|
admin
Advanced Member Joined: Jun 14, 2003 Post Count: 2940 Status: Offline |
CREATE LINK ROLL-OVER AFFECTS WITHOUT IMAGES - A BASIC CSS 'MENU'. - - Just add this code in between the <head> </head> tags in your HTML page: <style type="text/css"> <!-- :link { color: rgb(0, 0, 153) } /* for unvisited links */ :visited { color: rgb(153, 0, 153) } /* for visited links */ :hover { color: rgb(0, 96, 255) } /* when mouse is over link */ :active { color: rgb(255, 0, 102) } /* when link is clicked */ --> </style> The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One thing to pay attention to: is that it is important that the style declarations be in the right order, otherwise it may break things in some browsers: "link-visited-hover-active" A good way to remember the order is with the term: love-hate ---------------------------------------- Stefan Mischook Video Tutorial Store | Web Templates ---------------------------------------- [Edit 3 times, last edit by admin at Sep 29, 2005 2:32:04 AM] |
||
|
|
LSW
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6285 Status: Offline |
That is however only a Mouse Over. Those who use a keyboard to navagate for whatever reason will not have that rollover. To fix this copy your :hover style 2 more times. a:focus {paste in your style} will allow the rollover when the key goves the link focus in all standards compliant browsers. * html ??? a:active {paste styles} will trick IE into a :focus style rollover as up to IE6 :focus is not supported. ??? represents where a class r ID name of the parent element would be added dependig on the name you use. ie. - * html #menu a:active Rollovers are sometimes very important for the visually impaired to spot links, so the extra code for keyboard users should be used as well. |
||
|
|
admin
Advanced Member Joined: Jun 14, 2003 Post Count: 2940 Status: Offline |
@LSW, That was exactly what I was hoping for - people improving on and making comments on tips. ---------------------------------------- Stefan Mischook Video Tutorial Store | Web Templates |
||
|
|
|
|
Current timezone is GMT May 22, 2013 1:50:06 AM |
