CSS Navigation

[davy_yg]

page-about.php

<div id="AboutNav">					
		<h3>About</h3>
            <p style="border-bottom: 1px dotted #787878; width: 200px;"></p> 
				                
                	<a href="https://localhost/wordpress/about/about-vision.php">Vision & Mission</a>
                	<a href="https://localhost/wordpress/about/about-history.php">History</a>
                	<a href="https://localhost/wordpress/about/about-client.php">Client</a>
                    <a href="https://localhost/wordpress/about/about-people.php">People</a>
                </ul>    
            
</div>

style.css

#AboutNav h3 {
	margin: 20px 0 0 0;
	}
	
#AboutNav a:link{
	background: url('images/About/AboutNav2.png') 0 0;	
	width: 100px;
    text-decoration: none;
	color: black; Arial, Helvetica, sans-serif;	
	font-size: 12px;
	padding: 10px;
	display: block;
	}	

#AboutNav a:visited{
	background: url('images/About/AboutNav2.png') 0 20px;	
	width: 100px;
    text-decoration: none;
	color: red; Arial, Helvetica, sans-serif;	
	font-size: 12px;
	display: block;
	}		

#AboutNav a:hover{
	background: url('images/About/AboutNav2.png') 40 40px;	
	width: 100px;
    text-decoration: none;
	color: red; Arial, Helvetica, sans-serif;	
	font-size: 12px;
	padding: 10px;	
	display: block;
	}

The navigation appears like this: http://www.masterlink.co.id/page-about.php

Where it suppose to be like the attachment.

Can anyone help me identify why and offer me a solution ?

[stultuske]

try by adding a

#AboutNav{

}

block in your css

[davy_yg]

What do you mean ?

[stultuske]

I mean this:

#AboutNav a:hover{
	background: url('images/About/AboutNav2.png') 40 40px;	
	width: 100px;
    text-decoration: none;
	color: red; Arial, Helvetica, sans-serif;	
	font-size: 12px;
	padding: 10px;	
	display: block;
	}

will be valid for every a tag you're hovering on, not for the background or container you've stored your menu in, create a separate style for that.

[davy_yg]

What's the difference between that and the code that wrote on line 25 - 33 ?

[stultuske]

that ís the code you wrote.
I just explained underneath why it doesn't work.

if you want (for instance) your entire AboutNav to have a grey background, you'll need to add something like this:

#AboutNav{
  background-color: grey;
}

because:

#AboutNav p{
  background-color: grey;
}

would NOT set the background color for the entire aboutnav, but only for the p elements that are within your div with id aboutnav.

if you want to test your css 'on-the-fly' you may be interested in this thread (especially in the link provided by the OP). http://www.daniweb.com/business-exchange/show-off-your-projects/threads/402989

[samgreensted]

Just learning HTML syntax and found this post very helpful.
Thanks a lot.
Sam
http://www.zeuscreative.co.uk/corporate-web-development-company

[stultuske]

Just learning HTML syntax and found this post very helpful. Thanks a lot. Sam

always nice to hear :)