How can I stop a hover state from being applied to my active class link in my nav section? Is it even possible for that matter. Here's my url. www.invictisgraphics.com (and yes I know godaddy is adding crap to the page (visible as a top banner), just waiting to upgrade until I'm further along with the styling). Thanks for any help or resources.
Here is the html and css for those that chose not to go to the url I posted above. Any help on the matter is greatly appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link href="assets/invic_style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="bg"> <div id="masthead"> <div class="banner"> <a href="index.html"> <h1> <span>Invictis Graphics</span> </h1> </a> </div> </div> <!-- End of Masthead --> <div id="navigation"> <ul id="mainNav"> <li id="homeLink"> <a href="index.html" class="active"> Home </a> </li> <li id="servicesLink"> <a href="services.html"> Services </a> </li> <li id="portfolioLink"> <a href="portfolio.html"> Portfolio </a> </li> <li id="contactLink"> <a href="contact.html"> Contact </a> </li> </ul> </div> <!-- End Primary Navigation --> <div id="content" class="frontpage"> <div class="primary-content"> <!-- Insert Primary Content here --> </div> <div class="secondary-content"> <!-- Insert Secondary Content here --> </div> </div> <!-- End of Content --> </div> <div id="footer"> <!-- Footer content goes here --> </div> </div> </body> </html> Code (markup): @charset "UTF-8"; * { margin: 0px; padding: 0px; } html { background: #000000 url(images/invic_temp_sliver.jpg) repeat-x; position: relative; } body { background: url(images/invic_temp_bkg.jpg) no-repeat; height: 826px; width: auto; text-align: center; margin: 0px auto 0px; background-position: center top; } #wrapper { position: relative; margin: 0 auto; text-align: left; width: 1002px; } #clear { clear: both } /*-- Masthead (header) styles --*/ #masthead { margin-left: 32.5%; height: 208; width: 346; } #masthead .banner, #masthead .banner-home { float:left; padding-bottom: 12px; height: 208; width: 346; } #masthead .banner h1 { background-position:0px 0; height:208px; margin:0; width:346px; } #masthead h1 { background: url(images/invic_logo.png) no-repeat; display:block; height:208px; width:398px; } #masthead .banner h1 span, #masthead .banner-home h1 span { display: none; } /*-- Content Styles --*/ #content.frontpage { } #content { background: #808080; border: 1px solid #808080; clear: both; display: block; margin-bottom: 20px; min-height: 465px; padding: 20px; overflow: auto; } .primary-content { float: left; width: 640px; } .secondary-content { float:right; width:300px; } /*-- Navigation Styles --*/ #navigation { background: url(images/invic_nav_bkg.png) repeat-x scroll center top; clear: both; display: block; margin-top: 12px; min-height: 40px; } #navigation ul { margin: 0; padding: 0; list-style: none; } #navigation ul li { float: left; } #navigation ul a { padding: 0 .8em; font-size: 19px; font-family:Geneva, Arial, Helvetica, sans-serif; letter-spacing:.8px; line-height: 40px; text-decoration: none; color: #fff; float: left; display: block; } #navigation ul a.active { background: url(images/invic_active_nav_bkg.jpg) repeat-x scroll; } #navigation ul a:hover { background: url(images/invic_hover_nav_bkg.jpg) repeat-x scroll; } /*-- Footer Styles --*/ #footer { display:block; height:100px; } Code (markup):
The pseudo classes must be in the following order: :link :visited :focus :hover :active You have the :active before the :hover, so :hover overrules :active. From your problem description, though, I feel you misunderstand just what :active is. Simply put, :active refers to the state where the mouse button is down, or the [enter] key is pressed. cheers, gary
I can't believe it was as easy as switching their order. Thanks for the explanation too. I've been slowly learning CSS and HTML for about 2 years and still feel like a noob... At any rate, if you guys ever need any photoshop or illustrator info I'd be glad to oblige. Thanks again
Ok, so I've figured out that I have to have additional pages with different "active" classes set up for each page the way I had my code (which I believe is wrong for what I'm attempting to do). Basically, I'm trying to figure out how to set my link states with one template page (because I'm uploading to joomla eventually as just an index.php file). With that being said, I'm trying to show the link that has been selected with one constant state, and a hover state with the others (making sure to not effect the link that is selected for it's respective page). Is this possible with pseudo classes? And what am I doing wrong with my css?
After hours of research, I think the only way to do this is to set some sort of current class (which I named active in the beginning) for each page. I don't think there is a workaround for this, but I'd love to hear one if there is. Even the image based rollovers require this for a "down state". I think its crazy css utilizes visited, link, hover, and active but doesn't have some type of pseudo selector for current pages... If there are any joomla folks out there, what would you do in this situation? Possibly create different templates for each page I want to represent, or just try to code it straight in joomla? Thanks
The way you found is generally the way to do it, though there are two ways: one with lots of code, and one with less code : ) I use the current class method. This means I manually add in the current class on that particular page, and do not use body id's. Body id's seem to be the preferred way for those using templates, and the body id way is more CSS and HTML. To reduce CSS code, I write less of it. a { styles for all anchors. anything I don't list, does whatever the browser default is... if I don't list text-decoration, then all anchors will default to an underlined anchor; } a:visited { I only list this if I want something different on visited links, otherwise it is not mentioned and acts like all other links; } a:active { almost never use this, except to get IE6 to react correctly to focus (it thinks :active is :focus) I expect people to realise they are in the act of clicking something. } a:focus, a:hover { whatever is different from regular a's when focussed or hovered; } Code (markup): So if I have a current class manually added to each page's navigation, the only thing I change is the focus/hover line: a:focus, a:hover, a.current { whatever is different from regular a's when focussed or hovered now with current-page highlight; } That's not much. You need more if you use body id's: <body id="about"> (for the About page if there was one) ... <ul> <li><a class="home" href="#">Home</a></li> <li><a class="about" href="#">About</a></li> <li><a class="products" href="#">Products</a></li> </ul> css: a { styles; } a:focus, a:hover { focus/hover styles; } #home a.home, #about a.about, #products a.products { highlight style; } Code (markup): or a { styles; } a:focus, a:hover, #home a.home, #about a.about, #products a.products { highlight and hover/focus style; } Code (markup): Obviously the above code is for all anchors and you will want it only for your navigation so adjust accordingly. The reason for using the last method is, this lets you have an include of a menu, which is exactly the same on every page throughout your site. Most templates use reusable chunks of code. So the only change you make per page is adding the appropriate body id. You could also use a class on the body instead, or you can use a class on your main page container, whatever. So, if you're writing static pages, I think adding the current class is easiest, but if you're working with a templating system, you may find it much easier to write extra code just once and then use the body id method.
Thank you for such a detailed response. I'm going to do my best to digest everything you mentioned. I'm just still struggling to understand how this would work when I can't define my links with regular xhtml, and am limited to using a joomla module for designating pages jdoc:include type="modules" name="navbar" style="xhtml" /> Code (markup): . That module code replaces all of my ul in the navigation for the template to function correctly. Any thoughts?
Ew, I feel for you. That does indeed look like something that would work better with the body-id technique. That way your menu's HTML is exactly the same per page, when that module loads. You would need to edit the module that generates the HTML. The CSS, just find the CSS sheet that styles the menu and that's the place to add in your active-state CSS. Then either your header module or whatever loads the <body> tag needs to have a unique id like I showed above.
I think thats probably the best way to approach it too. I'm going to mess with it a little bit and see what I can come up with. I'll update any progress I make here when I get something.
Ok, upon further research I found out that in order for the "active" state to be applied in joomla, your css should look similar to this #navigation li.active a:link, #navigation li.active a:visited Code (markup): The #navigation just corresponds to the div you have your list in. seems to be working fine on my local server. I'll upload when I'm a bit further in designing everything. Thanks to all in this thread for the help.
If you are planning on using a CMS I would set up a test install and build straight on to it. It may be daunting but if you throw yourself in the deep end you will eventually begin to swim. Besides, its better to get used to the output of the CMS sooner rather than later so you wont have to go back and make edits to your stylesheet. If you're learning the CMS from new, 'View Source' is your friend. Click a page, then view source of that page, find the link you clicked and see how the CMS handled it. What class did it apply to that particular link now that you're on the homepage? In the long run, it is easier this way as the sample HTML you may be styling could be totally different to what you'll be working with when using the CMS. And about what Stomme poes said about :active, I have to say that if you style it nicely it can provide a little visual stimulant during the click/while the page loads. It's nicer to style it than not style it at all.