SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Why are my bulleted lists out-dented?

    hi,

    i don't really know anything about css.

    i am using a new wordpress template, and my bulleted lists are appearing out-dented. here is the site:

    http://hawaii.johnfromberkeley.com/?p=10

    can anyone help me modify the css to get them indented?

    thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The default of a list bullet is outside the principal box and you could use list-style:inside instead.

    e.g.
    Code:
    .content_txt ul {
        padding:0; 
        margin:0;
    list-style:inside;
    }
    However that means that when a line of text wraps it will line up under the bullet and not with the text. If this is an issue then instead just add a margin to the list to move the whole thing.

    e.g.
    Code:
    .content_txt ul {
        padding:0; 
        margin:0 0 0 14px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the li (list item) styles have padding 0 on the left side.
    Try increasing the left side padding. understanding the css box model will help.

  4. #4
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, paul-

    3 questions:

    1. how do i combine your recommendations, e.g. have the text inside, and also wrap with the text and not the bullet?

    2. how do i have the bullets actually indent?

    3. do i replace the existing ".content_txt ul", or add it afterwords.

    paul and prasanthmj- i am really coding/css ignorant. i can basically look for patterns and copy-paste, but i have no idea what i am doing, really.

    thanks for helping me!

  5. #5
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    never mind!!! i got it! you guys are lifesavers!

  6. #6
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops. spoke too soon!

    notice that the left side is not lining up with the text, as paul said.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Remove the list-style:inside and increase the margin

    Sorry I wasn't clear originally. It was an either or

  8. #8
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Try without list-style-position: inside

  9. #9
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, paul-

    when i remove "list-style-position: inside", the list goes flush left. : (

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Did you increase the margin left from 14px to something like 30px?

    e.g.
    Code:
    .content_txt ul {
        padding:0; 
        margin:0 0 0 30px;
    }

  11. #11
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    now ~that~ worked. thanks for all the help!


Bookmarks

Posting Permissions

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