SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Vancouver Canada
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry How do I remove link effects on single list item?

    To make my site load as fast as possible, I am using CSS to replace the navigation images. one list item contains the image, with the list background colors etc.

    I want to keep the border background color, but remove the link effects that all the other list items have. Also how do I do corner images (top left right, bottom left, right) on the navigation caps?

    Navigation CSS:
    Code:
    #navigation
    {
    	list-style-type: none;
    	list-style-position: inside;
    	text-align: center;
    	font-size: 12px;
    	margin: 0px;
    	padding: 0px;
    	float: left;
    	width: 130px;
    	color: black
    	background-color: white;
    }
    	ul#navigation li
    	{
    		padding: 3px;
    		margin: 0px;
    		background-color: #CCC;
    		border-color: #FFF #333 #333 #FFF;
    		border-width: 1px;
    		border-style: solid;
    	}
    	ul#navigation a:link, ul#navigation a:visited
    	{
    		padding: 3px;
    		margin: 0px;
    		display: box;
    		color: black;
    	}
    	ul#navigation li:hover, ul#navigation li:active	
    	{
    		padding: 3px;
    		margin: 0px;
    		background-color: #666;
    		border-color: #333 #FFF #FFF #333;
    		border-width: 1px;
    		border-style: solid;
    		display: box;
    		color: white;
    	}
    	ul#navigation a:hover, ul#navigation a:active	
    	{
    		padding: 3px;
    		margin: 0px;
    		display: box;
    		color: white;
    	}
    	#navigation_bottom	
    	{
    		
    	}
    and Navigation code
    Code:
    <ul id="navigation">
    	<li><img src="/images/navigation/apple.gif"></li>
    	<li><a href="#">Apple Commercials</a></li>
    	<li><a href="#">Apple Promo Videos</a></li>
    	<li><a href="#">Apple Keynotes</a></li>
    	<li><a href="#">Forums</a></li>
    	<li><a href="#">Newsletter</a></li>
    	<li><a href="#">Home</a></li>
    	<li id="navigation_bottom"><img src="/images/navigation/apple.gif"></li>
    </ul>
    Thanks all. was even going to make the apple in CSS using the Option+shift+K. Should I do that? Drool the entire site with no images hmmm tempting...
    Get busy living or get busy dying
    --Stephen King

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Vancouver Canada
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved it myself. I just put the images in a div tag vs. a list tag. problem solved (except for the round corner images don't know how to do that).
    Get busy living or get busy dying
    --Stephen King


Bookmarks

Posting Permissions

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