• Resolved orbital2000

    (@orbital2000)


    Ok, simple issue (should be) but I can’t figure this out. I’m designing a custom blog index page that displays the most recent five posts, with a post image to the left of each. I’d like to separate each post with a gray dotted line.

    THE ISSUE: When I add the following code, my first blog post excerpt gets shoved down beneath the footer. Posts 2-5 display perfectly, with the divider line. I think it has something to do with the “clear” element, because when I play with using “clear: right”, for example, the top post stays in place, but the lines get all jumbled together at the top of the page.

    Here’s my html – <div class=”divider”> is my gray dotted line div.

    <div class="divider"></div>
    
    <div class="post_content">
    
    	<b><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></b>
    
    	<div class="stamp"><?php the_time('F jS, Y') ?><!-- by <?php the_author() ?> --> | <?php comments_popup_link(
    	'No Comments »', '1 Comment »', '% Comments »'); ?></div> 
    
    	<div class="excerpt"><?php if ($post->post_excerpt != "" ) {the_excerpt();}else {the_content_rss('', FALSE, '', 60);}
    	?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> READ MORE</a>
    	</div><!--end excerpt-->   
    
    </div><!--end post-content-->

    Here’s my CSS:

    .divider {
    border-bottom:1px dotted;
    color:#C0C0C0;
    margin-bottom:10px;
    margin-left:14px;
    margin-right:14px;
    padding:0px 0px 10px 0px;
    clear:both;
    }

    Any thoughts???

Viewing 9 replies - 1 through 9 (of 9 total)
  • Can you link to a page with the problem?

    Thread Starter orbital2000

    (@orbital2000)

    No, I’m running it on my local server (XAMPP):(

    Maybe there’s an incorrectly nested element somewhere, try the code less the header and footer calls (maybe place a wrapper round the elements when doing so), and see if a similar problem occurs.

    Thread Starter orbital2000

    (@orbital2000)

    Great advice – I’ll give that a shot

    Thread Starter orbital2000

    (@orbital2000)

    Alright, I’ve tried many variations on the coding and can’t figure this out. Below is what I have thus far. I’ve been renaming the divs, so excuse the unclear structure.

    <?php
    /*
    Template Name: BlogTwo
    */
    ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    
    	<head profile="https://gmpg.org/xfn/11">
    		<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    		<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    		<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    		<?php wp_head(); ?>
    	</head>
    
    	<body>
    
            <div id="blog_wrapper">
    
    <div id="header">
    </div>
    
    <div id="blog_body_wrap">
    
    <div id="navigation">
    <div id="links"><ul>
    <li><?php wp_list_pages('orderby=id&include=175,177,180,182,184,186&title_li=&hierarchical=0'); ?>
    </li>
    </ul></div><!--end links-->
    </div><!--end navigation-->
    
    <div id="blog_wrap">
    
    <div id="post_wrap">
    
    			<!--This section is currently pulling category ID #1, and can be switched by changing the cat=1 to show whatever category ID you would like in this area.-->
    
    			<div class="post_wrap">
    			<h2 class="heading">Recent Posts</h2>
    
                <?php
    // page id 21 will get category ID 12 posts, page 16 will get category 32 posts, page 28 will get category 17 posts
    if (is_page('5') ) {
    $cat = array(3);
    } elseif ( is_page('') ) {
    $cat = array();
    } elseif ( is_page('') ) {
    $cat = array();
    } else {
    $cat = '';
    }
    
    $showposts = 5; // -1 shows all posts
    $do_not_show_stickies = 1; // 0 to show stickies
    $args=array(
       'category__in' => $cat,
       'showposts' => $showposts,
       'caller_get_posts' => $do_not_show_stickies
       );
    $my_query = new WP_Query($args); 
    
    ?>
    
    	<?php if( $my_query->have_posts() ) : ?>
    
    		<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    			<?php
    			//necessary to show the tags
    			global $wp_query;
    			$wp_query->in_the_loop = true;
    			?>
    <div class="post_img">
                               <?php
    if ( has_post_thumbnail() ) {
    	// the current post has a thumbnail
    } else {
    	// the current post lacks a thumbnail
    }
    ?>
    <?php the_post_thumbnail(); ?>
    </div><!--end post_img-->
    
    <div class="divider"></div>
    
    <div class="post_content">
    
    	<b><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></b>
    
    	<div class="stamp"><?php the_time('F jS, Y') ?><!-- by <?php the_author() ?> --> | <?php comments_popup_link(
    	'No Comments »', '1 Comment »', '% Comments »'); ?></div> 
    
    	<div class="excerpt"><?php if ($post->post_excerpt != "" ) {the_excerpt();}else {the_content_rss('', FALSE, '', 60);}
    	?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> READ MORE</a>
    	</div><!--end excerpt-->   
    
    </div><!--end post-content-->
    
    		<?php endwhile; ?>
    
    	<?php else : ?>
    
    		<h2 class="center">Not Found</h2>
    		<p class="center">Sorry, but you are looking for something that isn't here.</p>
    		<?php get_search_form(); ?>
    
    	<?php endif; ?>
        </div>
        </div>
    
    </div><!--end homepage_left_wrap-->
    
    <div id="sidebar">
    
    		<ul>
    			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
    					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    			<li>
    				<?php get_search_form(); ?>
    			</li>
    
    			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
    			<li><h2>Author</h2>
    			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
    			</li>
    			-->
    
    			<?php if ( is_404() || is_category() || is_day() || is_month() ||
    						is_year() || is_search() || is_paged() ) {
    			?> <li>
    
    			<?php /* If this is a 404 page */ if (is_404()) { ?>
    			<?php /* If this is a category archive */ } elseif (is_category()) { ?>
    			<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>
    
    			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
    			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for the day <?php the_time('l, F jS, Y'); ?>.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
    			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for <?php the_time('F, Y'); ?>.</p>
    
    			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
    			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for the year <?php the_time('Y'); ?>.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
    			<p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
    			<p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives.</p>
    
    			<?php } ?>
    
    			</li>
    		<?php }?>
    		</ul>
    
    		<ul>
    			<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
    			<li><h2>Archives</h2>
    				<ul>
    				<?php wp_get_archives('type=monthly'); ?>
    				</ul>
    			</li>
    			<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
    		</ul>
    
    		<ul>
    			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
    				<?php wp_list_bookmarks(); ?>
    
    				<li>
    					<h2>Meta</h2>
    					<ul>
    						<?php wp_register(); ?>
    						<li><?php wp_loginout(); ?></li>
    						<li><a href="https://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
    						<li><a href="https://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
    						<li><a href="https://www.ads-software.com/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
    						<?php wp_meta(); ?>
    					</ul>
    				</li>
    			<?php } ?>
    
    			<?php endif; ?>
    		</ul>
            </div><!--end sidebar-->
              </div><!--end homepage_body_wrap-->
    <?php get_footer(); ?>

    Can’t tell by looking (formatting), but using Notepad++’s search count feature it reported 14 opening DIVs, and 13 closing DIVs …

    Thread Starter orbital2000

    (@orbital2000)

    You’re right – I’ll investigate and let you know what I find.

    Thanks for the catch…

    Thread Starter orbital2000

    (@orbital2000)

    The closing body tag is in the footer.php file, so that accounts for the missing closing DIV.

    Still stumped….

    Thread Starter orbital2000

    (@orbital2000)

    Resolved—

    I had the dotted line DIV in between the post image and post content DIVs. I moved it to occur before the post image div, and it fixed my problem.

    t310s- thanks for looking into this for me.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Dotted Line Between Posts Throws Page Out of Whack’ is closed to new replies.