Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Removing Indent on Child Posts

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #38169
    ccc630
    Member

    I’ll add my standard disclaimer that this is probably a painfully obvious fix that I should have seen immediately. Apologies in advance for asking. :)

    Working on a client site with a requirement for multiple columns in the footer listing most recent posts. It’s working fine, except that I want to remove the indent for child and grandchild posts — right now it looks like the world’s worst report outline. I just want each column to be vertical, without indentation. I’m using the following code for the multiple loops:

    Which is a heck of a lot to look through, I realize — the three loops are identical except for the offset. The CSS applied to this is:

    /* three column layout */
    div#column_01 {
    float: left;
    clear: none;
    width: 300px;
    }
    div#column_wrap {
    float: right;
    clear: none;
    width: 600px;
    }
    div#column_02 {
    float: left;
    clear: none;
    width: 295px;
    }
    div#column_03 {
    float: right;
    clear: none;
    width: 295px;
    }


    }

    I then tried adding text-indent: none; to a variety of selector combinations, to no avail. Does anyone know of a way to do this?

    #103424
    Mottie
    Member

    Hi ccc630!

    After looking at the footer columns, I’m not really sure what you’re trying to accomplish, as in why are columns 2 and 3 wrapped? Also, what spacing are you trying to remove? Maybe an image of what you are trying to accomplish would help.

    I put the code you shared together into a jsFiddle to help me better see what we’re working with and I’ve changed the fixed pixel widths to percentage width because it works nicer in the small result window… I’m guessing your layout has a fixed overall width.

    Either way, check out this basic tutorial on how to use HTML5 + CSS3 to set up a multi-column layout (it’s point #10).

    Oh and one last thing. In the PHP you shared above, the closing is missing after each loop:

    		


    #103427
    ccc630
    Member

    Thanks for taking such a close look — the basic structure is taken from a tut Jeff Starr put up on Digging Into WordPress a while back — the wrap on the 2nd and 3rd columns seemed a bit odd to me as well, but I’m not gonna argue with Jeff Starr. :) Think it’s to do with keeping IE7/8 happy. As it turns out the client now just wants two columns, which is much easier. I still have the core problem, though: What I’m trying to achieve is a straight vertical list of posts — right now child categories are being indented, so it looks something like:

    -Parent Post
    -Child-category Post
    Grandchild-category Post

    And what I want is:

    -Parent Post
    -Child-Cat Post
    -Grandchild-Post
    -Red-headed Stepchild Post

    and so on. Obviously easy to do with straight-up HTML/CSS, but WordPress is very helpfully organizing hierarchically, and I can’t figure out how to override that.

    The site is a bit of a mess because I’m trying to fix some work that was done on it before I took over, but if you want to see it in action it’s screenprotector.com. (it’s in the footer)

    And I did close the

      — bit embarrassing, there!

      Thanks,

      Chris

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.