Grow your CSS skills. Land your dream job.

Removing Indent on Child Posts

  • # May 21, 2012 at 3:41 pm

    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?

    # May 24, 2012 at 2:04 pm

    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:

    		< ?php $count1++; } ?>
    < ?php endforeach; ?>

    # May 24, 2012 at 2:19 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".