Back To Website Design Forum

No line break on list

  • ljCharlie
  • Proficient
  • Proficient
  • No Avatar
  • Joined: May 15, 2003
  • Posts: 343
  • Status: Offline

Post September 20th, 2004, 11:56 am

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;
  14. }
  15. ol {
  16.     list-style-position: outside;
  17.     list-style-type: upper-alpha;
  19. }
  20. ol ol {
  21.     list-style-position: outside;
  22.     list-style-type: decimal;
  23.     margin-left: 25px;
  25. }
  27. ol ol ol {
  28.     list-style-position: outside;
  29.     list-style-type: upper-alpha;
  30.     margin-left: 35px;
  32. }


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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 20th, 2004, 11:56 am

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post September 20th, 2004, 12:41 pm

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

Either set margins inline like that or in css.
Strong with this one, the sudo is.
  • ljCharlie
  • Proficient
  • Proficient
  • No Avatar
  • Joined: May 15, 2003
  • Posts: 343
  • Status: Offline

Post September 20th, 2004, 12:54 pm

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
  • Joined: Aug 07, 2004
  • Posts: 1853
  • Status: Offline

Post September 20th, 2004, 1:35 pm

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
  • No Avatar
  • Joined: May 15, 2003
  • Posts: 343
  • Status: Offline

Post September 21st, 2004, 6:17 am

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
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post September 21st, 2004, 1:20 pm

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

awesome site
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post September 21st, 2004, 5:37 pm

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. }
Strong with this one, the sudo is.

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 131 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.