Results 1 to 11 of 11
  1. #1
    5 Star Lounger
    Join Date
    Jun 2001
    Location
    USA
    Posts
    708
    Thanks
    48
    Thanked 1 Time in 1 Post

    Modifying a list in HTML

    This should be simple, but I can't figure it out (here's the page I'm referring to).

    How do I remove the indentation from the bulleted (not numbered) list at the bottom -- the one that begins with, "My predilection for revision" and ends with "Contact me"?

    I want to make the list flush with the bold headings.

    Many thanks!

  2. #2
    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: Modifying a list in HTML

    Hi Jon

    By far the easiest way to do this is replace:

    <ul>[*]My predilection for revision means that the texts here may be different than what was published.
    [*]Texts are listed chronologically within their categories.[*]Contact me.[/list]

    with:



    My predilection for revision means that the texts here may be different than what was published.

    Texts are listed chronologically within their categories.

    Contact me.</p>
    Jerry

  3. #3
    Super Moderator
    Join Date
    Jan 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    3,852
    Thanks
    4
    Thanked 259 Times in 239 Posts

    Re: Modifying a list in HTML

    If you wanted to retain the bullets then I would add the following line to css definition in the head

    ul {text-indent: -25px}
    Andrew Lockton, Chrysalis Design, Melbourne Australia

  4. #4
    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: Modifying a list in HTML

    Hi Andrew

    Good point....buuuut I just tried that out in Firefox and it over ran the bullets!!!

    I would further add this just on the safe side.

    ul {
    text-indent: -25px;
    list-style-type: none;
    }


    <img src=/S/whisper.gif border=0 alt=whisper width=29 height=17> I know this as Jon likes to use FF <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

  5. #5
    Super Moderator
    Join Date
    Jan 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    3,852
    Thanks
    4
    Thanked 259 Times in 239 Posts

    Re: Modifying a list in HTML

    Thanks for the tip. I only have IE here so I hadn't tested it across browsers.
    Andrew Lockton, Chrysalis Design, Melbourne Australia

  6. #6
    5 Star Lounger
    Join Date
    Jun 2001
    Location
    USA
    Posts
    708
    Thanks
    48
    Thanked 1 Time in 1 Post

    Re: Modifying a list in HTML

    Hi Jerry (and Andrew),

    Thanks for your replies.

    Unfortunately, I'm at a loss as to where exactly I should place the ul stuff. I'm attaching index.htm.

    Thanks!
    Attached Files Attached Files

  7. #7
    Super Moderator
    Join Date
    Jan 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    3,852
    Thanks
    4
    Thanked 259 Times in 239 Posts

    Re: Modifying a list in HTML

    Jon

    The ul code that we provided should be located right where you put it - inside the style tag in the head. As Jezza pointed out, my suggestion was flawed when the page is viewed in Firefox therefore it shouldn't be used. The two different options that Jezza provided both assume that you don't want bullets. If this is the case then I would go with his first suggestion and not even bother with the ul in the style tag. His first suggestion is to style the text in the body without using an unnumbered list and using a < p > tag instead.

    This would be the most appropriate formatting for that content since the initial use of the ul on that page only has a single entry (Statesmanship...). General text design tells me that a single item list is not actually a list (you need two items or more to qualify as a list). Therefore this paragraph should be tagged with < p > tag
    The second use of the ul tags is also not suitable in that context since all three items are not related in any way. Again, this text should be formatted with a < p > tag.

    A lot of your confusion stems from your use of nesting of your content inside ul and ol tags. The title 'Latest' is nestled inside the ul tag so removing this will allow the text to sit in the correct place except that you put a negative text-indent in the style to counteract the ul indent. In the case of the numbered list, this nesting actually makes sense if you want the numbered list to continue across each section but it adds complexity that you are struggling with. I have attached a sample where the nesting is removed which simplifies the code back to become more obvious. I suggest you use something simpler as the basis of your page coding.
    Attached Files Attached Files
    Andrew Lockton, Chrysalis Design, Melbourne Australia

  8. #8
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Modifying a list in HTML

    <img src=/S/grin.gif border=0 alt=grin width=15 height=15> The reason there are non-list items stuck in the list was Jon's request in March 2004 in <post:=331,825>post 331,825</post:>. If there is another way to insert those unnumbered "sub-headings" in a numbered list without it restarting, I'm not sure what it is. But perhaps that is no longer a requirement?

  9. #9
    5 Star Lounger
    Join Date
    Jun 2001
    Location
    USA
    Posts
    708
    Thanks
    48
    Thanked 1 Time in 1 Post

    Re: Modifying a list in HTML

    <P ID="edit" class=small>(Edited by Jon_Rick on 26-Feb-06 12:18. )</P>Hi Andrew,

    Thanks for your reply. It seems like the best idea is to return to this thread after I solve this one.

    Thanks again.

  10. #10
    5 Star Lounger
    Join Date
    Jun 2001
    Location
    USA
    Posts
    708
    Thanks
    48
    Thanked 1 Time in 1 Post

    Re: Modifying a list in HTML

    Wow, excellent memory Jefferson!

    I'd like to retain the current format of bullets, instead of numbers, in both the Latest list and at the bottom ("My predilection for revision means...")

    Thanks!

  11. #11
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Modifying a list in HTML

    There seems to be some difference between IE and Fx here. IE thinks of the bullet position as related to the text-indent setting, while Fx views it as related to the margin-left setting. Some serious experimentation will be required to see if you can find a good balance. There also may be padding and other settings you can play with.

Posting Permissions

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