• Resolved bwilsonnet

    (@bwilsonnet)


    I created two new custom pages so that I could get rid of the sidebar and extend the post/content section of the page.

    When I did that I noticed the footer stretches outside of the boundaries of the page, and differs from the main page.

    I’ve scoured the internet for a solution and tried some things, but nothings worked. I know just enough about html/php to get me by.

    Any suggestions would be appreciated.
    Here’s the two pages.

    http://www.brittanywilson.net/2759-2

    http://www.brittanywilson.net/2013-reading

    If you notice on my about page if I don’t extend the content it doesn’t do that even though I’ve removed the sidebar (testing different codes), and it’s perfectly fine on the index page. I thought it might be something with the css, but I haven’t a clue in regards to that stuff.

    Thanks again for any help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • C W (VYSO)

    (@cyril-washbrook)

    The problem lies in the markup. As you can see when running your website through the W3C Validator, you have three extraneous </div> tags.

    What’s supposed to happen is that <div id="wrapper"></div> wraps around all of your body content. Instead, it’s closing off early, leaving the footer formatted incorrectly. You need to check the template that you’re using for those pages and carefully remove the superfluous </div> tags.

    (Note that the W3C Validator is making educated guesses about which </div> tags are the extraneous ones: they may or may not be the right ones to remove.)

    please post the full code of the custom page templates.
    http://codex.wordpress.org/Forum_Welcome#Posting_Code

    to stretch the content, you will need to adapt the CSS; for that you would need some specific CSS classes on those custom templates…

    Thread Starter bwilsonnet

    (@bwilsonnet)

    Thanks Cyril Wasbrook! I’d never heart of W3C Validator. Getting rid of all the </div > tags that were in the template did the trick.

    However now it’s styled different, oy lol -_-. It’s separated the wordpress info from the credit and before it was transparent with stylized lines around it. Any suggestions?

    here’s the new footer code I corrected

    <div style="clear:both;"></div>
    
    	<div id="footer">
    	<div id="footer-inner">
    
    		<p><?php bloginfo('name'); ?> <?php _e('is powered by','panorama'); ?> <a href="http://wordpress.org/">WordPress</a></p>
    
    	</div>
    
    	<div id="credit">
    
    		<p>Panorama Theme by <a href="http://themocracy.com/"><img style="vertical-align:-7px;" src="<?php bloginfo('template_directory'); ?>/styles/<?php them_activeStyleDir(); ?>/themocracy_icon.gif" />Themocracy</a></p>
    	</div>
    
    <?php wp_footer(); ?>
    </body>
    </html>

    and then here’s the css style sheet

    /*
    Theme Name: Panorama
    Theme URI: http://themocracy.com/2009/04/panorama-free-wordpress-theme/
    Description: 2 column theme, compatible with WP2.8 and threaded-comments - add your own header image - 6 backgrounds, left or right sidebar, link/hover colors, jQuery dropdown page menu, and twitter badge all fully customizable - licenced under the GPL. Language localization supported, DA, AR, DE, FR, IT, NL, ES, TR.
    Version: 2.1
    Tags: fixed-width, two-columns, white, theme-options, threaded-comments
    Author: Themocracy
    Author URI: http://themocracy.com/
    */
    
    body {
    margin: 0;
    padding: 0;
    color: #222;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100.1%;
    }
    
    #wrapper{
    width: 1000px;
    margin: 0px auto;
    padding: 0px;
    text-align:left;
    font-size: 78%;
    line-height:20px;
    }
    
    #header{
    height: 100px;
    padding: 0 0 0 20px;
    margin: 0;
    }	
    
    #container{
    padding: 0 21px 0 20px;
    }
    
    #headerimage{
    height:120px;
    }
    
    #topmenu{
    margin:0;
    padding:7px 0 0 0;
    }
    
    #content{
    clear:both;
    margin: 0px;
    padding: 10px 0 0 0;
    }
    
    #content2{
    clear:none;
    margin: 0px;
    padding: 0px 0 0 0;
    }	
    
    #footer {
    clear: both;
    margin: 0;
    padding: 0px 20px 14px 20px;
    text-align: center;
    font-size: 90%;
    }
    
    #footer-inner{
    background: #f2f2f2;
    height: 50px;
    border: 1px solid #ddd;
    }
    
    #footer p{
    margin:0;
    padding:15px 0;
    }
    
    #navigation{
    padding: 5px 15px;
    }
    
    #navigation div.fleft{
    float:left;
    }
    
    #navigation div.fright{
    float:right;
    }
    
    #credit{
    text-align:right;
    padding: 0 15px;
    }
    
    #credit p{
    margin:0;
    font-size:85%;
    }
    
    #credit p a, #credit p a:hover{
    font-weight:100;
    text-decoration:none;
    }
    
    /*  ********** default styles *********** */
    
    p, h1, h2, h3, h4, h5, h6{
    margin: 10px 0;
    padding: 0;
    }
    
    h1, h2, h3, h4, h5, h6 {
    font-family: tahoma, arial, helvetica, sans-serif;
    }
    
    h1{
    	font-size: 190%;
    }
    h2{
    	font-size: 160%;
    }
    h3{
    	font-size: 120%;
    }
    h4{
    	font-size: 110%;
    }
    h5{
    	font-size: 100%;
    }
    h6{
    	font-size: 70%;
    }
    
    a{
    font-weight:800;
    text-decoration:none;
    }
    a:hover{
    text-decoration:underline;
    }
    
    a img{
    border:0px;
    }
    
    hr{
    height:2px;
    margin:5px 0;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    }
    
    blockquote{
    padding: 10px 35px 5px 35px;
    margin: 3px 30px;
    background: #f4f4f4  url("images/quotes.gif") top left no-repeat;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    
    form{
    margin: 0;
    padding:0;
    }
    
    fieldset{
    padding:10px;
    margin:0;
    border:none;
    }
    
    legend{
    font-weight:800;
    }
    
    code{
    font-size: 95%;
    font-family: "Courier New", Courier, monospace;
    }
    
    td{
     vertical-align:top;
    }
    
    .aligncenter,
    div.aligncenter {
       display: block;
       margin-left: auto;
       margin-right: auto;
    }
    
    .alignleft {
       float: left;
    	 margin: 0 10px 0 0;
    }
    
    .alignright {
       float: right;
    	 margin: 0 0 0 10px;
    }
    
    .wp-caption {
       border: 1px solid #ddd;
       text-align: center;
       background-color: #f3f3f3;
       padding-top: 4px;
       margin: 5px 10px;
       /* optional rounded corners for browsers that support it */
       -moz-border-radius: 3px;
       -khtml-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
    }
    
    .wp-caption img {
       margin: 0;
       padding: 0;
       border: 0 none;
    }
    
    .wp-caption p.wp-caption-text {
       font-size: 11px;
       line-height: 17px;
       padding: 0 4px 5px;
       margin: 0;
    }
    
    /* Tabs  */
    
    .horizmenu{
    width: 100%;
    line-height:16px;
    background: #ccc;
    float:left;
    font-size:95%;
    }
    
    .horizmenu a{
    font-weight: 100;
    }
    
    .horizmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    .horizmenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    .horizmenu ul li a{
    display: block;
    background: #ccc;
    padding: 8px 15px;
    border-right: 1px solid #fff;
    color: #999;
    text-decoration: none;
    }
    
    * html .horizmenu ul li a{
    display: inline-block;
    }
    
    .horizmenu ul li a:link, .horizmenu ul li a:visited{
    color: #222;
    }
    
    .horizmenu ul li a:hover{
    background: #999;
    color: white;
    }
    
    .horizmenu ul li a:hover, .horizmenu ul li ul li a:hover{
     text-decoration:none;
    }
    
    .horizmenu ul li.current_page_item a, .horizmenu ul li.current_page_item ul li a{
    color:black;
    background: #a9a9a9;
    }
    
    .horizmenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }
    
    .horizmenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    .horizmenu ul li ul li ul{
    top: 0;
    }
    
    .horizmenu ul li ul li a{
    width: 150px;
    padding: 5px 8px;
    margin: 0;
    border-top-width: none;
    border-bottom: 1px solid #f2f2f2;
    }
    
    .horizmenu ul li ul li a:hover{
    background: #999;
    color: white;
    }
    
    .downarrow{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrow{
    position: absolute;
    top: 9px;
    right: 5px;
    }
    
    /* Headings */ 
    
    #surheader{
    color:white;
    text-align:right;
    padding: 0 14px 0 0;
    }
    
    #surheader p{
    margin: 4px 0;
    }
    
    #surheader a{
    color:white;
    font-weight:100;
    }
    
    form#searchform2{
    display: block;
    float:right;
    margin: 35px 14px 0px 5px;
    }
    
    #header h3{
    margin:  0;
    padding: 0 0 0 20px;
    }
    
    #header h3 a{
    font-weight:100;
    color: #fff;
    text-decoration: none;
    font-size: 260%;
    line-height:28px;
    }
    
    #header h3 a:hover{
    color: #fff;
    text-decoration: none;
    }
    
    #header h2{
    margin: 0;
    padding: 10px 0 5px 20px;
    font-weight:800;
    font-family:  arial, verdana, sans-serif;
    color: #ccc;
    font-size: 100%;
    letter-spacing: 1px;
    }
    
    h2#sectiontitle{
    font-size:140%;
    font-weight: 100;
    padding: 6px 6px 6px 10px;
    margin: 1px 5px 10px 5px;
    background: #f5f5f5;
    color: #444;
    }
    
    /* post styles */
    
    .post{
    margin: 0px 15px 18px 15px;
    padding: 10px 0px;
    background: #fff url("images/dots.gif") bottom left repeat-x;
    }
    
    .entry{
    margin: 0;
    padding: 0px 10px 3px 10px;
    }
    
    .entry2{
    margin: 0;
    padding: 0px 0px 0px 0px;
    }
    
    .post h2 {
    color: #333;
    font-size: 165%;
    font-weight:100;
    padding: 0 0 5px 5px;
    margin: 5px 0 5px 0;
    background: #fff url("images/dots.gif") bottom left repeat-x;
    }
    
    .post h2 a{
    color: #333;
    text-decoration:none;
    font-weight:100;
    }
    
    .post h2 a:hover{
    text-decoration:none;
    color: #333;
    }
    
    .postmetadata{
    font-size:90%;
    padding: 1px 8px 1px 5px;
    margin: 0;
    background: #f5f5f5;
    border-left: 3px solid #eee;
    border-right: 3px solid #eee;
    }
    
    .postmetadata p{
    line-height: 18px;
    padding: 0;
    margin: 2px 0;
    }
    
    .authormeta{
    font-size:90%;
    padding: 0px;
    margin: 0;
    }
    
    .commentsmeta{
    float:right;
    font-size:90%;
    padding: 0px;
    margin: 0;
    }
    
    /* Comments > WordPress 2.6 */
    
    ol.commentlist {
    list-style:none;
    margin:0;
    padding:0;
    text-indent:0;
    }
    
    ol.commentlist li {
    border:1px solid #d3d3d3;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    height:1%;
    margin:0 0 10px;
    padding:5px 7px 5px 57px;
    position:relative;
    }
    
    ol.commentlist li div.comment-author {
    padding:0 160px 0 0;
    }
    
    ol.commentlist li div.vcard {
    font:800 12px/1.9  verdana, arial, helvetica, sans-serif;
    }
    
    ol.commentlist li div.vcard cite.fn {
    font-style:normal;
    }
    
    ol.commentlist li div.vcard cite.fn a.url {
    text-decoration:none;
    }
    
    ol.commentlist li div.vcard img.avatar {
    border:2px solid #eee;
    top:7px;
    left:7px;
    position:absolute;
    }
    
    ol.commentlist li div.comment-meta {
    font:100 11px/1.9 verdana, arial, helvetica, sans-serif;
    position:absolute;
    top:5px;
    right:10px;
    text-align:right;
    }
    
    ol.commentlist li div.comment-meta a {
    color:#333;
    text-decoration:none;
    }
    
    ol.commentlist li p {
    font:normal 12px/1.5 verdana, arial, helvetica, sans-serif;
    margin:0 0 1em;
    }
    ol.commentlist li ul {
    font:normal 12px/1.4  verdana, arial, helvetica, sans-serif;
    list-style:square;
    margin:0 0 1em;
    padding:0;
    text-indent:0;
    }
    
    ol.commentlist li div.reply {
    color:#374C76;
    font:bold 12px/1.4 verdana, arial, helvetica, sans-serif;
    }
    
    ol.commentlist li div.reply:hover {
    color: black;
    }
    
    ol.commentlist li div.reply a {
    text-decoration:none;
    }
    
    ol.commentlist li ul.children {
    list-style:none;
    margin:1em 0 0;
    text-indent:0;
    }
    
    ol.commentlist li ul.children li.depth-2, ol.commentlist li ul.children li.depth-3, ol.commentlist li ul.children li.depth-4 {
    margin:0 0 .25em;
    }
    
    ol.commentlist li.even {
    background:#fff;
    }
    ol.commentlist li.odd {
    background:#f3f3f3;
    }
    
    ol.commentlist li.pingback div.vcard {
    padding:0 160px 0 0;
    }
    
    #respond h3, h3#comments, h3#postcomment{
    font-size: 105%;
    font-family: verdana, arial, helvetica, sans-serif;
    margin: 10px 0;
    }
    
    .replysubmit{
    background:#ddd;
    border:1px solid #aaa;
    padding:2px 10px;
    text-align:center;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    
    /*  Legacy Comments < WordPress 2.7  */
    
    ol#lcommentlist{
    padding: 0 0 0 20px;
    font-size: 90%;
    list-style-type: none;
    }
    
    ol#lcommentlist li{
    padding: 0px 3px;
    margin: 0;
    }
    
    ol#lcommentlist li p.commentheader{
    margin: 0px 0 0px 0;
    display: block;
    padding: 1px 5px;
    }
    
    ul#lcommentlist{
    padding: 0;
    margin:0;
    list-style-type:none;
    }
    
    ul#lcommentlist li{
    display: block;
    padding: 0;
    margin: 0 15px 5px 15px;
    font-size:90%;
    background: #f2f2f2;
    }
    
    ul#lcommentlist p{
    margin: 6px 0;
    }
    
    ul#lcommentlist li div.comm{
    margin: 1px;
    padding: 1px;
    }
    
    ul#lcommentlist li div.gravatar {
    	width:50px;
    	float:left;
    	padding: 10px 0 0 10px;
    }
    
    ul#lcommentlist li div.gravatar img{
    border: 2px solid #ccc;
    }
    
    ul#lcommentlist li div.commenttext{
    padding: 0;
    margin:5px 10px 5px 65px;
    }
    
    ul#lcommentlist li div.commenttext div.commentwrapper{
    margin:0 0 0 5px;
    padding: 3px 8px;
    }
    
    /*  sidebar styles */
    
    .menu{
    padding:0;
    font-size:95%;
    }
    
    .menu a{
    font-weight: 100;
    }
    
    .menu a:hover{
    text-decoration:none;
    }
    
    .menu ul{
    margin:0;
    padding:0;
    list-style-type:none;
    }
    
    .menu ul li.widget{
    padding: 2px;
    margin:0 0 10px 0;
    }
    
    .menu ul li.widget ul{
    margin: 0;
    padding:0;
    }
    
    .menu ul li.widget ul li{
    padding: 3px 0 3px 20px;
    margin:1px 0 0 0;
    display:block;
    background: #f2f2f2 url("images/bullet.gif") no-repeat 4px 8px;
    }
    
    .menu ul li.widget h3{
    font-size:140%;
    padding:4px 0 4px 7px;
    margin: 0 0 2px 0;
    color: #444;
    font-weight: 100;
    background: #e5e5e5;
    border-bottom:1px solid #ccc;
    }
    
    .menu ul li h3 a{
    color: #333;
    font-weight: 800;
    }
    .menu ul li h3 a:hover{
    color: #333;
    text-decoration: none;
    }
    
    .menu form{
    display:block;
    margin:0px;
    padding:4px;
    }
    
    .menu input{
    margin:3px 0;
    font-size:90%;
    }
    
    li.widget #search, li.widget #tags {
    display:block;
    padding: 2px 5px;
    }
    
    /* Calendar styles */
    #wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 230px;
    }
    
    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }
    
    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }
    
    #wp-calendar a {
    display: block;
    }
    
    #wp-calendar caption {
    text-align: center;
    width: 100%;
    }
    
    #wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }
    
    #search{
    background: #555;
    border: 1px solid #b3b3b3;
    float: right;
    height: 22px;
    margin: 30px 15px 0 0;
    padding: 0 5px 0 0;
    width:234px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    }
    
    * html #search{
    margin-right: 8px;
    }
    
    #search input{
    background: transparent;
    border: 0;
    float: left;
    font-size: 105%;
    margin: 2px 0 0;
    padding: 1px 2px 2px 10px;
    width:198px;
    }
    #search .searchsubmit{
    margin: 3px 0 0 5px;
    padding: 0;
    width: auto;
    }
    
    #footer a{
    font-weight: 100;
    }

    Thank you both so much I really appreciate the help, and suggestions ^_^.

    the edits should not be made in the footer.php, but in your page template(s);

    please post the full code of the page templates.

    Thread Starter bwilsonnet

    (@bwilsonnet)

    <?php
    /*
    Template Name: bookpage
    */
    ?><?php get_header(); ?>
       <?php get_header(); ?>
    
                   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  
    
                   <?php the_content(__('[Read more]'));?>  
    
                   <?php endwhile; else: ?>  
    
    	<h2><?php _e('Not Found','panorama'); ?></h2>
    		<p><?php _e('Sorry, you are looking for something that isn\'t here.','panorama'); ?></p>
    	</div>
    	</div>	
    
    	<?php endif; ?>
    
    	</div> <!-- eof main -->
    <div id="wrap">
    </div>
    <?php get_footer();?>

    and here’s the other one

    <?php
    /*
    Template Name: astore
    */
    ?><?php get_header(); ?>
       <?php get_header(); ?>
    
       <iframe src="http://astore.amazon.com/britualrealit-20" width="100%" height="4000" frameborder="0" scrolling="no"></iframe>
                   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  
    
                   <?php the_content(__('[Read more]'));?>  
    
                   <?php endwhile; else: ?>  
    
    	<h2><?php _e('Not Found','panorama'); ?></h2>
    		<p><?php _e('Sorry, you are looking for something that isn\'t here.','panorama'); ?></p>
    	</div>
    	</div>	
    
    	<?php endif; ?>
    
    	</div> <!-- eof main -->
    <div id="wrap">
    </div>
    <?php get_footer();?>

    so should I restore the footer.php?

    Thread Starter bwilsonnet

    (@bwilsonnet)

    Thank you for both of your help. I resolved the issue by switching themes after realizing the structure for this theme was not written very well, and now my custom pages are working flawlessly. I learned a lot from this, thanks again.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Footer changed/won't keep dimension in newly created custom page’ is closed to new replies.