Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    411
    Thanks
    119
    Thanked 0 Times in 0 Posts

    need specific bullet image in a DL

    i'm using a DL in my page that follows in order to give a heading and description for all the services this company offers: http://www.anthonymenshairsalon.com/new_index.html

    however i also want to insert a tiny scissor image to the left of each bullet point heading in the DL, just like the attached mockup. how do i go about that???

    thanks in advance!

    Code:
    dl.haircare {
    	font-style: italic;
    	color: #10007B;
    	list-style-image:  url(pics/scissor.gif);
    	line-height: 20px;
    	font-size: 16px;	
    }
    dt {
    	font-weight: bold;
    	padding-top: 20px;	
    }
    dd {
    }
    Attached Thumbnails Attached Thumbnails need specific bullet image in a DL-sample.jpg  
    Last edited by sixrfan; 11-23-2009 at 08:44 PM. Reason: forgot current css code

  • #2
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    List-Style-Image

    Hi,

    Look over this and see if it helps you achieve the customized DL bullets.

    http://webdesign.about.com/od/stylep...iststyleim.htm

    Thanks

    Kristin

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    411
    Thanks
    119
    Thanked 0 Times in 0 Posts
    thanks but that doesnt seem to really cover DLs. can someone please advise what to do with this specific situation? thanks!

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by sixrfan View Post
    however i also want to insert a tiny scissor image to the left of each bullet point heading in the DL, just like the attached mockup. how do i go about that???
    I'm assuming the code you've shown doesn't work or you wouldn't be here. My guess is that the bullet is not showing up because you forgot to set the dt elements display type via display: list-item.

    If you need finer control over your bullets' positioning, you may want to consider using a combination of background images and left padding. You still need to specify display: list-item if you want the bullets to appear on a copy and paste though.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    sixrfan (11-24-2009)

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Posts
    411
    Thanks
    119
    Thanked 0 Times in 0 Posts
    thanks. but in the end i was able to get it working without list-items

    Code:
    dt {
    	font-weight: bold;
    	padding-top: 20px;	
    }
    dt img {
    	margin-bottom: -10px;	
    	margin-right: 3px;
    }
    dd {
    	padding-left: 30px;	
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •