2×3 rectangular post list layout

  • Resolved xrun

    (@xrun)


    14 years, 6 months ago

    Hi.
    I’d like to make the posts appear in a 2 by 3 rectangular layout when listing posts in one of my categories (news).
    I have a page called page-news.php, and I’ve made separate divs in the css for the main page area between the sidebars, and for title, content, and meta for this page.
    The area where the posts are to be listed is 580px wide, and I need the posts to be listed in a rectangular layout with 2 posts at 260 pixels wide side by side, and 3 high for a total of the 6 latest posts, with the two newest at the top.
    I just need a little help getting the posts to show up side by side instead of all listing in a single narrow column in the main page area.

Viewing 6 replies - 1 through 6 (of 6 total)

  • to make this less hypothetical, and to get you more detailed help, could you post a link to your site?

    generally, you could add a float:left; to the style of the post div; and adjust the width amd margins to fit into your space.

    if your posts are of diffenrent heights, you may need to add some code to the loop, to add an extra css class, such as ‘.left’ or ‘.first’ or so.

    Thread Starter xrun

    (@xrun)

    Ok, so in the page-news.php i put a div for the page contents at 580px wide, then one for the posts at 260px wide (will adjust to fit later), and this last one also has a float:left; in the css? I tried that, but all the posts listed below eachother in a 260px column to the left in the page contents area.

    check the padding and margin in your styles (padding adds to the width), and make sure not to have a clear:both; or clear:left; in the style with the float.

    Thread Starter xrun

    (@xrun)

    Still doesn’t work. This is the css for the news page, margins should be good and no clears anywhere. I’m kinda stuck.

    div.center-blog
	{
	width:580px;
	float:left;
	margin-right:5px;
	margin-top:3px;
	}

div.center-blog-newspage
	{
	width:240px;
	float:left;
	margin-right:5px;
	margin-top:3px;
	}

div.post-title-newspage
	{
	margin:0px;
	padding:4px;
	padding-top:6px;
	padding-left:8px;
	height:16px;
	background-image:url(images/title-header.gif);
	}

div.post-content-newspage
	{
	background-color:#FFFFFF;
	margin:0px;
	padding:5px;
	text-align:left;
	border-top:#000000 1px solid;
	border-bottom:#000000 1px solid;
	}

div.post-meta-newspage
	{
	color:#ddd;
	margin:0px;
	padding:4px;
	padding-left:8px;
	height:14px;
	margin-bottom:16px;
	background-image:url(images/post-footer.gif);
	}

    And in the page-news.php:

    <div class="center-blog">
<div class="center-blog-newspage">
    <?php query_posts('cat=7&showposts=9'); ?>
	    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post-title-newspage">
			<h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
</div>
<div class="post-content-newspage">
				<?php the_content(''); ?>
         		<?php edit_post_link('Rediger innlegget.', '<p>', '</p>'); ?>
</div>

<div class="post-meta-newspage">
						<?php the_time('j. F, Y'); ?> <?php the_time('H:i'); ?> av <?php the_author(); ?> <?php wp_link_pages(array('before' => '<p><strong>Sider:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
	  <?php endwhile; endif; ?>
         <?php edit_post_link(' Rediger side.', '<p>', '</p>'); ?>
</div>
</div>

    try and move the <div class="center-blog-newspage"> so that it is inside the loop, wrappping each post, as below:

    <div class="center-blog">

    <?php query_posts('cat=7&showposts=9'); ?>
	    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="center-blog-newspage">
<div class="post-title-newspage">
			<h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
</div>
<div class="post-content-newspage">
				<?php the_content(''); ?>
         		<?php edit_post_link('Rediger innlegget.', '<p>', '</p>'); ?>
</div>

<div class="post-meta-newspage">
						<?php the_time('j. F, Y'); ?> <?php the_time('H:i'); ?> av <?php the_author(); ?> <?php wp_link_pages(array('before' => '<p><strong>Sider:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
	  <?php endwhile; endif; ?>
         <?php edit_post_link(' Rediger side.', '<p>', '</p>'); ?>

</div>
    Thread Starter xrun

    (@xrun)

    Yes, that did the trick. Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘2×3 rectangular post list layout’ is closed to new replies.

Tags