Navigation CSS

[davy_yg]

style.css

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

#AboutNav a:hover{
	background: url(images/About/AboutNavHover.png);	
	width: 100px;
    text-decoration: none;
	color: black Arial, Helvetica, sans-serif;	
	font-size: 12px;
	}

page-about.php

<div id="AboutNav">			
		<h3>About</h3>
            <p style="border-bottom: 1px dotted #787878; width: 230px;"></p> 
				<a href="#">Vision & Mission</a>
                <a href="#">History</a>
                <a href="#">Client</a>
                <a href="#">People</a>
            </div>
                                   
             
</div>

Hi,

I wonder why not the whole image background: url(images/About/AboutNav.png);
being set as the background. Instead only highlight as long as the text. The width: 100px; code that I place show no effect.

[Yog1823]

use "display:block" for link as well as hover link also
(
but try to use list style
like

)

[davy_yg]

yea, but the image is different. I would like the whole image show up not only partial.

[Yog1823]

okays the u was write css like #AboutNav a:link and use their properties right?

so if u want to use image for adout nav's div so u have to write like this

#AboutNav

{background: url(images/About/AboutNav.png);
width: 100px;
text-decoration: none;
color: black Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 10px;
}

#AboutNav:hover{
background: url(images/About/AboutNavHover.png);
width: 100px;
text-decoration: none;
color: black Arial, Helvetica, sans-serif;
font-size: 12px;
}

[jimimartin52]

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the and elements makes perfect sense:

Example

• Home
• News
• Contact
• About

Try it yourself »
Now let's remove the bullets and the margins and padding from the list:

Example

ul
{
list-style-type:none;
margin:0;
padding:0;
}

---------------------------------------

Thanks
From jimimartin

web design florida,web development usa, ecommerce solution, affordable seo services, cheap web design, custom website design, best web solution
http://www.bestwebsol.com

[davy_yg]

Well, almost but not the whole image being displayed. How to display the whole image link as the background ?

[davy_yg]

page-about.php

<ul>                
                	<li><a href="https://localhost/wordpress/about/">Vision & Mission</a></li>
                	<li><a href="https://localhost/wordpress/about/">History</a></li>
                	<li><a href="https://localhost/wordpress/about/">Client</a></li>
                	<li><a href="https://localhost/wordpress/about/">People</a></li>
                </ul>

In addition to my above post, I would like to create navigation like this:

About

-------------

Vision & Mission

History

Client

People

- Chairman

- Partners

- Director

- Advisors

The following navigation:

- Chairman

- Partners

- Director

- Advisors

only appears if I press People and also have a bullet behind it. How to create such thing ?