Tue, 2009-11-24 04:19
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 { }
| Attachment | Size |
|---|---|
| sample.jpg | 35.2 KB |
Tue, 2009-11-24 07:32
#1
Is a dl a bulleted list?
Is a dl a bulleted list? generally it doesn't have bullets, although one could attempt to force that using display:list-item.
The preferred method to achieving this would be to place your graphic as a background of the dt element while padding the text away to the right to clear a space.
Tue, 2009-11-24 09:11
#2
Hi The best thing i think you
Hi
The best thing i think you should do is make the list a "ul" make the list-style: none;, then make your little image a background on each list item. The code would be cleaner if you did that i think
Thanks
Ben
Tue, 2009-11-24 10:51
#3
DL
Hmm, looking at it, I'd say it can well be a definition list, if you consider it a list. Otherwise, it's a bunch of headers (h2, h3) followed by p text.
I'd put the background image on the dt, and give the dt left padding to make room for the background image.
This may require the dd's to also have equal left padding so they don't stick out further than the dt text.
Tue, 2009-11-24 10:57
#4
Hi I totally agree to be
Hi
I totally agree to be honest .. at first glance i didnt notice the definition so thats why i opted for the ul list .....
not a good idea to put padding-top on the dt i would change that to margin-top because when you come round to putting padding on the background image it brings all sorts of problems.
nice work stomme
Thanks
Ben
Tue, 2009-11-24 11:05
#5
Quote: not a good idea to put
not a good idea to put padding-top on the dt i would change that to margin-top because when you come round to putting padding on the background image it brings all sorts of problems.
I said padding-left, as you would do for background image bullets in a ul/li setup. So there's room for the scissors.
Margin-top, if the OP wants some top spacing, comes with its own issues, namely margin-collapse. Usually (not always) I'll use padding-top on the parent container instead... or margin-bottom on the previous element if that makes more sense in the context of the page.
Tue, 2009-11-24 11:07
#6
hi stomme a was'nt talking to
hi
stomme a was'nt talking to you about the padding-top i was talking to new dude. i think it would be relevent to change the padding top he has in his css to margin-top. stomme: totally agree with your words of wisdom 
Thanks
Ben
Tue, 2009-11-24 15:21
#7
Must be invisible
Must be invisible 
Tue, 2009-11-24 15:23
#8
only 17 still learning so
only 17 still learning so anyone who tells me anything has words of wisdom 
Tue, 2009-11-24 15:28
#9
got it working now. here's
got it working now. here's what i used:
dt { font-weight: bold; padding-top: 20px; } dt img { margin-bottom: -10px; margin-right: 3px; } dd { padding-left: 30px; }
thanks for the help!
Tue, 2009-11-24 15:30
#10
sweet
sweet
Tue, 2009-11-24 18:50
#11
newdude wrote: got it working
got it working now. here's what i used:
dt { font-weight: bold; padding-top: 20px; } dt img { margin-bottom: -10px; margin-right: 3px; } dd { padding-left: 30px; }
thanks for the help!
Why though have you used a inline image? not what we advised! elements such as this graphic are decoration and serve no purpose in the content and shouldn't be there, it should be, as we explained, a background of the dt element.