...

View Full Version : need specific bullet image in a DL



sixrfan
11-23-2009, 08:43 PM
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!



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 {
}

kristingish
11-23-2009, 10:58 PM
Hi,

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

http://webdesign.about.com/od/styleproperties/p/blspliststyleim.htm

Thanks

Kristin

sixrfan
11-24-2009, 04:30 AM
thanks but that doesnt seem to really cover DLs. can someone please advise what to do with this specific situation? thanks!

Arbitrator
11-24-2009, 06:15 AM
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.

sixrfan
11-24-2009, 04:30 PM
thanks. but in the end i was able to get it working without list-items



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum