CSS hover problems

quinnd6 · 23-06-2010 8:03pm #1

I'm practicing some css at the moment and am using hover to try and change the color of text when the mouse hovers over a link.
The problem is I want to change the color of the text to white but unfortunately its changing the color of the background to white instead.

Whoops nevermind I figured it out I was looking at the wrong CSS.

But my new problem is I'm trying to highlight the link for the page that I'm currently on.
This won't work for me.
The relevant css code I'm using is.

#menu ul {

padding: 0px;

list-style-type: none;
}



#menu ul li
{
    
	padding: 0px;
	display:block;
	float:left;
}
#menu ul li a
{
    padding: 0 10px;
	padding-bottom: 10px;
	text-decoration: none;
	color: black;
}
#menu ul li a:hover {
color:white;
}

body#home a#homenav,
body#3rdyrproj a#3rdyrprojnav
 {
	color: white;
	background: #003300;
}

The html code I'm using that is relevant is for example on the home page.

<body id ="home">
<div id="wrap">


<div id="header"> 
<h1><a href="#">DAVID QUINN WEBSITE</a></h1>
<h2>Home Page</h2>
</div>

<div id ="menu">
<ul>
<li> <a href="home.html" id="homenav">Home</a></li>
<li> <a href="3rdyrproj.html">3rd Year Project</a></li>

</ul>
</div>

I tried using firebug in firefox and the browser seems to be ignoring my last 2 css lines which are what changes the background color of the link of the page which the visitor is currently on.

Can anyone help?

Pixelcraft · 23-06-2010 11:29pm

You've a space between the 'id' + '=' for home & menu

Bob_Harris · 23-06-2010 11:36pm

You are trying to reference this link

<a href="3rdyrproj.html">3rd Year Project</a>

With these CSS selectors

body#3rdyrproj a#3rdyrprojnav

You need an ID on the above link.

quinnd6 · 24-06-2010 1:37am

Sorry that didn't really help unfortunately.
I know the id tag is required for whatever anchor link you want highlighted for a particular page.
I was just trying to get one page working at a time.

Anyway so far I can only get it working for one page the home page using this

body#home a#homenav
 {
	color: white;
	background: #003300;
}

If I have the css like before

body#home a#homenav, body#3rdyrproj a#3rdyrprojnav
{
       color: white;
       background: #003300;
}

It doesn't work at all, nothing happens.
I don't understand what the freaking heck I'm doing wrong.
I've been following some tutorials which tell you do it the way I'm doing it but it just doesn't work, for me it'll only work with one body and anchor id in the css and if I add more it doesn't work which is completely useless.

I've also tried it like this

[code]
body#home a#homenav
{
       color: white;
       background: #003300;
}
body#3rdyrproj a#3rdyrprojnav
{
       color: white;
       background: #003300;
}

That didn't work either.

I've also tried using classes for body and using "." for body in my css and that didn't help either.

fcrossen · 24-06-2010 8:53am

I'm trying to highlight the link for the page that I'm currently on.

What is generating the HTML code?

The usual methodology is to add a class or id to the 'A' element like this:

[HTML]<div id="menu">
<ul>
<li><a href="home.html" id="homenav" class="activelink">Home</a></li>
<li><a href="3rdyrproj.html">3rd Year Project</a></li>
</ul>
</div>[/HTML]

You can then style:

.activelink { color: white; background-color: black; }

However you do need to dynamically add the 'activelink' class at the server side using PHP, ASP, whatever.

quinnd6 · 25-06-2010 4:59am

It says here you can do it using html and css only.
I tried this method couldn't get it to work though.
http://www.apaddedcell.com/highlight-links-current-page-css

It would only work on one page so same as before.

fcrossen · 25-06-2010 9:20am

That doesn't really tell us much. Which solution from the tutorial are you employing?

Is the HTML static or dynamically generated?

If static:

Each HTML page will be slightly different (the class in the body element in solution 1 in the tutorial you linked)

If dynamic:

You just add the class using whatever server side programming language you are using.

I would avoid solution 3 - javascript is completely dependent on the browser.

Have you the code posted up somewhere?

quinnd6 · 25-06-2010 5:20pm

Oh sorry I meant solution#1.
I'm trying to do it using static html and css.
Yes I can post up the whole css and html now.

css code



*
{
	padding: 0;
	margin: 0;

}


body
{
    
    margin-top:5px;
	background: #003399;
	
}


#header
{
	 border: 1px solid;
	background: #99CCFF;
	text-align:center;
	
}
#header h1 a
{
    
		text-decoration:none;
		color: green;
		font-family:"Times New Roman", Times, serif;
	
}
#menu
{
    height:30px;
	background:green;
	padding-left:20px;
	
	border-bottom: 1px solid;
}

#menu ul {

padding: 0px;

list-style-type: none;
}



#menu ul li
{
    
	padding: 0px;
	display:block;
	float:left;
}
#menu ul li a
{
    padding: 0 10px;
	padding-bottom: 10px;
	text-decoration: none;
	color: black;
}
#menu ul li a:hover {
color:white;
}
#content
{
  background-color:yellow;

  padding: 10px 20px;
  width: 700px;
  margin-left:100px;
  
}

#content a
{
	text-decoration:none;
}


#wrap
{
width:900px; margin:0 auto;
background:grey;
}

#footer
{
  border: 1px solid;
 text-align:center;

 background:grey;

}

#footer a
{
  text-decoration:none;
}

body.home  a.home,body.3rdyrproj a.3rdyrproj
 {
	
	background:#003300;
    color:white;
}

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My Website</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL="StyleSheet" HREF="./CSS/Style3/style.css" TYPE="text/css" media="screen"/>

</head>
<body class="3rdyrproj">
<div id="wrap">
<div id = "top"> </div>

<div id="header">
<h1><a href="#">My Website</a></h1>
<h2>3rd Year Project Page</h2>
</div>

<div id ="menu">
<ul>
<li> <a href="home.html" class="home">Home</a> </li>
<li> <a href="3rdyrproj.html" class="3rdyrproj">3rd Year Project</a></li>
<li> <a href="4thyrproj.html" class="4thyrproj">4th Year Project</a></li>
<li> <a href="graphics.html" class="graphics">Graphics Project</a> </li>
<li> <a href="work.html" class="work">Work Experience</a></li>
<li> <a href="cv.html" class="myCv" >My CV</a></li>
<li> <a href="contact.html" class="contact">Contact Details</a></li>

 </ul>
</div>


<div id="content">


Here is my 3rd year Project.
Its called the Course Management System and was built using java swing.<br>
You can download it here.
<br><br>
<a href="3rd Year project Latest version.zip" >  3rd Year Project in zipped folder </a>
</div>

<div id="bottom"> </div>

<div id="footer">
&copy 2010
</div>

</div>
</body>
</html>

fcrossen · 26-06-2010 2:38pm

quinnd6 wrote: »

Oh sorry I meant solution#1.
I'm trying to do it using static html and css.
Yes I can post up the whole css and html now.

A quick glance tells me you might have your CSS selectors wrong or the mix of id's and classes is causing a problem... however the Ian Hicks reference from the linked tutorial looks like what you want.
My recommendation is to grab the code from http://www.hicksdesign.co.uk/else/cssnav/ (Ian's example) and use it as a starting point.
CSS selectors can be confusing at the outset, so start simple with stuff that works. Tweak, check in different browsers, rinse and repeat.
Do this often, if something breaks, revert to the last working solution and try again.

CSS hover problems

Comments