Support » Themes and Templates » Image alignment dilemma

  • Resolved ronchicago


    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>
Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael


    Forum Moderator

    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…

    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;

    a link to span-20…

    a link to problem span-8…



    Forum Moderator

    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.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Image alignment dilemma’ is closed to new replies.