SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List item dots change color ,items themselves don't

    Hi,

    Newbie question:

    I made a navigation area on the left like this:

    Code:
    <div id="navigation">
           <ul>
    		<li><a href="home.html">Home</a></li>
    		<li><a href="contact.html">Contact Us</a></li>
    	</ul>
    </div>
    I wanted the links and the dots to change color. So in CSS I did this:

    Code:
    #navigation a:link
    	{
    		color: #000099;
    	}
    	
    #navigation a:visited
    	{
    		color: #000099;
    	}
    
    #navigation a:hover
    	{
    		color: #0000FF;
    	}
    	
    #navigation a:active
    	{
    		color: #000099;
    	}
    
    #navigation ul li
    	{
    		list-style-type: circle;
    		line-height: normal;
    		color: #000099;
    	} 
    	
    #navigation ul li:hover
    	{
    		color: #0000FF;
    	}
    But, when I bring the cursor to the links I notice that the dots of the list items change color as soon as the mouse is on the same horizontal line as they. However, the link itself doesn't change color until I bring the cursor directly on the words like "Contact Us".

    How can I make the dots and the items themselves change color at the same time - i.e. only when I put the cursor on the words themselves?

    Thanx.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2007
    Location
    SW Washington, USA
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Newbie answer.

    I've been reading CSS books but not done much yet so I am not sure if this is correct.

    If you want the entire list item, that is the words and bullets, to be the link and effected by hover effects wouldn't you put the entire list item in the anchor?

    Code:
    <div id="navigation">
           <ul>
    		<a href="home.html"><li>Home</li></a>
    		<a href="contact.html"><li>Contact Us</li></a>
    	</ul>
    </div>

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Karin.

    I tried this solution and there are two problems:
    1. The result is the same - the <li> dot changes color when cursor is on the same line, but the text only changes color when I hover on the letters.

    2. This fails XHTML validation. You are not supposed to have anything immediately inside a <ul> element except for <li> elements.


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
  •