How to simply create this hover on nav?

[nickohorny]

Hi, I am just trying to create this hover image for my menu on the left.

Can someone help explain how I go about this?! Firstly, how do I know what pixel height and width it should be exacfly - where in the code does it tell me?

And then what do I need to do in order to make it work?

Here's what I'm after:
http://www.mypreciousgifts.co.uk/images/nav_hover.jpg

My code in the 'stylesheet_boxes.css' looks like this: so is it something in here I must edit?

/* ----------------------- BOXES ------------------------- */

.box {margin-bottom:20px;}
.box-head{ background:url(../images/title-bg.gif) no-repeat 4px 0; font-size:20px; line-height:24px; color:#303030; font-weight:bold; padding:2px 0 2px 39px; margin:0;}
.box-head a{ color:#303030; text-decoration:none;}
.box-head a:hover{ color:#2c1902;}
.box-body{ padding:17px 18px 18px 1px;}

.box ul{ padding:0 0 0 5px; margin:0;}
.box ul li{ font-size:14px; line-height:20px; padding: 5px 0 5px 23px; padding-left:23px;}
.box ul li a{ color:#696969;text-decoration:none;}
.box ul li a:hover{ color:#2c1902; text-decoration:none;}

.box ol{ padding:0; margin:0; list-style:decimal inside;}
.box ol li{ font-size:14px; line-height:29px;}
.box ol li a{ color:#696969;}
.box ol li a:hover{ color:#2c1902; background:url(../images/list-marker.gif) no-repeat 0 12px; text-decoration:none;}


.box .name{ display:inline-block; margin:5px 0 10px;}

/* ----------------------- LISTING BOXES ------------------------- */

THANKS EVERYONE!

[gjh42]

Add to your stylesheet_boxes.css


li.category-top:hover, li.category-top_un:hover {background: #abc url(../images/list-marker.gif) no-repeat;}

Replace list-marker.gif with the name of your bg image, saved in /includes/templates/your_template/images/.

The code won't tell you directly what size your image should be.
If you don't know how to find the pixel size to make your image, install the Firefox Web Developer extension. Its Information > Display Element Information button will give you the size of any element you click, along with lots of other info.

[nickohorny]

Add to your stylesheet_boxes.css


li.category-top:hover, li.category-top_un:hover {background: #abc url(../images/list-marker.gif) no-repeat;}

Replace list-marker.gif with the name of your bg image, saved in /includes/templates/your_template/images/.

The code won't tell you directly what size your image should be.
If you don't know how to find the pixel size to make your image, install the Firefox Web Developer extension. Its Information > Display Element Information button will give you the size of any element you click, along with lots of other info.

Hey, thanks so much! much appreciated :)

I just have a few more questions:

1) How do I make it so it becomes highlighted whilst hovering the image area and NOT the actual text for the catergory?

2) How do I change the text from being BOLD once clicked and in that catergory, to just a darker text colour, i.e black.
Once bold it pushes out the text and it drops down causing the hover image to not fill correctly height wise.

Thanks again

[gjh42]

Your <a> elements need to be block display so that they will take up the full width of the <li> container.

li.category-top a, li.category-top_un a {display: block;}

To change the styling of an element, find the class/id that belongs to it and edit that in the stylesheet... add it if not already there. You can find this info yourself if you have installed the Firefox Web Developer. You will find frequent use for this while building your site.

[nickohorny]

Your <a> elements need to be block display so that they will take up the full width of the <li> container.

li.category-top a, li.category-top_un a {display: block;}

To change the styling of an element, find the class/id that belongs to it and edit that in the stylesheet... add it if not already there. You can find this info yourself if you have installed the Firefox Web Developer. You will find frequent use for this while building your site.

Thanks again

I am now using that developer tool and managed to get rid of the bold on the nav, I am however, trying to figure out how I duplicate the nav hover on the other sideboxes? eg/ the information one below? I tried a search for the exact code on dreamweaver but no luck?

Sorry, coding NOOB!

[haredo]

Here is for the information Sidebox:

.box ul li:hover {
background: url("../images/nav_hover.gif") no-repeat scroll 0 0 #AABBCC;
}