Jump to content

[self solved]id + a:hover = failure?


etopsirhc

Recommended Posts

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

when i click on it , the color changes like it should , even though active and hover are using the same css block
Not 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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...