Member Avatar for davy_yg

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 ?

AboutNav2.png 4 KB ock_about_client.jpg 44.56 KB
  • 3 Contributors
  • 7 Replies
  • 276 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by stultuske
Member Avatar for stultuske

try by adding a

#AboutNav{

}

block in your css

Member Avatar for davy_yg

What do you mean ?

Member Avatar for 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.

Member Avatar for davy_yg

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

Member Avatar for 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

Edited by stultuske because: n/a
Member Avatar for stultuske

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

always nice to hear :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.