WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help with the loop & CSS alignment issues (8 posts)

  1. achaplin
    Member
    Posted 2 years ago #

    Please tell me what I'm doing wrong! I'm working on a custom theme and I'm having an alignment issue. Unfortunately I can not provide a link as the blog is currently on a local host. I started with an HTML / CSS layout. I added in the loop. The layout was designed to have a post icon on the left with the title next to it, and the post information below. Both the title and post are indented next to the icon. The first post shows fine. The second, the icon is indented as if it is in the <div> from the previous post. The Title and content are flush left, where the icon should display. Subsequent posts, the icon, title, and post are all flush left wheras the icon should be left, but the title and post should float next to it. Here is the code:

    [code moderated - please follow http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

  2. achaplin
    Member
    Posted 2 years ago #

  3. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    look at the </div> in line 18 for instance, which will be executed for each post in the loop - it does not seem to belong to anything.

    general: make sure that the opening and closing html tags are balanced in the loop.

  4. achaplin
    Member
    Posted 2 years ago #

    I reviewed line 18 as you suggested. This </div> closes the <div> that begins on line 11.

  5. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    I reviewed line 18 as you suggested. This </div> closes the <div> that begins on line 11.

    that is what i mean: line 11 is before the loop - therefore you will have a problem if you have more than one post.

    http://codex.wordpress.org/The_Loop

  6. achaplin
    Member
    Posted 2 years ago #

    Thanks, now I understand. Any suggestions as to where the the <div> should start? This doesn't seem to work:

    <?php
    if (have_posts()) :
      while (have_posts()) : the_post(); ?>
    <div class="posticonbox" id="posticonbox">
    <?php if (function_exists('get_cat_icon'))
          get_cat_icon('fit_width=50&fit_height=50&small=true&class=reflect');
    ?>
    </div>
  7. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    This doesn't seem to work

    what does not work with your example?
    is the output unexpected?
    does it break the design?
    or ??

    Any suggestions as to where the the <div> should start?

    I haven't looked too closely into your code,
    but if the div is to wrap all posts then it needs to start before the loop, and get closed after the loop;

    if the div is to be for each post, then it needs to be opened and closed within the loop;

    or if the div is to be shown only once before all posts, then it needs to be opened and closed before the loop.

  8. achaplin
    Member
    Posted 2 years ago #

    Thank You for pointing me in the right direction. After some trial and error I was able to fix the alignment. Unfortunately I've created some other issues. Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic