PDA

View Full Version : Line up dot points in UL list


richcodesign
01-26-2010, 08:47 AM
Ant idea how can i have my text line up with the centre of my tick in the UL list shown?

as you can see it is sitting at the base of the tick and does not look very good

gentleone
01-26-2010, 09:01 AM
Can you provide us the HTML & CSS from your list? There are several ways to solve this, but then I need to see how you styled the list so far.

richcodesign
01-26-2010, 09:29 AM
This is the page link.

Hope it helps.

http://www.dinogrip.co.uk/flat_sheets.html

thanks

Ricky55
01-26-2010, 11:22 AM
Not got time to look at your code just now but I find these types of bullets easier to do as background images on the li rather than replacing the bullets if thats what you've done list-style-type:

Ricky55
01-26-2010, 11:23 AM
Sorry I posted before completing,

so if you've used list-style-type: your image

I would just use background: your image on the li element its easier to control the alignment then with padding.

Ricky55
01-26-2010, 11:25 AM
Call your list something meaning full too not dotPoints call it something like slipGripFacts

Ricky55
01-26-2010, 11:30 AM
Looking at your code, couldn;t resist you have used

.dotPoints ul {
list-style-image:url(../images/tick.jpg);
}

try

.dotPoints li {
background: url(../images/tick.jpg) left center no-repeat;
padding-left: 17px;
}

Ricky55
01-26-2010, 11:34 AM
and also

.dotPoints ul {
list-style-type: none;
}

richcodesign
01-26-2010, 01:12 PM
Thanks for you help with that. Thanks you for your time again in advanced.

I have changed the title of .dotpoints too as you suggested.

I have made your suggested changes and the text does now line up - very happy with that.

I do however want the red ticks to line up to the left side if the div it is sitting in. I adjusted the left padding and this just made the text overlap the tick images.
Is there a better way of doing this than introducing -25px to the margin of UL????

gentleone
01-26-2010, 01:51 PM
Is there a better way of doing this than introducing -25px to the margin of UL????

I know what you feel! Negative margins doesn't feel right, but they're not deprecated by W3C and quite often a negative margin is a simple solution to solve an alignment.
You could also solve this by giving all the other tags within that div a positive margin (in combination with positive paddings), so that they lined-up with the text of your list, but you have to do probably a lot of tags while the one negative margin to the <ul> solves the issue as well.

So I don't think you should be too bothered by it, because even the top-notch web developers use negative margins on a regular basis.

richcodesign
01-26-2010, 04:29 PM
wow thanks so much for your feed back.

Im glad that what im doing is okay and even pros use negative margins!

Thanks again for taking the time to help me out!
i have learnt so much from this site!

domedia
01-26-2010, 04:39 PM
Shouldn't just using background-position take care of moving the background 'ticks', or am I missing something here?

gentleone
01-26-2010, 06:56 PM
Shouldn't just using background-position take care of moving the background 'ticks', or am I missing something here?

Yes, you're right! You have then also a negative value, but I think it does look/feel better :) so dis the negative margin on the <ul>.
This is what you have now:
background: url(../images/tick.jpg) left center no-repeat;
So where you have positioned the tick.jpg with 'left' (default for this is 0px), you could give it for example a negative value of -10px, so that it moves 10px more to the left.
background: url(../images/tick.jpg) -10px center no-repeat;
You probably have to adjust the padding-left: 17px; or perhaps you can skip this property, so that your list text aligns well again with the rest of your text.

Ricky55
01-26-2010, 07:53 PM
have got the result you want now mate or do you still need help?

richcodesign
01-27-2010, 07:03 AM
have got the result you want now mate or do you still need help?

Thanks again for all the feed back.

Setting the tick as a background image on the LI does not make the tick line up along the edge of the div.
I also set a -10 as suggested however that made half the tick disappear.

I also set the background on the UL (INCASE THIS IS WHAT YOU ALL MENT) But although that lined up the ticks to the edge of the div, it just stacked up loads of ticks not inline with the text, as you probably all know it would.

Thanks again for your time in advanced:-D

domedia
01-27-2010, 02:03 PM
Setting the tick as a background image on the LI does not make the tick line up along the edge of the div.

It does not do so initially, but that's what we have CSS for.

richcodesign
01-28-2010, 06:56 AM
The only way i can have it line up is to set a -10 to the left margin on UL