By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,294 Members | 2,650 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,294 IT Pros & Developers. It's quick & easy.

List item distance

P: n/a
Hi,

Is there a way to set the distance between the items in a list that I can
put in the <ul> or <ol> tag?

I suppose that using margin in the <li> tag will work but the endless
repetition seems to me rather unelegant and a waste of bandwidth.

I don't use a stylesheet file, but want to implement it with "style=" in the
tag.

Thanks,
Wim
Jul 21 '05 #1
Share this Question
Share on Google+
14 Replies


P: n/a
"Wim Roffil" <wimroffel@please_no_spam-planet.nl> writes:
Is there a way to set the distance between the items in a list that I can
put in the <ul> or <ol> tag?

I suppose that using margin in the <li> tag will work but the endless
repetition seems to me rather unelegant and a waste of bandwidth.

I don't use a stylesheet file, but want to implement it with "style=" in the
tag.


This can only be done without repetition in a stylesheet. It can't be
done with style attributes on a tag.

li { ... } /* All li */
ul.reasons li { ... } /* All li in a <ul class="reasons"> */

This is why a stylesheet is the best approach.

Is there any reason you can't use a stylesheet file? A second-best
approach is to put an inline stylesheet in the HTML. It's still
unnecessary repetition, though, if it's at all avoidable.

--
Chris
Jul 21 '05 #2

P: n/a
Wim Roffil wrote:
Hi,

Is there a way to set the distance between the items in a list that I can
put in the <ul> or <ol> tag?

I suppose that using margin in the <li> tag will work but the endless
repetition seems to me rather unelegant and a waste of bandwidth.

I don't use a stylesheet file, but want to implement it with "style=" in the
tag.

Thanks,
Wim

I suggest using a style block in the head element, but why you do not
want to use a stylesheet file when you are concerned with bandwith usage
and elegancy is a mystery to me.

Try this:

<!DOCTYPE ... your doctype declaration ...>
<html>
<head>
< .. your head tags.. >
<style>
li {margin-left: 0.5em;}
</style>
</head>
<body>
<ul>
<li>Listitem with 0.5em left margin</li>
<li>Listitem with 0.5em left margin</li>
<li>Listitem with 0.5em left margin</li>
<li>Listitem with 0.5em left margin</li>
</ul>
</body>
</html>
Jul 21 '05 #3

P: n/a
in comp.infosystems.www.authoring.stylesheets, Wim Roffil wrote:
Hi,

Is there a way
Yes.
I suppose that using margin in the <li> tag will work
Yes
but the endless
repetition seems to me rather unelegant and a waste of bandwidth.
Yes
I don't use a stylesheet file, but want to implement it with "style=" in the


You know solution good solution, you know bad solution, and you don't
want to use good solution, but bad one. There is nothing we can do.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #4

P: n/a
saz
In article <d0**********@reader13.wxs.nl>, wimroffel@please_no_spam-
planet.nl says...
Hi,

Is there a way to set the distance between the items in a list that I can
put in the <ul> or <ol> tag?

I suppose that using margin in the <li> tag will work but the endless
repetition seems to me rather unelegant and a waste of bandwidth.

I don't use a stylesheet file, but want to implement it with "style=" in the
tag.

Thanks,
Wim

Hard way, add to each tag:

<li style="line-height:1em;">

Easier way - Add line height or margin to the style tags within the head
tags:

<style type="text/css">
<!--
li { line-height:1em; }
-->
</style>

or

<style type="text/css">
<!--
li { margin-top:1em; }
-->
</style>

Use a stylesheet. It's much easier and changes will be global. What if
you add this list to another page? You'd have to redo this on the new
page.
Jul 21 '05 #5

P: n/a
in comp.infosystems.www.authoring.stylesheets, saz wrote:
In article <d0**********@reader13.wxs.nl>, wimroffel@please_no_spam-
planet.nl says...
Hi,

Is there a way to set the distance between the items in a list that I can
put in the <ul> or <ol> tag?
Hard way, add to each tag:

<li style="line-height:1em;">


Why are you using line height? It means space between lines. That
includes also between lines in list item, which is not wanted:

* foobar akdfnlsk fnsrke gre

re esfrks rkesh seht ge

* jdsfbskfzsbvfk

When line-height:2. Better:

* foobar akdfnlsk fnsrke gre
re esfrks rkesh seht ge

* jdsfbskfzsbvfk

This is with margin: 1em 0;

Much better to use margin. (and in case of using line height, it would
make more sence to use it for ul or ol...)
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #6

P: n/a
saz
In article <MP************************@news.individual.net> ,
la***@raittila.cjb.net says...
in comp.infosystems.www.authoring.stylesheets, saz wrote:
In article <d0**********@reader13.wxs.nl>, wimroffel@please_no_spam-
planet.nl says...
Hi,

Is there a way to set the distance between the items in a list that I can
put in the <ul> or <ol> tag?

Hard way, add to each tag:

<li style="line-height:1em;">


Why are you using line height? It means space between lines. That
includes also between lines in list item, which is not wanted:

* foobar akdfnlsk fnsrke gre

re esfrks rkesh seht ge

* jdsfbskfzsbvfk

When line-height:2. Better:

* foobar akdfnlsk fnsrke gre
re esfrks rkesh seht ge

* jdsfbskfzsbvfk

This is with margin: 1em 0;

Much better to use margin. (and in case of using line height, it would
make more sence to use it for ul or ol...)

I was just giving options. I've used both, and choose by what gives the
better results.
Jul 21 '05 #7

P: n/a

"saz" <sa*****@nospammersexcite.com> schreef in bericht
news:MP***********************@news.comcast.gigane ws.com...
<style type="text/css">
<!--
li { margin-top:1em; }
-->
</style>
I was hoping this could be translated in the tag in something like <ol
style="li.margin-height:1em">
Use a stylesheet. It's much easier and changes will be global. What if
you add this list to another page? You'd have to redo this on the new
page.


I have a big website with one stylesheet. This style element is for one
rather small category. I don't think that every exception should be loaded
into the stylesheet.

Wim
Jul 21 '05 #8

P: n/a
On Fri, 11 Mar 2005, saz wrote:
<style type="text/css">
<!--
li { line-height:1em; }
-->
</style>


Don't include the faux "comment" markers if you're trying to write
XHTML.

Even in HTML, this feature is ancient history by now. Browsers were
at least *understanding* how to parse a style element by HTML/3.2 at
the latest (even those which didn't choose to support stylesheets).
The old browser/versions which still would need the "comment" markers
pre-date the introduction of the Host: header in HTTP requests, so
such browsers would be practically useless on today's web anyway.

Preferably, anyway, use an external stylesheet.
Jul 21 '05 #9

P: n/a
"Wim Roffil" <wimroffel@please_no_spam-planet.nl> writes:
"saz" <sa*****@nospammersexcite.com> schreef in bericht
news:MP***********************@news.comcast.gigane ws.com...
Use a stylesheet. It's much easier and changes will be global. What if
you add this list to another page? You'd have to redo this on the new
page.


I have a big website with one stylesheet. This style element is for one
rather small category. I don't think that every exception should be loaded
into the stylesheet.


Inside that category, and only in the pages in that category, have
<link rel="stylesheet" type="text/css" href="/css/main-stylesheet.css">
<link rel="stylesheet" type="text/css" href="/css/category4-stylesheet.css">

Outside the category, just have
<link rel="stylesheet" type="text/css" href="/css/main-stylesheet.css">

The category specific stylesheet contains the exceptions. If your site
generation tool doesn't let you have a slightly different template for
that section, it's time to get a better site generation tool.

Note that, unless the exceptions are quite large - 5k of CSS or more,
perhaps - you're probably better just putting them in the main
stylesheet.

--
Chris
Jul 21 '05 #10

P: n/a
saz
In article <d0**********@reader08.wxs.nl>, wimroffel@please_no_spam-
planet.nl says...

"saz" <sa*****@nospammersexcite.com> schreef in bericht
news:MP***********************@news.comcast.gigane ws.com...
<style type="text/css">
<!--
li { margin-top:1em; }
-->
</style>


I was hoping this could be translated in the tag in something like <ol
style="li.margin-height:1em">
Use a stylesheet. It's much easier and changes will be global. What if
you add this list to another page? You'd have to redo this on the new
page.


I have a big website with one stylesheet. This style element is for one
rather small category. I don't think that every exception should be loaded
into the stylesheet.

Wim

Why not? That's why you have a stylesheet. Add a class for this list.

<div class="list">
<ol>
<li>item1</li>
<li>item 2</li>
</ol>
</div>

or use <ol class="list"> either way will work

Add to your stylesheet:

..list li{ margin-top:1em; }

Why are you trying to make it more difficult than it has to be?
Jul 21 '05 #11

P: n/a
*saz* <sa*****@nospammersexcite.com>:

Why not? That's why you have a stylesheet. Add a class for this list.
ACK.
<div class="list"><ol>(...)
or use <ol class="list"> either way will work


Why the "or"? Why would one add yet another superfluous 'div' just to add
a class?

--
"You cannot make a man by standing a sheep on its hind legs.
But by standing a flock of sheep in that position you can make a crowd of men."

Max Beerbohm
Jul 21 '05 #12

P: n/a
saz
In article <op**************@crissov.de>,
ch**************@nurfuerspam.de says...
*saz* <sa*****@nospammersexcite.com>:

Why not? That's why you have a stylesheet. Add a class for this list.


ACK.
<div class="list"><ol>(...)
or use <ol class="list"> either way will work


Why the "or"? Why would one add yet another superfluous 'div' just to add
a class?

Because the OP seems to prefer the hard way of doing this.
Jul 21 '05 #13

P: n/a
saz
In article <Pi******************************@ppepc56.ph.gla.a c.uk>,
fl*****@ph.gla.ac.uk says...
On Fri, 11 Mar 2005, saz wrote:
<style type="text/css">
<!--
li { line-height:1em; }
-->
</style>


Don't include the faux "comment" markers if you're trying to write
XHTML.

Even in HTML, this feature is ancient history by now. Browsers were
at least *understanding* how to parse a style element by HTML/3.2 at
the latest (even those which didn't choose to support stylesheets).
The old browser/versions which still would need the "comment" markers
pre-date the introduction of the Host: header in HTTP requests, so
such browsers would be practically useless on today's web anyway.


Old habits die hard. I just automatically add the comments. I can't
remember the last time I put style in the head tags, so I guess I should
erase it from memory.
Jul 21 '05 #14

P: n/a
Wim Roffil wrote:
"saz" <sa*****@nospammersexcite.com> schreef in bericht
news:MP***********************@news.comcast.gigane ws.com...
<style type="text/css">
<!--
li { margin-top:1em; }
-->
</style>

I was hoping this could be translated in the tag in something like <ol
style="li.margin-height:1em">
Use a stylesheet. It's much easier and changes will be global. What if
you add this list to another page? You'd have to redo this on the new
page.

I have a big website with one stylesheet. This style element is for one
rather small category. I don't think that every exception should be loaded
into the stylesheet.

Wim

There is another option:

<link rel="stylesheet" type="text/css" href="/css/category4-stylesheet.css">

The first line in category4-stylesheet.css
@import url(main-stylesheet.css)

all styles in category-4 sheet will override main.
Jul 21 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.