SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question css navigation and targeting items

    Hi Guys

    i have created a very simple text based css navigation which currently looks like this
    http://oi52.tinypic.com/faa5o6.jpg

    this is my css

    Code:
    #navigation {
    	clear:both;
    	font-size: 1.2em;
    	font-weight: bold;
    	color: #999999;
    	text-transform:uppercase;
    }
    
    #navigation ul {
    	padding-top: 12px;
    	width: 980px;
    	list-style: none;
    }
    
    #navigation ul li {
    	padding: 3px 23px 3px 22px;
    	border-right: 1px solid #999999;
    	float: left;
    }
    
    #navigation ul li.last {
    	border-right: none
    }
    
    
    #navigation a {
    	color: #999999;
    	text-decoration: none;
    }
    and this is my html

    HTML Code:
    <div id="navigation"><ul>
    <li><a href="#">Home</a></li>
    <li id="register"><a href="#">Red</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
    <li><a href="#">link7</a></li>
    <li><a href="#">link8</a></li>
    <li class="last"><a href="#">link9</a></li>
    </ul></div>
    i have already taregted the last item so that it does not have a right broder, this works but im not sure if the method used is the correct way to do it?

    also i would like to target the second list item "Red" so that the link colour is red, how would i do this in the correct manner?

    thanks

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Nothing wrong with using class="last" like that -- in theory you could use CSS3 selectors to target it, but that doesn't work in IE8/lower so we're still a ways off on that being real-world deployable.

    I'd be more concerned with the DIV around the UL for nothing. PERFECTLY good block-level container all on it's own; you aren't applying anything to the DIV you couldn't just declare on the UL.

  3. #3
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, thanks for that i did as you suggested and removed that div and applied the styling to the ul

    is this the correct method to target the second list item "red"

    #navigation .register a{
    color: #F00;
    }

    it seems to work just not sure if its the correct method to use?

  4. #4
    SitePoint Member
    Join Date
    Sep 2011
    Location
    china
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't like to use ID selector. i will add a class like .red to the second li's childnode a.
    And there is no need to define #navigation { color: #F00; }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you don't want to use class="last" then the trick I use is to set overflow:hidden on the ul , apply a left border instead and then just shift the list 1px to the left and the odd border is hidden.

    You have an id of register in the html but in your above code you have used a dot(.) instead of a hash(#).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #navigation {
    	clear:both;
    	font-size: 1.2em;
    	font-weight: bold;
    	color: #999999;
    	text-transform:uppercase;
    	padding-top: 12px;
    	width: 980px;
    	list-style: none;
    	overflow:hidden;
    	margin:0;
    	padding:0;
    }
    ul#navigation li {
    	padding: 3px 23px 3px 22px;
    	border-left: 1px solid #999999;
    	float: left;
    	margin-left:-1px;
    }
    #navigation a {
    	color: #999999;
    	text-decoration: none;
    }
    #register a{color: #F00;}
    </style>
    </head>
    
    <body>
    <ul id="navigation">
    		<li><a href="#">Home</a></li>
    		<li id="register"><a href="#">Red</a></li>
    		<li><a href="#">link3</a></li>
    		<li><a href="#">link4</a></li>
    		<li><a href="#">link5</a></li>
    		<li><a href="#">link6</a></li>
    		<li><a href="#">link7</a></li>
    		<li><a href="#">link8</a></li>
    		<li><a href="#">link9</a></li>
    </ul>
    </body>
    </html>
    Remember also to cancel out the default padding and margins on uls.


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
  •