You are here: Re: positioning in ordered lists « HTML « IT news, forums, messages
Re: positioning in ordered lists

Posted by Jukka K. Korpela on 08/24/07 10:22

Scripsit Stann:

> I'm working with ordered lists. The default list is indented about
> the same amount as a <blockquote> would do.

The default indentation for both is 40 pixels, in common practice, though
lists look different because of the numbers.

> Is there any way to
> over-ride or tweak this, so the list is not indented at all?

Surely. As "dorayme" tells in his/her reply, you can set the margins and
paddings to zero. However, there's an important side effect: there won't be
any room for the numbers then.

Thus, you could set all the margins and paddings to zero _except_
margin-left for <ol> (or the <li> elements), which should be set to a value
that is sufficient for the number, the period, and the spacing before the
list item content. This is not exact science, but

ol, li { margin:0; padding: 0; }
ol { margin-left: 1.6em; }

would typically result in "unindented" numbered list. But don't blame me if
part of the numbers gets chopped off under some circumstances. The only way
to get exact results (with the usual caveats) is to make the numbers part of
the content:

<ul>
<li>1. foo bar
<li>2. zap zap
...
</ul>

with
ul, li { margin:0; padding: 0; list-style: none; }

> (oops, okay, just changed that with "text-indent",

That might give the illusion of working, until you view the page in a window
that is narrower than needed to keep each list item on one line. Please
don't use CSS properties without reading and understanding their _meaning_

> re-defining the <li> tag.

<lecture type="semantic">No, the <li> tag _means_ "list item". There is no
way you could change this definition. You can use the element against its
definition but not change its definition.</lecture>

> It "un-indents" the list items, but only the first text line of each
> item. other text lines are still indented a further "tab" to the
> right .. :(

Well, yes. You would have known this in advance if...

> On the same subject, ordered lists contain quite a wide text indent
> between the <ol> number and the first character of the list item.
> Seems like about a 2-character indent. Is there any way to change
> this?

Not really in CSS as currently defined and implemented. The tricky way of
putting numbers into the items would avoid the problem, of course.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 

Navigation:

[Reply to this message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация