WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image alignment dilemma (5 posts)

  1. ronchicago
    Member
    Posted 4 years ago #

    i copied code from a template of mine that allows 150x150px images to be loaded within a "span" that accommodates four 150s. once the image total exceeds the four span-limit the image kicks to another row.

    so i copied this code into a span that accommodates two 150s but instead of kicking down into another row the pics bunch up = three images overlap.

    not sure what controls this behavior. thinking it is the css but i don't know what i am talking about.

    here is the code...

    <div class="entry-cat">
        		<?php foreach((get_the_category()) as $category) { ?>
    				<?php if( $category->cat_ID == $cat) { ?>
    					<h6>» <a href=" <?php echo get_category_link($category->cat_ID);?> "><?php echo $category->cat_name . ' '; ?></a></h6>
    				<?php } ?>
    			<?php } ?>
    			<hr />
        		<h6><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php $key="square"; echo get_post_meta($post->ID, $key, true); ?>" alt="" width="150" height="150" /></a></h6><br />
        		<h6 class="underlined"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>" class="title"><?php the_title(); ?></a></h6>
           </div>
  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    as there is no span in your code snippet, it may not reflect the code that is supposed to bunch your images.

    the behaviour might be controlled by the css -

    but i would need a link to comment more...

  3. ronchicago
    Member
    Posted 4 years ago #

    the above div sits in this div...
    <div class="column column span-20 colborder">

    the css for the div laying out correctly...

    /* BEGIN object category */
    .entry-cat {
    	float: left;
    	width: 19%;  /* was 25%   12/18/08  */
    	padding: 15px;
    	height:230px;

    a link to span-20... http://objects.designapplause.com/category/objects-tile/home-tile/home-furniture/

    a link to problem span-8... http://objects.designapplause.com/test-1/

  4. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    some part of the problem seems to be with the relative width of .entry-cat 19% which is now in a narrower container; if you set it to 125px, you get two images side-by-side, although a bit cramped - .span-8 seems to be too narrow for two images plus padding.

  5. ronchicago
    Member
    Posted 4 years ago #

    went to span-9 and changed width to 50% which fixes the layout. will fine-tune a bit later in development. thank you.

Topic Closed

This topic has been closed to new replies.

About this Topic