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 07: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?
    I build for: Firefox and tweak for IE

  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?
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  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).
    I build for: Firefox and tweak for IE

  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 12: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
    I build for: Firefox and tweak for IE

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    list-style-image doesn't apply to an anchor.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  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