SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    78
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    List bullet images with border under text only

    Hey guys,

    Can anyone help me out here, I've got a pretty standard unordered list with some icons I want as the bullet points.
    I've added the bullet images through the css, but I also want to have a dotted line under the **text** of each of the list items.

    The problem is I can either have the bullet images without the border, or have the border underlining both the bullet image and the text which does not look right.

    Is there a way to get the border under the text only?

    I was thinking something like this:
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </ul>

    <style>
    ul {
    list-style: none;
    }

    ul li {
    padding:10px;
    background: url(sprites.png) no-repeat -30px 0;
    border-bottom:1px dotted black;
    }
    </style>

    Many thanks,

    Jonno

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    There are prolly all sorts of fancy ways to do this, but here's a simple solution that you might consider:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>List experiment</title>
    	
    <style media="all">
    ul {
    	list-style: none;
    }
    
    ul li {
    	padding-left:20px;
    	background: url(sprites.png) no-repeat 0 50%;
    }
    
    li span {
    	border-bottom:1px dotted black; 
    	display: block; 
    	padding: 10px 10px 10px 0;}
    </style>
    	
    </head>
    
    <body>
    
    <ul>
    	<li><span>item 1</span></li>
    	<li><span>item 2</span></li>
    	<li><span>item 3</span></li>
    </ul>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    78
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ahh nice one! I'll give it a go!

    thanks,

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Ley us know if it suits you to add in those spans. As I say, I'm sure there are cleverer ways to do this. You could ditch the <span> and add in the bullets with either :before or :after on the <li>s, but meh, then you get issues with older browsers and all that ...


Tags for this Thread

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
  •