www.webdeveloper.com
Results 1 to 9 of 9

Thread: CSS Link Lists

  1. #1
    Join Date
    Oct 2005
    Posts
    38

    CSS Link Lists

    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
    Last edited by WebJoel; 07-04-2008 at 08:36 AM.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Do you mean the "list-item bullet"?

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

  3. #3
    Join Date
    Oct 2005
    Posts
    38
    this is my navigation list:

    Code:
    <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:
    Code:
    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:
    Code:
    ul.navi {
    	padding:15px;
    	margin:0;
    	list-style-type:none;
    	list-style-image:url(images/list.png)
    }

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    list-style-image has to apply to the li, not the ul. Is that the problem?

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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).

  6. #6
    Join Date
    Oct 2005
    Posts
    38
    ok, so i replaced my css with the styles you recommended and this is what i got:
    Code:
    .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:
    Code:
    <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
    Last edited by tehashman; 07-04-2008 at 01:34 PM.

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    The code looks better. I'm tired, -I'll look at this again tomorrow, but see my attached screenshot and consider...
    Attached Images Attached Images

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    list-style-image doesn't apply to an anchor.

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    List style image is not real stable cross-browser anyway. Try the image as a background to the <a> :
    Code:
    .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;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles