• I have slightly modified the following code from the theme Gespaa 2:

    <?php
    get_header();

    if ($posts) { $pcount_lp = sizeof($posts); foreach ($posts as $post) {start_wp();?>
    <div class="entry">
    <?php
    //the_time('l, F j, Y');
    the_date('','<h2 class="entrydate">','</h2>');

    ?>
    <h3 class="entrytitle" id="post-<?php the_ID(); ?>">" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></h3>
    <div class="entrybody">
    <?php the_author() ?> wrote this <?php inner_time_of_day(abs(strtotime($post->post_date))); ?>, <?php the_time() ?>:
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/line_dotted.gif" align="top"/>
    <?php the_content();?>
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family:Arial; font-size:11px" bordercolor="#111111" width="100%">
    <tr>
    <td valign="top">
    <p class="comments_link"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/file.gif" title="file" alt="*" />
    <?php _e("Filed under:"); ?> <?php the_category(',') ?></td>
    <td align="right" valign="top">
    <p class="comments_link"><?php
    $comments_img_link = '<img src="' . get_stylesheet_directory_uri() . '/images/comments.gif" title="comments" alt="*" />';
    comments_popup_link('No Comments', $comments_img_link . ' 1 Comment', $comments_img_link . ' % Comments');
    ?>

    <?php
    if ($pcount_lp == 1){
    comments_template();
    } ?></td>
    </tr>
    </table>
    </div>
    </div>
    <?php }?>
    <?php } else { // end foreach, end if any posts ?>
    <div class="entrybody">Sorry, no posts matched your criteria.</div>
    <?php } ?>
    </div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    And the stylesheet code:


    img.entry {
    float : right;
    margin-left : 4px;
    margin-right : 4px;
    margin-top : 4px;
    margin-bottome : 16px;
    {

    I’m trying to float a small image in the top-right corner. It does go to the top-right corner, but it overlaps the comments links. In other words, the main entry doesn’t know how tall the image is and only takes on the height of the text portion, so the image is like in the background.

    Another quick question:

    How do I get next/prev links (next page, previous page, etc) up. It seems to have disappeared.

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Well right away I can see your CSS closing bracket isn’t correct – } (you have two { ones).

    One. A floated element must have its width defined in the CSS in order to comply with the W3C rec. A failure in this regard will cause instability in rendering. Two. The margins for surrounding text need should not be set from the floated object which is outside the normal document flow . It needs to be pushed off from the parent container plus the offset.

    Thread Starter eli

    (@eli2k)

    I fixed the bracket, but there’s still a problem.

    @root – I have no idea what you just said. :-/ Do you know any resources where I can learn more about this div stuff? Maybe that will help me understand what’s going on, because I don’t know what’s happening to the template right now.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Aligning an image correctly’ is closed to new replies.