Results 1 to 13 of 13
  1. #1
    Star Lounger
    Join Date
    Nov 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving an unordered list to the left

    I have a couple of unordered HMTL lists that are in a little box. The list appears about a tab width into the box, rather than left justified. Is there any way to change this? Google hasn't been helping me, and my HTML book is sitting on a shelf at home. (BTW, the little boxes are created by the system I'm using and aren't created by me--all I can do is enter code to fill the boxes with text.)

    TIA!

  2. #2
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    I would guess that CSS is the answer to that problem, but I am unclear as to how you are entering the code. Do I understand correctly that you do not have access to the HTML source? If you can enter CSS into the code you are creating, there is an article on taming lists that seems to describe a workaround to the problem you're having.
    -Mark

  3. #3
    Star Lounger
    Join Date
    Nov 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    Sadly, I cannot use CSS. I have access to the HTML source, but the software I'm using does not allow anything beyond basic HTML (very annoying!).

  4. #4
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    Can you not use CSS properties inline? Unless someone knows another trick, I think you're stuck. I don't know of any other way to modify the appearance of an HTML document, since HTML by design excludes page layout options (which is why CSS was developed).
    -Mark

  5. #5
    Star Lounger
    Join Date
    Nov 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    Well, apparently I can use CSS! Just for the heck of it I pasted style tags above my HTML (since the code is not for an entire page there are no head or body tags), and it worked! Well, sort of. The
    padding:0;
    margin:0;
    code takes the text outside of the left line of the box, while padding:1 makes it the same as it was. So, now I'm excited because I can use CSS, which we had always been told we couldn't, but sadly, I still haven't got my list working right.

  6. #6
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    Try using the <code>text-indent</code> property with pixel values.
    -Mark

  7. #7
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Moving an unordered list to the left

    Correct, that will teach me, I had actually created 4 examples but thought I would be over egging the cake if I included them and didn't change them when pasting it here. I'll adjust the code above to reflect your advice...have a [choccy bar] <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

  8. #8
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Moving an unordered list to the left

    <P ID="edit" class=small>(Edited by Jezza on 10-Jan-08 23:52. To adjust back coding)</P>Hi Ruth

    Late for the party here <img src=/S/sad.gif border=0 alt=sad width=15 height=15>

    Just as an addition to Mark's answer, I just wanted to add that you can have different styles of ordered lists by simply adding classes using a thing called inheritence

    <pre>.bullets ul{
    background-color: #66CCFF;
    width: 100px;
    padding-left: 0px;
    list-style-position: inside;
    list-style-type: disc;
    }

    .nobullets ul{
    background-color: #66FF66;
    width: 100px;
    padding-left: 0px;
    list-style-position: inside;
    list-style-type: none;
    }</pre>



    .nobullets ul is different in such that it removes the bullet marks which doesn't sound much but it does move the lst further to the left. Put the above in the head tags and the code below in the body tags

    <pre><div class='bullets'>


    With Bullets</p>
    <ul>[*]Jezza[*]Ruthie[*]Mark[/list]
    </div>


    With No Bullets 'inside'</p>
    <div class='nobullets'>
    <ul>[*]Jezza[*]Ruthie[*]Mark[/list]
    </div></pre>

    Jerry

  9. #9
    Star Lounger
    Join Date
    Nov 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    OOO, Chocolate! <img src=/S/grin.gif border=0 alt=grin width=15 height=15>

    What tag do you guys use for code? I tried italics last time, but that doesn't look the same.

  10. #10
    Plutonium Lounger
    Join Date
    Mar 2002
    Posts
    84,353
    Thanks
    0
    Thanked 29 Times in 29 Posts

    Re: Moving an unordered list to the left

    I usually put <!t>
    Code:
    <!/t> and <!t>
    <!/t> tags around code. You have to type them yourself, they are not available from the 1-Click TagPanel.
    Example:

    <!t>
    Code:
    <div class='nobulletsin'>
    <!t>
    becomes
    <code>
    <div class='nobulletsin'></code>

  11. #11
    Star Lounger
    Join Date
    Nov 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    OK, thanks Hans!

  12. #12
    Star Lounger
    Join Date
    Nov 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    <code>ul{
    margin-left:15px;
    padding-left:0;
    }</code>
    works perfectly! Thanks so much for the help!

  13. #13
    Star Lounger
    Join Date
    Nov 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving an unordered list to the left

    Hi Jerry-

    Thanks for the tip. I will keep it in mind for the future. <img src=/S/smile.gif border=0 alt=smile width=15 height=15>

    Correct me if I'm wrong, but I think
    <code><div class='nobulletsin'></code>
    should be
    <code><div class='nobullets'></code>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •