No line break on list

  • ljCharlie
  • Proficient
  • Proficient
  • ljCharlie
  • Posts: 343

Post 3+ Months Ago

Below is my CSS file for list.

Code: [ Select ]
li {
    list-style-position: outside;
}
ul {    
    list-style-position: outside;
    list-style-type: disc;
    margin-left: 15;
}
ul ul {
    list-style-position: outside;
    list-style-type: circle;
    margin-left: 25px;

}
ol {
    list-style-position: outside;
    list-style-type: upper-alpha;

}
ol ol {
    list-style-position: outside;
    list-style-type: decimal;
    margin-left: 25px;

}

ol ol ol {
    list-style-position: outside;
    list-style-type: upper-alpha;
    margin-left: 35px;

}
  1. li {
  2.     list-style-position: outside;
  3. }
  4. ul {    
  5.     list-style-position: outside;
  6.     list-style-type: disc;
  7.     margin-left: 15;
  8. }
  9. ul ul {
  10.     list-style-position: outside;
  11.     list-style-type: circle;
  12.     margin-left: 25px;
  13. }
  14. ol {
  15.     list-style-position: outside;
  16.     list-style-type: upper-alpha;
  17. }
  18. ol ol {
  19.     list-style-position: outside;
  20.     list-style-type: decimal;
  21.     margin-left: 25px;
  22. }
  23. ol ol ol {
  24.     list-style-position: outside;
  25.     list-style-type: upper-alpha;
  26.     margin-left: 35px;
  27. }


Now, here's the problem. When I use do this:

Code: [ Select ]
<b>Section Title</b>
<ul><li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
  1. <b>Section Title</b>
  2. <ul><li>List 1</li>
  3.   <li>List 2</li>
  4.   <li>List 3</li>
  5. </ul>


The result showed up like this:

Section Title

*List 1
*List 2
*List 3


Is there a way to not having the line break after the "Section Title"? I want it to show up like this:

Section Title
*List 1
*List 2
*List 3


How to I take out the extra line break?

Any help is grateful!

ljCharlie[/code]
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Code: [ Select ]
<ul style="margin-top:0px;">

Either set margins inline like that or in css.
  • ljCharlie
  • Proficient
  • Proficient
  • ljCharlie
  • Posts: 343

Post 3+ Months Ago

Thanks! It works but how do I give more spaces between the bullet and the texts that comes after it?

ljCharlie
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

fiddle with the padding-left and margin-left properties. You will need to set both in order to get IE and Geckos to play nicely.
  • ljCharlie
  • Proficient
  • Proficient
  • ljCharlie
  • Posts: 343

Post 3+ Months Ago

I tried that but it doesn't work. The whole bullet and the texts move with it. I want the bullet to stay at its place but the texts move to the right a little bit. For example, the following is what I have now:

Bullet Test
*Test 1
*Test 2

Here is what I want it to look like:

Bullet Test
* Test 1
* Test 2

Do you see the space between the bullet and the word "Test"? I want to have that space. Is it possible to use CSS or do I just have to use my keyboard to space it?

ljCharlie
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

http://css.maxdesign.com.au/listutorial/

awesome site
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

This seporated them for me :? (still needs tweeking of margins as sam suggests)
Code: [ Select ]
li {
  list-style-position: outside;
  padding-left:100px;
}
  1. li {
  2.   list-style-position: outside;
  3.   padding-left:100px;
  4. }

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 69 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.