Jump to content

Blank Space on Home page

amber

By amber
in PHP Coding Help

 Share

Recommended Posts

amber Newbie

amber

Posted
Posted

My home page code is giving me a large blank space after the main content in my wordpress page. Then the other section of the page, which should flow after the main content, is actually going all the way to the bottom of my page after the sidebar. My website is bellingham.org, I will also include screenshots of our home page. Here is the code I have & screenshots:

 

<?php
/*
Template Name: Home Page
*/
?>

<?php get_header(); ?>
<?php get_sidebar(); ?>

<div id="mainContent">
 
    <div id="wpContent">
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
                    <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
    
                    <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
    
            <?php endwhile; endif; ?>
        
    </div>
    
    <div id="todoBlock">
    
        <div id="todoHeading">
            <span id="todoHeadingL">Things to Do</span>
            <span id="todoHeadingR"><a href="<?php bloginfo('url'); ?>/activities">View All »</a></span>
        </div>
        
        <?php
            $pages = query_posts(array('post_parent' => 2, 'post_type' => 'page', 'showposts' => 6, 'orderby' => rand));
            // Set an arbitrary variable to use to test if the photo should lfoat left or right
            $x=1;
            foreach($pages as $child) {
                // Get the Activity Title
                $todo = get_the_title($child->ID);
                // Get the PATH to the thumbnail image
                $post_image_id = get_post_thumbnail_id($child->ID);
                if ($post_image_id) {
                    $thumbnail = wp_get_attachment_image_src( $post_image_id, 'home-post-thumbnail', false);
                    if ($thumbnail) (string)$thumbnail = $thumbnail[0];
                }
                // Get the link to the Activity page
                $link = get_permalink($child->ID);
                
                // Check to see if we're floating left ($x is even) or right ($x is odd)
                if ($x % 2) {
                    // $x is odd, so we are floating left
                    $float = "float: left; ";
                } else {
                    $float = "float: right; ";
                }
        ?>
            
        <div style="<?php echo $float; ?>position: relative; background: url(<?php echo $thumbnail; ?>); width: 300px; height: 143px; border: 2px solid #1E326A; margin-bottom: 5px;">
            <div class="todoText"><a href="<?php echo $link; ?>"><?php echo $todo; ?></a></div>
        </div>            

        <?php
            ++$x;
        } ?>

    </div>

</div>

<div id="homelogo">

    <div id="maincontainer">

            <div id="leftcontainer">
                <div class="miniheading">Getting Around</div>
                <div id="transportation">
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/maps-icon.gif" /> <a href="transportation/maps/">Maps</a></p>
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ground-transportation-icon.gif" /> <a href="transportation/ground-transportation/">Ground Transportation</a></p>
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/airport-icon.gif" /> <a href="transportation/air-transportation/">Air Transportation</a></p>
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/water-transportation-icon.gif" /> <a href="transportation/water-transportation/">Water Transportation</a></p>
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/border-crossing-icon.gif" /> <a href="transportation/us-canada-border/">Border Crossing</a></p>
                </div>
            </div>
    
            <div id="rightcontainer">
                <div class="miniheading">Insider Blogs</div>
                <div id="blog">
    
                     <?php query_posts($query_string . '&cat=1&posts_per_page=2'); ?>
                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                    
                     <div class="post">
                         
                         <!-- Display the Title as a link to the Post's permalink. -->
                         <a class="title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a><br />
                        
                         <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
                         <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
                         
                          <div class="entry">
                            <?php the_excerpt(); ?>
                          </div>
    
                     </div> <!-- closes the first div box -->
                    
                     <?php endwhile; else: ?>
                     <p>Sorry, no posts matched your criteria.</p>
                     <?php endif; ?>
                     
                     <div class="fltrt"><a href="http://www.bellingham.org/category/blog/insider-blogs/">Visit Insider Blogs »</a></div>
                 
                </div>
            </div>
    </div>
    </div>

    <div id="bottomhomediv"></div>
    
    
</body>
</html>

 

 

Link to comment
Share on other sites
amber Newbie

amber

Posted
  • Author
Posted

I went through all my wpcontent files and didn't find anything with <div style="clear:both;"></div>. Any other suggestions? Or do you know what file this might be in specifically? Here is the code for WP content sections I found and I also found one reference to div style. See below for code.

 

On my home.php file this is the WP content section

<!-- WP CONTENT START -->
    <?php // Query for posts in the "Blog" category
    query_posts( 'cat=1' );
    ?>

    <p class="heading"><?php echo get_the_title(8) ?></p>

    <?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

            <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                <small><?php the_time('F jS, Y') ?> by <?php the_author() ?></small>

                <div class="entry">
                    <?php the_content('Read the rest of this entry »'); ?>
                </div>

                <p class="postmetadata"><?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
            </div>

        <?php endwhile; ?>

        <div class="navigation">
            <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
            <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
        </div>

    <?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; ?>
<!-- WP CONTENT END -->

 

In my index.php file here is the WP Content Section:

<!-- WP CONTENT START -->
        <?php if (have_posts()) : ?>

         <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>

        <p class="heading"><?php single_cat_title(); ?></p>

        <!--<p><?php echo category_description( $category ); ?> </p>-->

        <div class="navigation">
            <div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
            <div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
        </div>
        
        <br />

        <?php while (have_posts()) : the_post(); ?>
        
        <div class="borderradius">
        
            <div class="date"><?php the_time('l, F jS, Y') ?></div>
            <div><a class="title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></div>
            <?php if ((get_post_meta($post->ID, 'author', true)) || (get_post_meta($post->ID, 'publication', true))) : ?>
                <div style="text-transform: uppercase;"><?php if (get_post_meta($post->ID, 'author', true)) : ?><?php echo get_post_meta($post->ID, 'author', true); ?><?php endif; ?><?php if ((get_post_meta($post->ID, 'author', true)) && (get_post_meta($post->ID, 'publication', true))) : ?>—<?php endif; ?><?php if (get_post_meta($post->ID, 'publication', true)) : ?><?php echo get_post_meta($post->ID, 'publication', true); ?><?php endif; ?></div>
            <?php endif; ?>
            <div class="dotted"></div>
            <em><?php the_excerpt() ?></em>
             
        </div>

        <?php endwhile; ?>

        <div class="navigation">
            <div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
            <div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
        </div>

    <?php else : ?>

        <h2 class="center">Not Found</h2>
        <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    <?php endif; ?>

<!-- WP CONTENT END -->

 

The only div style reference I find is on my 1colpage.php:

 

<?php

/*

Template Name: One column

*/

?>





<?php get_header(); ?>



 <!-- <div id="mainContent"> -->

 

<div style="padding: 10px 20px 0 20px;">



<div id="breadcrumbs"><?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?></div>

 

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>



                <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>



                <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>



        <?php endwhile; endif; ?>

        

    <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>



<?php if (comments_open( $post_id ))  { ?>

    <div class="commentsbox">

            <?php comments_template(); ?>

    </div>

<?php } ?>



</div>



<!--  </div> -->



<?php get_footer(); ?>



</div>

</body>

</html>
 

Link to comment
Share on other sites
tryingtolearn Regular Member

tryingtolearn

Posted
Posted

 

 

Any other suggestions? Or do you know what file this might be in specifically? 

Not really, not sure how you are putting all the content together and I dont use wordpress...

 

I would check around how that opening paragraph is getting populated. 

looks like a function called have_posts() or the_content()

 

I would start with how or where that opening paragraph is being added.

The line is right between that wpContent and the todoBlock divs. 

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

The DIV that tryingtolearn mentioned above IS in the code of your page. That is probably at least part of the problem. 

 

 

Just looking at the page and not the code, it appears to me that the content is too wide to fit, therefore it is being pushed below the right-hand section. You need to expand the width of the area where the content or reduce the container that holds that content.

 

You can try widening these divs

 

<div id="mainContent">
<div id="wpContent">

Check your stylesheet for references to those IDs.

 

This appears to be the container for the section that is pushed to the bottom.

 

<div id="maincontainer">
Link to comment
Share on other sites
amber Newbie

amber

Posted
  • Author
Posted

Thanks for the input Guru!  I am assuming the main content, wpcontent & maincontainer widening is within my stylehome.css file? I tried tweaking some of the different widths within that code & it didn't bump it up. I did notice when I take out the sidebar completely, it bumps it up. So I think you are on the right track. I pasted the original code to stylehome.css file below before I started changing things. Do you have any suggestions on where & what to change?

 

Here is that code:

/* Use this page background if it's the home page */

/*body  {
    background-image: url(images/bg_home.gif) !important;
}*/

@font-face {
    font-family: 'LeagueGothic';
    src: url('fonts/LeagueGothic-Regular-webfont.eot');
    src: url('fonts/LeagueGothic-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LeagueGothic-Regular-webfont.woff') format('woff'),
         url('fonts/LeagueGothic-Regular-webfont.ttf') format('truetype'),
         url('fonts/LeagueGothic-Regular-webfont.svg#fonts/LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Home page sidebar */
.twoColFixRtHdr #sidebarhome {
    float: right;
    width: 300px;
    background-color: transparent;
    padding: 15px 20px 10px 0px;
    margin: 0;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget {
    border-width: 1px;
    border-color: #999;
    border-style: solid;
    margin-bottom: 20px;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .widgettitle {
    border-bottom: 1px #999 solid;
    background-color: #1B4479;
    margin: 0;
    color: #67A8CE;
    font-family: 'LeagueGothic', sans-serif;
    font-size: 34px;
    text-transform: lowercase;
    padding: 2px 10px;
    height: 45px:
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .textwidget {
    padding: 5px;
    overflow: auto;
    height: 1%;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .textwidget h3 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #298023;
    font-weight: bold;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .textwidget img {
    border: 0px;
    margin: 5px;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .widgettitle .rsswidget {
    color: #67A8CE;
    text-decoration: none;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .widgettitle .rsswidget img {
    display: none;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget ul li {
    list-style: none;
    ;
    margin-bottom: 10px;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .rss-date {
    display: block;
    font-weight: bold;
}

.twoColFixRtHdr #mainContent {
    background: url(images/home-content-bg.gif) top no-repeat !important;
}


.twoColFixRtHdr #mainContent #todoBlock {
    width: 620px;
    height: 550px;
    padding: 0;
}


.twoColFixRtHdr #mainContent #todoBlock #todoHeading {
    background: #1b4479;
    width: 98.5%;
    height: 43px;
    margin: 0 0 10px 0;
    padding: 10px 0px 0px 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 34px;
    font-family: 'LeagueGothic', sans-serif;
    color: #67A8CE;
}

.twoColFixRtHdr #mainContent #todoBlock #todoHeading #todoHeadingL {
    font-family: 'LeagueGothic', sans-serif;
    font-size: 34px;
    text-transform: lowercase;
    color: #67A8CE;
    float: left;
}

.twoColFixRtHdr #mainContent #todoBlock #todoHeading #todoHeadingR a {
    padding: 9px 20px 0 0;
    font-family: 'LeagueGothic', sans-serif;
    font-size: 18px;
    text-transform: lowercase;
    text-align: right;
    color: #67A8CE;
    float: right;
}

.twoColFixRtHdr #mainContent #todoBlock .todoText a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 300px;
    font-weight: bold;
    color: #53782f;
    text-decoration: none;
    background: url(images/text-bg-gradient.png) left no-repeat;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
}

.twoColFixRtHdr #homelogo {
    background: url(images/content_bottom_bg.gif) bottom no-repeat !important;
    padding: 0px 20px 0px 20px;
}

.twoColFixRtHdr #homelogo #maincontainer {
    width: 620px;
}

.twoColFixRtHdr #homelogo #leftcontainer {
    float: left;
    width: 300px;
}

.twoColFixRtHdr #homelogo #rightcontainer {
    float: right;
    width: 300px;
}


.twoColFixRtHdr #homelogo .miniheading {
    background: #1B4479;
    padding: 5px 0px 0px 10px;
    margin: 0 0 10px;
    color: #67A8CE;
    font-family: 'LeagueGothic', sans-serif;
    font-size: 34px;
    text-transform: lowercase;
    height: 40px;
}

.twoColFixRtHdr #homelogo #transportation {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight:normal;
    text-decoration: none;
}

.twoColFixRtHdr #homelogo #transportation img {
    border-style: none;
    border-width: 0px;
    vertical-align: middle;
}

.twoColFixRtHdr #homelogo #blog .title {
    font-size: 18px;
    font-weight: bold;
}

.twoColFixRtHdr #bottomhomediv {
    height: 13px;
    background-image: url(images/bottom-home-div.gif) !important;
    background-repeat: no-repeat;
    clear: both;
}

.twoColFixRtHdr #socialmedia {
    height: 502px;
    background-image: url(images/home-page-bottom.png) !important;
    background-position: top !important;
    background-repeat: repeat-y;
    color: #000;
    font-size: 10px;
    padding: 0px 20px 0px 20px;
    margin: 0px;
    clear: both;
}

.twoColFixRtHdr #socialmedia #section1 #column1 .header, .twoColFixRtHdr #socialmedia #section1 #column2 .header, .twoColFixRtHdr #socialmedia #section2 #column3 .header, .twoColFixRtHdr #socialmedia #section2 #column4 .header {
    border-width: 0px;
    background-color: #759a3e;
    /* margin: 5px; */
    color: #1B4479;
    font-family: 'LeagueGothic', sans-serif;
    font-size: 23px;
    padding: 4px 5px 2px 5px;
}

.twoColFixRtHdr #socialmedia #section1 {
    float: left; /* Sets this section to the left */
    width: 470px;
    height: 452px;
    margin-top: 20px;
}

    .twoColFixRtHdr #socialmedia #column1 {
        float: left; /* Sets this column to the left inside its section */
        width: 215px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .twoColFixRtHdr #socialmedia #column2 {
        float: right; /* Sets this column to the right inside its section*/
        width: 215px;
        padding-right: 10px;
        padding-left: 10px;
    }

.twoColFixRtHdr #socialmedia #section2 {
    float: right; /*Sets this section to the right */
    width: 470px;
    height: 452px;
    margin-top: 20px;
}

    .twoColFixRtHdr #socialmedia #column3 {
        float: left; /* Sets this column to the left inside its section */
        width: 215px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .twoColFixRtHdr #socialmedia #column4 {
        float: right; /* Sets this column to the right inside its section*/
        width: 215px;
        padding-right: 10px;
        padding-left: 10px;
    }

.twoColFixRtHdr #socialmedia #picasathumbs {
    padding: 5px 11px 0px 11px;
}

.twoColFixRtHdr #socialmedia #picasathumbs img {
    margin: 4px;
    border-color: #fff;
    border-style: solid;
    border-width: 2px;
}

.twoColFixRtHdr #socialmedia #youtubethumbs {
    padding: 0px 7px 0px 7px;
}

.twoColFixRtHdr #socialmedia #youtubethumbs img {
    border-style: none;
    border-width: 0px;
    padding: 9px 0 9px 0;
}

#twitter_update_list {
    font-size: 11px;
    line-height: 21px;
    list-style: none;
    margin: 0;
    padding: 5px 0 5px 0;
}

#twitter_update_list li {
    padding-bottom: 7px;
    margin-bottom: 9px;
}

.twoColFixRtHdr #footer {
    height: 26px !important;
    background-image:url(images/home-footer_bg.png) !important;
    padding-top: 12px !important;
}

Link to comment
Share on other sites
tryingtolearn Regular Member

tryingtolearn

Posted
Posted

clear:both is going to make the element drop below any floated elements before it in the document.

Since the sidebar is floated it is dropped down below the side bar

(Also why when you remove the floated sidebar it jumps back up).

 

So given that, you can make it wider but if the sidebar is floated and you leave the clear:both div in there, in theory, it will (Or maybe I should say it SHOULD) still drop to the bottom of the floated element before it - being the sidebar.

 

How is this text being added to your site

 

Visit Bellingham, Washington for a fun getaway filled with magnificent scenery, a culture of outdoor recreation, Western Washington University, the Alaska Ferry, the Canadian border, Mt. Baker, the Salish Sea, local food, spirits, art and music. These are all part of the genuine Bellingham Experience. We encourage you to simply Be in Bellingham and our surrounding Whatcom County.

This site is loaded with travel info including lodging, restaurants, things to do, local businesses, resources and insider advice for a personal visit, group convention, or general community information.

We are Bellingham Whatcom County Tourism, a local non-profit association dedicated to serving visitors. Our main Visitor Center at I-5 Exit 253, 904 Potter St. in Bellingham is open 9 a.m. to 5 p.m. daily (Pacific Standard Time, excluding major holidays). Our downtown Bellingham Info Center at 1306 Commercial St. is open Mon – Sat. 11 a.m. to 3 p.m. We are happy to be of assistance on your journey.

 

From the database or is it just static text?

Link to comment
Share on other sites
amber Newbie

amber

Posted
  • Author
Posted

Found that code, now I just have to find where it actually is located in my files. Weird thing is that code is on all the pages when I view page source but it doesn't affect the other pages in the same way. Thanks for the input, I will keep working on it I guess lol

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.