etopsirhc Posted June 29, 2011 Share Posted June 29, 2011 i'm trying to get my links to allow for it to change background color when its hovered over . but like all simple things , theirs probably a stupid error i keep missing in it ><here's where it may get confusing , when i click on it , the color changes like it should , even though active and hover are using the same css blockhtml for problem area <div id="C_nav"> <p>Chris's</p> <ul> <li><a href="Chris/home.php">main</a></li> <li><a href="Chris/home.php">main</a></li> <li><a href="Chris/home.php">main</a></li> <li><a href="Chris/home.php">main</a></li> <li><a href="Chris/home.php">main</a></li> <li><a href="Chris/home.php">main</a></li> </ul> </div> css for problem area #C_nav p{display:block;font-weight:bold;color:#FFFFFF;background-color:#3300FF;width:94%;text-align:center;margin-left:2%;margin-right:2%;border-top-color:#FFFFFF;border-top-style:solid;border-bottom-color:#FFFFFF;border-bottom-style:solid;padding:0%;text-decoration:underline,overline;}#C_nav ul{position:relative;left:+6%;list-style-type:none; /*removes the dots*/margin:0%; /*distance from left side*/padding:0%; /*area around the entire list*/}#C_nav li{padding:2%; /*area around each list item*/}#C_nav a:visited , #C_nav a:link{display:block;font-weight:bold;color:#FFFFFF;background-color:#6600FF;width:85%;text-align:center;padding:1%;text-decoration:none;}#C_nav a:active , #C_Nav a:hover{display:block;font-weight:bold;color:#FFFFFF;background-color:#FFFF00;width:85%;text-align:center;padding:1%;text-decoration:overline,underline;} if you want to check the site go for it , its http://cs110-project-kc.netne.net/[edit]>< the tags were in the wrong order XP stupid thing Link to comment Share on other sites More sharing options...
dsonesuk Posted June 29, 2011 Share Posted June 29, 2011 when i click on it , the color changes like it should , even though active and hover are using the same css blockNot sure, what you mean here?using the same url address in href of anchors will make all the links a visited state when clicked. Also visited does not work as is should in all browsers, and that is why a class is usually assigned the current page link instead to style it specifically as a visited state link. If fact FF is phasing out the use of changing a background image for visited links, as it can be used to identify which pages a user has visited, but the use of background color, and font color, border color will still supported.you are using a lot of duplicate styling, what you should do is assign default styling for link, and add only the styling that changes to the pseudo class styling.width:85% seems a tad wide for menu a, don't use +6%, use just 6% instead for padding, an make sure you use doctype! declaration http://www.w3schools.com/tags/tag_doctype.asp#C_nav a { display:block; font-weight:bold; color:#FFFFFF;width:85%; text-align:center; padding:1%; }#C_nav a:visited , #C_nav a:link, #C_nav a.visited{background-color:#6600FF;text-decoration:none;}#C_nav a:active , #C_Nav a:hover{background-color:#FFFF00;text-decoration:overline,underline;} <div id="C_nav"> <p>Chris's</p> <ul> <li><a href="Chris/home.php">main</a></li> <li><a href="Chris/page1.php">main</a></li> <li><a href="Chris/page2.php" class="active">main</a></li><!--current page link--> <li><a href="Chris/page3.php">main</a></li> <li><a href="Chris/page4.php">main</a></li> <li><a href="Chris/page5.php">main</a></li> </ul> </div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.