WAHM Forums
The WAHM community forum was created to be a place for work at home moms to share their ideas and stories. In the forum you can find information about work at home jobs, starting home businesses, avoiding scams, and surviving the WAHM lifestyle. In support of the WAHM community, WAHM.com also features instructional articles, easy recipes, as well as job and business listings tailored specifically to work at home opportunities.
View Full Version : Another ? HTML/CSS, image behind nav
mommytoamandone
10-24-2008, 04:09 PM
I'm working on redoing my site and want to have an image appear behind nav links on hover. I have it coming up but it won't show the entire image, only the part of image that fits directly behind the link. Have the width and height set but still no luck. Anyone know a reason for this? thanks! www.anizamarketing.com
Susie N
10-25-2008, 04:16 AM
Well, first, I don't know what the nav.jpg image should look like because I don't see it in the image list using the Fx developer's toolbar. So, I'm not sure how far to take this in the CSS. BUT, this should get you started:
Remove the image from a:hover and add it to the actual li's for the nav. So, something like this:
#nav li a{
width:120px;
height:65px;
margin:0 auto 0;
padding:10px;
display:inline;
}
#nav li a:hover {
background:url(nav.jpg) no-repeat;
}
You'll need to mess with the padding on #nav li a to get it just right.
What does Aniza mean? smileys/smiley1.gif
By the way, you should add a:visited and a:focus and a:active to all links to add accessibility to your sites. The order can be remembered like this: "Lord Vader's Former Handle Annikan".
a:link
a:visited
a:focus
a:hover
a:active
#nav li a { }
#nav li a:visited {}
#nav li a:focus, #nav li a:hover, #nav li a:active { }
Edited by: Susie N
Remove the image from a:hover and add it to the actual li's for the nav. So, something like this:
#nav li a{
width:120px;
height:65px;
margin:0 auto 0;
padding:10px;
display:inline;
}
#nav li a:hover {
background:url(nav.jpg) no-repeat;
}
You'll need to mess with the padding on #nav li a to get it just right.
What does Aniza mean? smileys/smiley1.gif
By the way, you should add a:visited and a:focus and a:active to all links to add accessibility to your sites. The order can be remembered like this: "Lord Vader's Former Handle Annikan".
a:link
a:visited
a:focus
a:hover
a:active
#nav li a { }
#nav li a:visited {}
#nav li a:focus, #nav li a:hover, #nav li a:active { }
Edited by: Susie N
mommytoamandone
10-25-2008, 05:26 AM
ah yea, i dont see it there either but do when I hover.
thanks susie! I will play around with this today! i was using my book to help walk me through and got it to where I can see it only part of the way.
aniza is a combo of my daughters' names. I was tired of the old name and couldn' t get it as a domain lol. plus we are moving, so it was a good time for a fresh start :0)
thansk again!
thanks susie! I will play around with this today! i was using my book to help walk me through and got it to where I can see it only part of the way.
aniza is a combo of my daughters' names. I was tired of the old name and couldn' t get it as a domain lol. plus we are moving, so it was a good time for a fresh start :0)
thansk again!
