Forums

[resolved] Unexpected list floating problems (5 posts)

  1. nnparisi
    Member
    Posted 1 year ago #

    I'm using a template to have one of my pages list the thumbnail, title, and link of all its child pages.

    http://jensbaking.thewingedheart.com/menu/

    Each list item is inline and floated left, but instead of making neat rows, one item seems to get caught and stuck on the right, forcing the rest of the items down to the next line. I've never had a strong grasp of inline/floating lists (and I don't really know PHP), so it might just be a problem from my lack of understanding.

    Here is my CSS:

    ul.portfolio_box {
    display: inline;
    }
    
    ul.portfolio_box li {
    list-style: none;
    display: inline;
    width: 220px;
    float:left;
    margin: 7px;
    }
    
    .portfolio_caption {
    text-align: center;
    }
    
    .portfolio_caption a {
    letter-spacing: 1px;
    font-weight: bold;
    text-decoration:none;
    }

    and here is the PHP generating the list of sub-pages:

    <ul class="portfolio_box">
    		<!-- start of .post -->
    		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    			<?php
          $args = array(
    	'post_parent' => $post->ID,
    	'post_type' => 'page',
    	'post_status' => 'publish',
    	'order' => 'ASC',
    	'orderby' => 'title',
    	'numberposts' => 0
    );
    	 $postslist = get_posts($args);
         foreach ($postslist as $post) :
            setup_postdata($post);
         ?>
    
                 <li>
    		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('pic-archive'); ?></a>
    		<div class="portfolio_caption"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                 </li>
    
         <?php endforeach; ?>
    			</ul>
                 <div class="divider"> </div>
             </div>
    
    		<!-- end of .post -->
    		<?php endwhile; endif;?>

    Thanks a bunch

  2. nnparisi
    Member
    Posted 1 year ago #

    Hm, it seems to have righted itself? Maybe something about my cache and clearing and mumblemumble....

  3. nnparisi
    Member
    Posted 1 year ago #

    Nevermind, my client added some more pages and it's back to acting strangely.

    At 8 pages/thumbnails, it had a problem. She added one more and the problem resolved, but when I unpublished one to make it back down to 8, the problem was still resolved.

    Now she has added a 10th page and things are acting up again. Page 9 is on row 3 all the way to the right, and page 10 is knocked down to a 4th row. Any ideas what could be causing this strange error?

  4. alchymyth
    The Sweeper
    Posted 1 year ago #

    seems to be caused by some of the caption texts going onto a second line:

    try giving a fixed height to the captions;
    something like:

    .portfolio_caption { height: 35px; }

  5. nnparisi
    Member
    Posted 1 year ago #

    This worked beautifully! Thanks so much alchymyth =)

Topic Closed

This topic has been closed to new replies.

About this Topic