Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorsoft_brick
- CommentTimeMay 21st 2008
Hi there,
I am trying to make a UL navigation list which includes a rollover (hover and click) image. It is a vertical list with an image to the left of the link. I can get the initial list image to show up, but I don't know how to make the rollover image work in a list. It is also tricky to position the text link so it falls in the middle/center of the image, but that is less of a concern.
Is is possible to make rollovers in a list? Am I on the right or wrong track here?
This is the page I am working on : http://www.katielovedesign.com/helenkaufman_htm/index.htm
And this is my CSS so far...
/* CSS Document */
body {
font-family: normal small Geneva, "Helvetica Neue", Arial, sans-serif #666666;
}
#header {
margin: 0px 0px 0px 330px;
padding-top: 50px;
}
#sub_head {
margin: 0px 0px 0px 310px;
}
li {
font: bold .9em Geneva, Tahooma, Arial, Helvetica, sans-serif;
color:#660066;
margin-left:0px;
padding: 0px;
list-style-image:url(images/purple_spiral.png);
line-height: 46px;
}
#index li a {
font: bold .9em Geneva, Tahooma, Arial, Helvetica, sans-serif;
color:#660066;
text-decoration: none;
}
#index li a:visited {
font: bold .9em Geneva, Tahooma, Arial, Helvetica, sans-serif;
color: #F5F5DE;
text-decoration: none;
list-style-image:url(images/white_spiral.png);
}
#index li a:hover {
font: bold .9em Geneva, Tahooma, Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
list-style-image:url(images/white_spiral.png);
}
#index_wrapper {
background-image: url(images/home.jpg);
background- repeat: no-repeat;
background-color: #FFF;
height: 620px;
width: 800px;
margin-top: 0px;
margin-left:auto;
margin-right:auto;
}
#index_listcontainer {
margin-top: 170px;
margin-left: 75px;
} -
- CommentAuthorzookimaster
- CommentTimeMay 21st 2008
To save time check out this example hosted on 1 of my sites. I haven't fully tested it but it should work with pngs too.
Click this link to see it in action feel free to copy straight from the html and css files,
http://www.rt-resume.com/img_rollovers/images.html
Link to the css file for the above image rollover demo -
http://www.rt-resume.com/img_rollovers/images.css
. . . and the image file is -
http://www.rt-resume.com/img_rollovers/peppers.gif
Hope this helps -
- CommentAuthorsoft_brick
- CommentTimeMay 21st 2008
I'm a little confused with the image part. How does the CSS tell the browser which color is the hover/visited color for the image? You are using one image for this?
Why do you use a background image instead of a list-style-image for the a:'s? -
-
CommentAuthorkari.patila
- CommentTimeMay 22nd 2008
The color change is done by moving the background image behind the a-element. The actual color of the image doesn't change. This technique is known as CSS sprites.
a:link: background: url("peppers.gif") top left no-repeat;
a:hover: background-position: 0 -69px;
a:active: background-position: 0 -138px;
This moves the background and thus reveals a different part of the background image. You can't set a background position for list-style-image. Furthermore, by using sprites you only have to load one image instead of three different ones. -
-
- CommentAuthorsoft_brick
- CommentTimeMay 22nd 2008
Wow- thanks so much!!! I've never heard of sprites before!
I think I am getting it. I had to include a line-height property to get it to work.Will that cause problems? In IE 5 it works fine, which is hopeful...
Although in Firefox 2.0, no images appear at all and just the first item in the list is pushed farther to the left than the other items.
Also, what properties do should I use to push the entire list down on the page a bit? Make a div id- list container, and add a top margin? -
-
CommentAuthorkari.patila
- CommentTimeMay 22nd 2008
The line-height property is needed, if you want to be able to align the text to the middle of the row, and thus should be used. I can't really say what's wrong with Firefox, since the example above worked fine on a Mac. It seems as the negative positioning is applied to the x-axis instead of the y. I'll look into that if you can't get it to work.
Depending on how you designed your page, you should be able to add a top or a bottom margin to some element to get the desired effect, but I'd really need to see some code before recommending a way to accomplish it. A DIV wrapper isn't the prettiest alternative, but it's not the worst one either. -
-
- CommentAuthorsoft_brick
- CommentTimeMay 25th 2008
I can't seem to figure this out- the images are just not showing up in Firefox. And the first link 'Sculpture' is pushed further to the left than the other list items, in Firefox and then sometimes in IE.?
I also added a div id/list container- to try and push the whole list down, but nothing I've tried gets the list to move. at all...
Here's the page:
http://www.katielovedesign.com/helenkaufman_htm/index.htm
And the CSS:
http://www.katielovedesign.com/helenkaufman_htm/styles.css
Any help or guidance is very welcome! -
-
CommentAuthorkari.patila
- CommentTimeMay 25th 2008
You have a couple of extra spaces at # index _listcontainer, among other places. Also, try removing the :link part from#index li a:link {
display:block;
width:250px;
padding: 0px 0px 0px 45px;
color:#660066;
background-image:url(images/spirals.png) top left no-repeat;
text-decoration: none;
line-height: 45px;
} -
-
-
CommentAuthorkari.patila
- CommentTimeMay 25th 2008
Oh, it seems that if you change the background-image property to just plain background, it works:
background:url(images/spirals.png) top left no-repeat; -
-
- CommentAuthorsoft_brick
- CommentTimeMay 26th 2008
Thank you so very much for your help-
it's working fine now!!! -
-
CommentAuthorkari.patila
- CommentTimeMay 26th 2008
Glad to hear. Now it also works on Safari. -
1 to 11 of 11