0

page-about.php

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

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 ?

Attachments AboutNav2.png 4 KB ock_about_client.jpg 44.56 KB
3
Contributors
7
Replies
8
Views
5 Years
Discussion Span
Last Post by stultuske
0

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.

0

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

0

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

Edited by stultuske: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.