11 replies [Last post]
newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 47 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

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

AttachmentSize
sample.jpg35.2 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ben17
ben17's picture
Offline
Regular
Sunderland
Last seen: 9 years 45 weeks ago
Sunderland
Joined: 2009-11-23
Posts: 34
Points: 37

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

"I am always doing that which I cannot do, in order that I may learn how to do it."

Pablo Picasso (25 October 1881 – 8 April 1973)

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

I'm no expert, but I fake one on teh Internets

ben17
ben17's picture
Offline
Regular
Sunderland
Last seen: 9 years 45 weeks ago
Sunderland
Joined: 2009-11-23
Posts: 34
Points: 37

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

"I am always doing that which I cannot do, in order that I may learn how to do it."

Pablo Picasso (25 October 1881 – 8 April 1973)

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote: not a good idea to put

Quote:

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.

I'm no expert, but I fake one on teh Internets

ben17
ben17's picture
Offline
Regular
Sunderland
Last seen: 9 years 45 weeks ago
Sunderland
Joined: 2009-11-23
Posts: 34
Points: 37

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 Smile

Thanks

Ben

"I am always doing that which I cannot do, in order that I may learn how to do it."

Pablo Picasso (25 October 1881 – 8 April 1973)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Must be invisible

Must be invisible Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ben17
ben17's picture
Offline
Regular
Sunderland
Last seen: 9 years 45 weeks ago
Sunderland
Joined: 2009-11-23
Posts: 34
Points: 37

only 17 still learning so

only 17 still learning so anyone who tells me anything has words of wisdom Tongue

"I am always doing that which I cannot do, in order that I may learn how to do it."

Pablo Picasso (25 October 1881 – 8 April 1973)

newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 47 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

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!

ben17
ben17's picture
Offline
Regular
Sunderland
Last seen: 9 years 45 weeks ago
Sunderland
Joined: 2009-11-23
Posts: 34
Points: 37

sweet

sweet Smile

"I am always doing that which I cannot do, in order that I may learn how to do it."

Pablo Picasso (25 October 1881 – 8 April 1973)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

newdude wrote: got it working

newdude wrote:

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me