Basic CSS question

  • virgild

    (@virgild)


    15 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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael

    (@alchymyth)

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

    Thread Starter virgild

    (@virgild)

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

    Michael

    (@alchymyth)

    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)

    Jonas Grumby

    (@ss_minnow)

    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.

    Thread Starter virgild

    (@virgild)

    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++; ?>">

    Michael

    (@alchymyth)

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

    Thread Starter virgild

    (@virgild)

    Wow it works!!! Php is so flexible ?? Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Basic CSS question’ is closed to new replies.