Forums

ccc630

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:

<div id="footer_columns">
<div id="column_01">

<!-- FIRST LOOP: display posts 1 thru 5 -->
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>

<ul>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

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

</div>

<div id="column_wrap">

<div id="column_02">

<!-- SECOND LOOP: display posts 6 thru 10 -->
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=5'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>

<ul>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

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

</div>

<div id="column_03">

<!-- THIRD LOOP: display posts 11 thru 15 -->
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=10'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>

<ul>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php $count3++; } ?>
<?php endforeach; ?>

</div>

</div>
</div>

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?

Mottie

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 </UL> is missing after each loop:

		<?php $count1++; } ?>
		<?php endforeach; ?>
	</ul>
</div>

ccc630

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

treehouse : what would you like to learn today?

Forums

Removing Indent on Child Posts