Member Avatar for 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><br /> 
				<a href="#">Vision & Mission</a><br />
                <a href="#">History</a><br />
                <a href="#">Client</a><br />
                <a href="#">People</a><br />
            <br></div><br />
                                   
             
</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.

  • 3 Contributors
  • 6 Replies
  • 109 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by davy_yg

Dani AI

Generated

Short answer: the width had no effect because anchors are inline by default. was on the right track — making the link a block-level element lets width/height apply. Also remove the presentational <br>s and use a structured list for each item (as suggested) so each link can be sized and styled reliably.

A minimal CSS pattern (adjust widths/heights to match your image) — note background-repeat:no-repeat and a fixed height or matching line-height so the full image area shows:

/* adjust selector to match your HTML (#AboutNav in your case) */
#AboutNav a {
  display: block;
  width: 230px;            /* match full image width */
  height: 48px;            /* match full image height */
  background-repeat: no-repeat;
  background-position: left center;
  line-height: 48px;       /* vertically center the link text */
  padding-left: 10px;
  text-decoration: none;
}

For the nested "People" submenu that should appear only when clicked (and without bullets), use a nested UL and hide it by default in CSS, then toggle it with JavaScript so the submenu appears on user action:

#AboutNav ul ul { display: none; list-style: none; margin: 0; padding-left: 12px; }
#AboutNav ul ul.open { display: block; }
// simple toggle for click — add a class "has-sub" to li that has a submenu
document.querySelectorAll('#AboutNav .has-sub > a').forEach(function(link){
  link.addEventListener('click', function(e){
    var submenu = link.nextElementSibling;
    if (submenu && submenu.tagName === 'UL') {
      e.preventDefault();
      submenu.classList.toggle('open');
      link.setAttribute('aria-expanded', submenu.classList.contains('open'));
    }
  });
});

Troubleshooting notes: confirm image paths and exact image dimensions (case-sensitive on many servers), check for other CSS overriding your rules (use dev tools to inspect computed styles), prefer :focus handling for keyboard users and update aria-expanded for accessibility. If you want hover and keyboard support too, also style a:focus and consider CSS sprites or background-position to switch states without extra files.

Member Avatar for Yog1823

use "display:block" for link as well as hover link also
(
but try to use list style
like
<ul>
<li><a href="#"></a></li>
</ul>

)

Member Avatar for davy_yg

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

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

Member Avatar for 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 <ul> and <li> elements makes perfect sense:

Example

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

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

Member Avatar for davy_yg

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

Member Avatar for davy_yg

page-about.php

<ul>                
                	<li><a href="https://localhost/wordpress/about/">Vision & Mission</a><br /></li>
                	<li><a href="https://localhost/wordpress/about/">History</a><br /></li>
                	<li><a href="https://localhost/wordpress/about/">Client</a><br /></li>
                	<li><a href="https://localhost/wordpress/about/">People</a><br /></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 ?

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.