[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

space between list items

Posted on 2005-04-20
6
Medium Priority
?
1,470 Views
Last Modified: 2012-05-05
this should be easy but is quite urgent

when you create a list (ul, ol etc, etc) how do you put a space netween the lines - i have tried using <br> but then my code fails html validation

for example

<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>

how do i force a space between the lines whilst keeping my code vaild? - i need a solution that will work in IE, Netscape and Firefox.

thanks
0
Comment
Question by:naifyboy123
  • 3
  • 2
6 Comments
 
LVL 2

Assisted Solution

by:DBB
DBB earned 1000 total points
ID: 13828285
Hi,

Use CSS for the spacing.

ie: -

.list
{
line-height: 200%;
margin-left: 10px;
font-style: normal;
}


Dbb
0
 
LVL 32

Accepted Solution

by:
Batalf earned 1000 total points
ID: 13828519
You can also use margin-bottom if you have list items that uses several lines, and you only want the space after the end of the item.

example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <title>Test</title>
    <style type="text/css">
    li{
        margin-bottom:10px;
    }
    </style>
</head>
<body>

<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>

</body>
</html>
0
 

Author Comment

by:naifyboy123
ID: 13828584
ooops i forgot to mention that sone of my list lines run accross 2 lines of the page and that fix means i get a space on all lines:

<ul>
<li>this line is long and actually spans 2 lines on the page before the next list item is shown and therefore the second line of the list shows a space which i dont want</li>
<li>this line is normal and only spane one line of the page</li>
<li>this line is alo slong blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</li>
<li>and this line only spans one line as well</li></ul>

sorry - is there a way i can only make the list "items" have the space between them rather than a space on every line regardless?


0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 32

Expert Comment

by:Batalf
ID: 13828638
yes, by using margin-bottom

example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
      <title>Test</title>
      <style type="text/css">
      li{
            margin-bottom:10px;
      }
      </style>
</head>
<body>

<ul>
<li>this line is long and actually spans 2 lines on the page before the next list item is shown and therefore the second line of the list shows a space which i dont want</li>
<li>this line is normal and only spane one line of the page</li>
<li>this line is alo slong blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</li>
<li>and this line only spans one line as well</li></ul>

</body>
</html>
0
 

Author Comment

by:naifyboy123
ID: 13828656
sorry shoud have refreshed before posting - thank batalf
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13828671
Glad I could help!

Batalf
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question