Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    PHP/CSS/Wordpress Grid

    Hello all,

    I know this isn't a Wordpress forum, but I've seen some great responses here from people tackling WP problems. Here's my issue. I have a site that displays a group of 9 thumbnails in a grid. The problem is the grid.

    I'm showing 9 thumbnails in rows of 3. I'll get the first row fine, then the second row will have a big space where the first image should be. Then the next row will be fine, but they'll be a forth row with one image. Everything is spread all over the place. I am not quite clear how WP creates the grid. If it was static I'd have no problem laying the stuff out in CSS, but I don't quite get how WP pipes out the results. Here's the PHP and then the CSS.

    PHP Code:
     <?php $my_query = new WP_Query('category_name=Videos&showposts=9');
      while (
    $my_query->have_posts()) : $my_query->the_post();
      
    $do_not_duplicate[] = $post->ID ?>


                      <?php                    
                            $video 
    get_post_meta($post->ID"video_value"true);
                            
    $thumbnail get_post_meta($post->ID"thumbnail_value"true);
                    
    ?>
                    
            
        <div id="video">
        
            <a  title=<?php the_title(); ?> rel="vidbox" href="<?php echo $video?>">
            <img width="120" height="90" src="<?php echo $thumbnail?>" /></a>

            <h2><?php the_title(); ?></h2>
            <p><?php the_excerpt(); ?></p>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">(Transcript...)</a>
        </div>
        
            <?php endwhile;?>
    Code:
    #video{
    margin: 30px 64px 10px 0px;
    padding:0px;
    float:left;
    width:120px;
    }

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Probably more of a layout (html/css) issue than PHP. All the PHP is doing is looping through results and dumping out divs with contents. There's no "grid" at all. It's just floated divs. A link to a working example would be most useful for debugging layout.

    One thing I notice is that you're building multiple divs with the same ID: video. IDs should be unique per page. Perhaps switch it to a class instead.
    Are you a Help Vampire?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •