Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
Home
Discussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2008



Tip: Looking for answers? Try searching our database.

left align lists

Thread view: 
Enable EMail Alerts  Start New Thread
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

 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage

Start New Thread
Enable EMail Alerts
Rate this Thread



©2009 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.