SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Do I Control Indents For The ul or li Tags?

    I have a site that I am working on. Here is a link to the sample page in question.


    LINK-
    http://ackermannpr.com/wm2/attorneys_allen.html



    In the far right column under the attorneys picture, there is a list called Practice Areas. This is the area in question.

    I have redefined the ul and li tags to remove the bullet and shift them back over to the left so that they are aligned with the other content in that table column. The problem is that some of the items in the list are spilling over to two lines and are not indenting. Is there a way to configure the CSS so that the initial lines are flush left and, in the case of a long entry, the indent will actually indent?

    Here is a sample of what we are going for as far as long entries in the Practice Area being indented. Take a look at the entry for "Corporations, Partnerships, and Limited Liability Companies.


    LINK-
    http://ackermannpr.com/wm2/attorneys_arning.html



    In advance, thanks to all of those who offer any assistance!

    Todd Temple
    Todd Temple > T2 Design

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    East of Ottawa, ON
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    ul {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #666666;
    /*	margin-left: -40px; */
    margin: 0;
    padding: 0;
    }
    You should also validate your code.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Every browser has different defaults and values for how they handle margins and padding on elements. What I do is take the control away from the browsers and put it square in my hands (where it belongs) with the universal selector. Bear in mind this is not a hack, and is best used for ONLY resetting margins and padding. Uisng it with anything else is just begging for trouble.

    Here's the code for it (put it at the very top of your stylesheet, then redeclare your margins and padding on the elements you want to adjust).

    Code CSS:
    * {
        margin: 0;
        padding: 0;
    }

  4. #4
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neither replies discuss how to handle the indentation of an entry or individual practice area that is wrapping or spilling over onto two lines. I have some entries that are lengthy, such as "Corporations, Partnerships, and Limited Liability Companies", which is wrapping onto move than one line. The client is wanting the entries that are more than one line to indent. Is this possible?
    Todd Temple > T2 Design

  5. #5
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if this is what you're looking for. This creates MLA style reference for books in a works cited list. If you're not familiar with that you begin typing on the first line and the second and every following line is indented 5 spaces from the beginning of the line.

    p.ref {
    margin-left:3em;
    text-indent:-3em;
    }

    The effect is actually backward from how it looks:

    margin-left adjusts all the following lines over 3em (visually it looks like about 5 spaces).

    text-indent adjusts the indent of the first line. In order to have the first line NOT indented I move it back the 3em which the other lines are aligned. You can set any values for either one of these including, obviously negative values to get it to do what you want.

    Or do you need something different?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want both lines to indent the same distance, I'd apply some padding to the left side of the element the content is in instead. And I don't think that "negative text indenting" is valid either.

  7. #7
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    If you want both lines to indent the same distance, I'd apply some padding to the left side of the element the content is in instead. And I don't think that "negative text indenting" is valid either.
    I am not wanting both lines to indent. Only the lines that wrap or spill over onto two lines. Any solutions? Or ones that do not use negative values?
    Todd Temple > T2 Design

  8. #8
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    using a negative value validates fine and seems to work on every browser I've been able to test it on. I'm primarily confined to windows platforms for testing though. Has anyone had problems doing it this way?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  9. #9
    SitePoint Zealot kimberlybarryd's Avatar
    Join Date
    Jan 2007
    Location
    Nova Scotia, Canada
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see some spacer .gifs there. might be it. Don't know much about tables.

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Negative text indenting works fine. I use it on the <h2>s and <h3>s on my site.

    The specs specifically allow it:
    Quote Originally Posted by CSS2.1 Specs
    The value of 'text-indent' may be negative, but there may be implementation-specific limits. If the value of 'text-indent' is either negative or exceeds the width of the block, that first box, described above, may overflow the block. The value of 'overflow' will affect whether such text that overflows the block is visible.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is how I should make the first portion of one line align to the left but when the one string of text is too lengthy, I need it to indent just a bit.... maybe 10 pixels or so. Can anyone address this issue?
    Todd Temple > T2 Design

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this:
    Code:
    li {
      list-style-image:none;
      list-style-type:none;
      padding-left:10px;
      text-indent:-10px;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's the ticket!
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


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
  •