SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove margin from every second li element

    Hi,

    Not sure if you can do this with CSS but I have an unordered list of images set out as a grid 2x4. I have a 9px left margin on each list item, but I would like to remove the margin from every second list item if this makes sense. I need to do this without adding to the HTML (adding classes etc,)
    Is this possible?

    eg code...
    HTML Code:
    <div id="gallery">         
             <ul id="portfolio">
    
                 		<li><a class="full_image" href="portfolio/fullpic1.png"><img src="site-images/pic1.png" alt=" " border="0" /></a></li>
    
    			<li><a class="full_image" href="portfolio/fullpic2.png"><img src="site-images/pic2.png" alt=" " border="0" /></a></li>
    
    			<li><a class="full_image" href="portfolio/fullpic1.png"><img src="site-images/pic1.png" alt=" " border="0" /></a></li>
    
    			<li><a class="full_image" href="portfolio/fullpic2.png"><img src="site-images/pic2.png" alt=" " border="0" /></a></li>
    
    			........etc
              </ul>
    </div>
    Code CSS:
     
    #gallery
    	{width:              500px;}
     
    #portfolio
    	{
    	border:	         	none;
    	float:	        		right;
    	margin-left:	        	20px;
    	margin-bottom:		150px;
    	}
     
    #portfolio	
    	{list-style-type:          none;
    	padding:		        0;}
     
    #portfolio li
    	{float:			left;
    	display:	        	block;
    	width:			200px;
    	height:			250px;
    	background-color:	#000000;
    	margin:			0 9px 15px;}
     
     
    #portfolio li img
    	{position:		        relative;
    	left:			        10px;		
    	top:			        15px;
    	width:			180px;
    	height:			200px;}
     
    #portfolio li:hover
    	{background-color:	#ebe9ed;}

    Thanks in advance.
    Liz

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I can't quite understand what you are trying to do there (the layout isn't clear from your description/code) but you can select every second item with CSS3. That won't help with all browsers, though, so you could use JavaScript instead.

    You perhaps could use CSS2 as well, in a more convoluted way, by using the adjacent sibling selector (+), but it's a bit messy, and I'm not sure quite what you are trying to achieve here. Do you want two list items per line?

  3. #3
    Non-Member
    Join Date
    Sep 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know that with CSS you can do li:first-child and li:last-child, but I don't know about the 2nd child... you would most likely have to use JavaScript to do this.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    With CSS3, you just use nth-child, like so:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style media="all">
    li:nth-child(2n) {color: red;}
    </style>
    </head>
    
    <body>
    <ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
    <li>seventh</li>	
    </ul>
    </body>
    
    </html>

  5. #5
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies.

    Ralph, the nth-child works fine in all my browsers bar IE (No surprise there). I may look for a Javascript solution at a later date, but it's only a small asthetic flaw so I am quite happy with this solution for the meantime.

    Thanks alot for the help.
    Liz.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Liz_uk View Post
    the nth-child works fine in all my browsers bar IE (No surprise there).
    Yes, o well. It does seem to be well supported other than that. And it is supported in IE9, which people should be starting to use more an more (though unfortunately it doesn't run on XP, which is ridiculous, but anyhow, it's MS after all ... )

  7. #7
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Liz_uk View Post
    Thanks for the replies.

    Ralph, the nth-child works fine in all my browsers bar IE (No surprise there). I may look for a Javascript solution at a later date, but it's only a small asthetic flaw so I am quite happy with this solution for the meantime.

    Thanks alot for the help.
    Liz.
    If you were so inclined you could use a bit of jQuery to overcome the lack of support by IE.
    Code JavaScript:
    $('li:nth-child(2n)').addClass('alt');

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You seem to have a 9px left and right margin on each item so why don't you just use a left margin on each and the space won't double.

    Code:
    #portfolio li {
    	float:			left;
    	display:	        	block;
    	width:			200px;
    	height:			250px;
    	background-color:	#000000;
    	/*margin:			0 9px 15px;*/
            margin:0 0 15px 9px;
    }
    (If you wanted the first item flush to the left then just drag the parent ul 9px to the left to start with.)

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Off Topic:

    Nice solution, Paul. You always seem to see the wood when all I can see is the trees.


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
  •