Positioning The Loop content

  • destes1

    (@destes1)


    18 years ago

    I’m having a problem with my Loop content. I am absolute positioning my columns and boxes inside a parent div. Everything is positioned the way I wnat, but all of my posts in my center container are ending up on top of each other, up at the top of the container. It seem to have something to do with the absolute position of that container. If i take that out then all of the posts follow each other in the correct order, but my container isn’t in position anymore.

    I’m developing on a local host installation, so I don’t have the theme online anywhere, Here’s the relative CSS and index.php code. I hope this is enough to give you an idea of how to correct this, please let me know if there is anymore that might help to figure this out.

    index.php
    <div class=content>
    <div class="post" id="post-<?php the_ID(); ?>">

    <h1 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>

    <?php the_content(__('(more...)')); ?>

    <div class="meta">
    Posted by <?php the_author() ?> | In catagories <?php the_category(',') ?> | On <?php the_time('l, F jS, Y') ?> | <?php edit_post_link(__('Edit this post:')); ?>
    </div>
    <div class="feedback">
    <a href="<?php wp_link_pages(); ?></a>
    <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
    </div>

    </div>
    </div>

    Here’s the css for the relative parts,

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-image: url(LIMESTN.JPG);
    color: #000000;+
    background-attachment: fixed;
    }
    #main {
    width: 900px;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    color: #000000;
    }
    .content {
    margin-left: 192px;
    margin-bottom: 10px;
    margin-top: 210px;
    width: 510px;
    display: block;
    position: absolute;
    }
    .post {
    line-height: 150%;
    background-color: #AC6551;
    border: 1px solid #aa2310;
    padding-right: 10px;
    padding-left: 10px;
    }

    I’m still kinda new to CSS and PHP but have done other coding before, so I’m still learning. Thanks for everyones time and help.

    Dale.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter destes1

    (@destes1)

    Here’s a link to a jpeg of what it’s looking like, just to help with the understanding of what it’s doing.

    https://daleestes.com/zenphoto/index.php?album=Random+Images&image=CSSPosition.jpg

    Thanks,
    Dale.

    I was having some problems with a similar issue and if I recall, when you use Absolute positioning it ignores anything except the parent container. So you would have to set a different absolute position for each item you want.

    For example, you have your content class at 192 from the left and 210 from the top. Each time you use that class it will put the object in that position. That is why you get the overlap.You would have to do something like content1, content2, etc and give each a different location.

    Or you can use relative positioning.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Positioning The Loop content’ is closed to new replies.

Tags