left align lists
|
|
Thread rating:  |
Andrew Poulos - 02 Dec 2008 00:57 GMT Is it possible to have ordered and unordered lists aligned to the left edge of the containing block? So instead of this:
Some sample text
• line 1 • line 1
1. line 1 2. line 2
you get this:
Some sample text
• line 1 • line 1
1. line 1 2. line 2
I tried this CSS
ol, ul { margin-left: 0; padding-left: 0; } ol li { margin-left: 1.55em; } ul li { margin-left: 1em; }
but the bullets and numbering get hidden if the font size is decreased from 100%.
Andrew Poulos
Jeff - 02 Dec 2008 01:47 GMT > Is it possible to have ordered and unordered lists aligned to the left > edge of the containing block? ul{ list-style-position: inside;
?
Jeff
So instead of this:
> Some sample text > [quoted text clipped - 31 lines] > > Andrew Poulos Andrew Poulos - 02 Dec 2008 02:06 GMT >> Is it possible to have ordered and unordered lists aligned to the left >> edge of the containing block? > > ul{ > list-style-position: inside; Thanks but that doesn't left align the list to its containing block and now the list item content wraps underneath the bullet.
Andrew Poulos
dorayme - 02 Dec 2008 02:01 GMT In article <493488b7$0$18646$5a62ac22@per-qv1-newsreader-01.iinet.net.au>,
> Is it possible to have ordered and unordered lists aligned to the left > edge of the containing block? So instead of this: [quoted text clipped - 32 lines] > but the bullets and numbering get hidden if the font size is decreased > from 100%. Different browsers do different things. Perhaps a differential as robust as you can get is:
ul {margin-bottom: 1em;} ul {margin-left: 0; padding-left: 2em;} ol {margin-left: 0; padding-left: 2.5em;} div {background: #ffc;}
<div> <ul> <li>item</li> <li>item</li> </ul>
<ol> <li>item</li> <li>item</li> </ol> </div>
But all is not lost. Lists can be represented in tables. Ordered lists are in fact semantically equivalent to a two col table. Be careful before believing anyone who tells you different.
But, yes, the unordered list as a table is a small cheat. You can have a bullet image in the left col. Even I have not been able to make the unordered list into a tabular affair! But I am working on it. Perhaps it can be represented as a limiting case of a table, the left column meaning "here is a point.... here is another point..."
 Signature dorayme
Patricia Aldoraz - 03 Dec 2008 10:20 GMT > Even I have not been able to make the > unordered list into a tabular affair! But I am working on it. Perhaps it > can be represented as a limiting case of a table, the left column > meaning "here is a point.... here is another point..." Be sure to tell when you succeed! How can an unordered list really be a table, with or without bullets?
dorayme - 04 Dec 2008 01:05 GMT In article <14af94c9-2314-4aa8-9e33-1bc04dbfb800@q26g2000prq.googlegroups.com>,
> > Even I have not been able to make the > > unordered list into a tabular affair! But I am working on it. Perhaps it [quoted text clipped - 3 lines] > Be sure to tell when you succeed! How can an unordered list really be > a table, with or without bullets? If you want to use some element other than a UL and yet not cross any semantic electric fences, there is nothing wrong in using a table, a table being a clever way to organise lists. You can put in bullets as images in the same cell as the item, as a background image if greater purity is wanted. However, for most purposes, it is overkill. The more specific UL should mostly do.
What might exercise the mind of those with time on their hands is how to justify the use of bullets in one col of a two col table and list items in the other and say it is a tabular affair (as I am confident is the case with an ordered list, the order being in one col and the items in another, row by row corresponding).
The only chance a bulleted list has of entering the kingdom of semantic correctness in a two col table with an img of a bullet in the first col is if it can be argued to have some meaning of its own, some data-ness about it. I will now attempt this magic trick. Let us turn turn the lights down a little now... and ... quiet please... ladies and gentlemen:
A bullet, in an unordered list, draws attention to the list item to its right. In a way then, it announces the item. It draws attention to the item in a stronger manner than the item merely being bold. There is a smidgeon of meaning here, there is a trace of discursiveness. "Here is the item", says the bullet. "To my right". All the items have bullets, the bullet at the top does not say this about the third list item down. Each bullet is quite unique in in its reference. It refers. It has a bit of specific meaning.
So yes, one can now, with good conscience, render an unordered list in a two col table. Hallelujah! The lights can now be turned up bright.
Why you would want to use a table is a good question. There may be some reason that it is hard to get the effect you want with a UL. You may want to draw attention in a particular way that even using a custom disc image does not quite do (because of technical difficulties).
A man who wants to woo a woman and takes flowers around can go on foot or a bicycle. But if he wants to make an impact, he might have better luck with a table top truck. This way, when he knocks on the door and she opens it, at that very moment, a brass band that is set up on the table top of the truck parked right outside, starts up. He will not fail to impress with this.
The special "bullet" column is like the table top of the truck (Harlan, get that list out of people who do not understand analogies and be prepared to write their names down).
(just btw, in Big Fish, an absolutely delightful film, with Ewan McGregor and Albert Finney, Ewan does something a bit like described above but by having a whole sea of daffodils placed on the college lawn of the object of his desire. When she appears at the window and sees them, he has all but won her heart (he found out secretly that she loved daffodils))
 Signature dorayme
dhtml - 15 Dec 2008 00:03 GMT > In article > <14af94c9-2314-4aa8-9e33-1bc04dbfb800@q26g2000prq.googlegroups.com>, lement other than a UL and yet not cross any
> semantic electric fences, there is nothing wrong in using a table, a > table being a clever way to organise lists. You can put in bullets as A table is not a list. Not semantically.
 Signature comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
dorayme - 15 Dec 2008 01:38 GMT > > In article > > <14af94c9-2314-4aa8-9e33-1bc04dbfb800@q26g2000prq.googlegroups.com>, [quoted text clipped - 4 lines] > > A table is not a list. Not semantically. Who said it was a list?
 Signature dorayme
dhtml - 17 Dec 2008 06:38 GMT >>> In article >>> <14af94c9-2314-4aa8-9e33-1bc04dbfb800@q26g2000prq.googlegroups.com>, [quoted text clipped - 5 lines] > > Who said it was a list? You did.
| Ordered lists are in fact semantically equivalent to a two col table. Just two posts up.
Garrett
 Signature comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
dorayme - 17 Dec 2008 09:23 GMT > >>> In article > >>> <14af94c9-2314-4aa8-9e33-1bc04dbfb800@q26g2000prq.googlegroups.com>, [quoted text clipped - 11 lines] > > Just two posts up. But, with respect, that is not me saying that a table is a list in some general unconditional way. If some As are Bs, it does not follow that all Bs are As.
Many tables, for one thing, are composed of many lists and the point of these lists being in the table format is to reveal relationships between various list items across the lists. Thus you might see a list of types of things: animal, mineral and vegetable in one row or column; cats, salt and carrots in another row or column. You might see a list of numbers in one row or column and a list of other items in another row or column.
A limiting case is a table with just one row or column. A one row or a one col table is a legal HTML entity. And, I would say, is not the worst thing you can use to display an unordered list if, for any reason whatsoever, you could not make do with the particularly specialised 'one note' UL element.
Generally, for unordered lists, you would have to be very fussy indeed not to be able to make do with a UL. But, contrary to what we might call the Naive Theory of HTML Semantic Structure (NTHSS), a table with a suitable table heading like: "Items to be bought". Under which are the cells with boring stuff like "low fat cheese, skim milk, eggs..." would certainly *seem* to do fine too.
Now, the NTHSS would say not only that the right semantic element to use for an unordered list is a UL but that a table is a *semantically wrong* thing to use. And it would say this in the face of clear evidence that anyone seeing a table as described just above would be in no doubt whatsoever about its meaning. Either a UL or a Table (in suitable context or table headed) would be about as semantically equivalent as any two things could be in the normal meaning of such a phrase.
I pass now from this matter with unordered lists to ordered lists. An ordered list is a series of items where the order matters. The order needs to be reflected in some way. This is not something that an author can ignore. If an OL is used without the numbers (they can be styled off) and the context does not make it clear that it is an ordered list, then there is no semantic structure involved worth a pinch of salt.
The OL, in and of itself, is nothing much at all. It is really, denied of course, by the NTHSS, a mere hand maiden to presentation, a means to presentation. Some basic presentation is the heart of communicating meaning to humans. It is not the other way around as many people who hold the NTHSS theory maintain.
So, as is sensible, an author will mostly leave the numbers in to help show that the list is ordered. (*help*, because the mere presence of numbers is possible with unordered lists, the numbers in an OL could be misinterpreted as mere markers for reference). But suppose he is not happy with how the numbers line up to the list items. He is fussy! He has aesthetic barrows to push. Good for him!
Suppose he can achieve the fussier look he wants by using a table. Well, what is wrong with this? Nothing, on the semantic front. If the numbers, which are a list in themselves, are put into a left column, and the things to be done (in some algorithmic example) are listed in cells in the adjoining column, and the author shows the tabular relationships row by row, then no human will be at a loss about the meaning. There are these two ways to communicate the ordered list to a human. That is what I mean by semantic equivalence. That is what it is in effect.
There is no hidden deep meaning that attaches to elements that sort of of float next to them. Almost the entire function of elements is to be a good and efficient vehicle for presentation. If either of two elements deliver the same ultimate look that humans will *understand* in the way the author intends, then we have semantic equivalence. This look is a powerful means of communicating something to visual users. Similar remarks, in respects that are relevant, can be made about aural presentation.
 Signature dorayme
Gus Richter - 02 Dec 2008 15:03 GMT > Is it possible to have ordered and unordered lists aligned to the left > edge of the containing block? So instead of this: [quoted text clipped - 34 lines] > > Andrew Poulos Wrap the UL or OL inside a div and apply a negative margin to the div.
 Signature Gus
Ben C - 02 Dec 2008 17:56 GMT >> Is it possible to have ordered and unordered lists aligned to the left >> edge of the containing block? So instead of this: [quoted text clipped - 36 lines] > > Wrap the UL or OL inside a div and apply a negative margin to the div. But how much negative margin? And if you're going to do that, why not just add the same number to 40px and set that as margin or padding on the [uo]l?
Gus Richter - 03 Dec 2008 00:03 GMT >>> Is it possible to have ordered and unordered lists aligned to the left >>> edge of the containing block? So instead of this: [quoted text clipped - 40 lines] > just add the same number to 40px and set that as margin or padding on > the [uo]l? Due to browser incompatibilies. See the previous "lists" subject discussion.
 Signature Gus
Bergamot - 02 Dec 2008 16:01 GMT > Is it possible to have ordered and unordered lists aligned to the left > edge of the containing block? > > • line 1 > • line 1 ul { margin-left: 0; padding-left: 20px; } li { margin-left: 0; padding-left: 0; }
For an ordered list, the ol padding may have to be adjusted, depending on what markers are used and how many items in the list.
 Signature Berg
|
|
|