WordPress.org

Forums

Basic CSS question (8 posts)

  1. virgild
    Member
    Posted 5 years ago #

    I'm sort of confused. I know how to style the first or last child of a list but how about a group. For example I have a 900px container and in it I'm displaying my excerpts from blog posts, each in a div class "block" about 290px wide and a margin-right of 20px to create some space between them. 3 blocks should be in a row but the last ones go beneath because of the margin right

    How would I remove the margin-right from those? Not sure if that's possible with php generated divs

  2. Michael
    Forum Moderator
    Posted 5 years ago #

    not possible just with css.
    you could run a counter in the loop and add an etra class to every third "block".

  3. virgild
    Member
    Posted 5 years ago #

    Oh I didn't know about that. You mean like how I would style the first post differently?

  4. Michael
    Forum Moderator
    Posted 5 years ago #

    exactly, only that you would check if the counter equals 3, and then reset the counter and count on.

    structure:

    <?php
    if(have_posts()) :
    $counter=1;
    while(have_posts()) : the_post(); ?>
    <div class="block <?php if(%counter == 3) { echo ' last'; $counter=0;  } ; $counter++; ?>">
    <!-- html and php to display the excerpts -->
    </div>
    <?php endwhile; endif; ?>

    (untested)

  5. Jonas Grumby
    Member
    Posted 5 years ago #

    You can use

    overflow: hidden;

    in the CSS of your 900px container and make either your blocks or your margins smaller so that the total width does not exceed 900 plus the width of the margin-right.

  6. virgild
    Member
    Posted 5 years ago #

    ok I tested it an I get

    Parse error: syntax error, unexpected '%'

    on this line
    <div class="block_two <?php if(%counter == 3) { echo ' last'; $counter=0; } ; $counter++; ?>">

  7. Michael
    Forum Moderator
    Posted 5 years ago #

    typo, should read
    <div class="block_two <?php if($counter == 3) { echo ' last'; $counter=0; } ; $counter++; ?>">

  8. virgild
    Member
    Posted 5 years ago #

    Wow it works!!! Php is so flexible :) Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.