SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 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,112
    Mentioned
    448 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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 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,112
    Mentioned
    448 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 ...
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •