CSS Link Lists

[tehashman]

Hey guys.

I have a list of links that has a custom image at the beginning of the list item.

What I want to happen is the image only appear on hover. So in effect it becomes a 'rollover'.

and also I want the 'active page highlighting' effect using the same image.

any tips?

Thanks
T.A.M

[WebJoel]

Do you mean the "list-item bullet"?

If so, this can be done easily. Do you have any code show?

[tehashman]

this is my navigation list:

<ul class="navi">
        <li><a href="../index.php" class="nav">Home</a></li>
        <li><a href="../gallery.php" class="nav">Albums</a>
        <!-- TemplateBeginEditable name="albumlist" --><!-- TemplateEndEditable --></li>
        <li><a href="../about.php" class="nav">About</a></li>
        <li><a href="../contact.php" class="nav">Contact</a></li>
      </ul>

this is my link style:

a.nav:link {
	text-decoration:none;
	color:#FFFFFF;
}

a.nav:visited {
	text-decoration:none;
	color:#FFFFFF;
}

a.nav:active {
	text-decoration:none;
	color:#666666;
}

a.nav:hover {
	color:#666666;
	text-decoration:underline;
}

and this is my list styling:

ul.navi {
	padding:15px;
	margin:0;
	list-style-type:none;
	list-style-image:url(images/list.png)
}

[ray326]

list-style-image has to apply to the li, not the ul. Is that the problem?

[WebJoel]

a.nav:link {
text-decoration:none;
color:#FFFFFF;
}

a.nav:visited {
text-decoration:none;
color:#FFFFFF;
}

a.nav:active {
text-decoration:none;
color:#666666;
}

a.nav:hover {
color:#666666;
text-decoration:underline;
}

does not seem to address the posted HTML at all. What here is class="nav"?

More likely you want:

.navi {}
.navi li {}
.navi li a:link {}
.navi li a:visited {}
.navi li a:hover, .navi li a:focus {}
.navi li a:active {}

and this will target the UL class="navi" and get the pseudo-states working.

(.navi {} is the same thing as ul.navi {} here, and the latter is more explicit and probably preferred, lest you later use the class="navi" again on some element OTHER than the "UL". I just left that off for brevity).

[tehashman]

ok, so i replaced my css with the styles you recommended and this is what i got:

.navi {
	padding:15px;
	margin:0;
}
.navi li {
	list-style-type:none;
}
.navi li a:link {
	color:#FFFFFF;
	text-decoration:none;
}
.navi li a:visited {
	color:#FFFFFF;
	text-decoration:none;
}
.navi li a:hover, .navi li a:focus {
	color:#999999;
	list-style-image:url(images/list.png);
	text-decoration:underline;
}
.navi li a:active {
	color:#FFFFFF;
	text-decoration:none;
}

i reverted my html to this:

<ul class="navi">
        <li><a href="../index.php">Home</a></li>
        <li><a href="../gallery.php">Albums</a>
        <!-- TemplateBeginEditable name="albumlist" --><!-- TemplateEndEditable --></li>
        <li><a href="../about.php">About</a></li>
        <li><a href="../contact.php">Contact</a></li>
      </ul>

is this how you said it should be?

the rollover is not working. should it be using what i have come up with?

Thanks for the help.

this is the URL of the site: http://ls12style.co.uk/projects/Wonstar/index.php

[WebJoel]

The code looks better. I'm tired, -I'll look at this again tomorrow, but see my attached screenshot and consider...

[ray326]

list-style-image doesn't apply to an anchor.

[Centauri]

List style image is not real stable cross-browser anyway. Try the image as a background to the <a> :

.navi li a:link {
	color:#FFFFFF;
	text-decoration:none;
}
.navi li a {
	color:#FFFFFF;
	text-decoration:none;
	padding-left: 15px;
}
.navi li a:hover, .navi li a:focus {
	color:#999999;
	background: url(images/list.png) no-repeat left center;
	text-decoration:underline;
}