Posted 3 years ago #
I am creating my first wordpress theme. Its pretty basic, but I am having some trouble with mixing the divs and the different php pages.
Here is the url:
http://www.gibsondesignmanagement.com/wordpress/
I would like the container and the sidebar to maintain the same height. I've tried using div wrappers, but once I started separating content into separate phps, that wasn't working.
Any advice?
Thank you!!!
Posted 3 years ago #
you are on the right track there. seem like the there is missing div (wrap around #container & #sidebar) on others page (single,page post).
fix the footer first "style.css (line 235)"
#footer {
float:left;
clear:both;
width:745px;
padding-left:5px;
background:#7d1401;
border-top:3px solid #86765f;
}replace with
#footer{
background-color:#7D1401;
border-top:3px solid #86765F;
clear:both;
width:745px;
margin:0pt auto
}on the others page (single & page post) the #footer div is outside #wrapper div. that why it break.
create a div wrapper and wrap the #container & #sidebar div then set the wrapper background-color similar to the #sidebar bg colors.
Posted 3 years ago #
Changing the footer code definitely helped, but my sidebar is still not meeting down. Should I be placing the wrapper in the index.php? Or on another php page? Here is my index code
<?php get_header(); ?>
<div id="wrapper">
<div id="container">
<?php if(have_posts()):?><?php while(have_posts()):the_post();?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2>" title="<?php the_title(); ?>"><?php the_title();?></h2>
<div class="entry">
<?php the_content();?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link( 'Edit', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile;?>
<div class="navigation">
<?php posts_nav_link('','|',''); ?>
</div>
<?php else:?>
<div class="post">
<h2><?php _e('Not Found');?></h2>
</div>
<?php endif;?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
Posted 3 years ago #
<?php get_header(); ?>
<div id="wrapper">
<div id="container">
<?php if(have_posts()):?><?php while(have_posts()):the_post();?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2>" title="<?php the_title(); ?>"><?php the_title();?></h2>
<div class="entry">
<?php the_content();?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link( 'Edit', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile;?>
<div class="navigation">
<?php posts_nav_link('','|',''); ?>
</div>
<?php else:?>
<div class="post">
<h2><?php _e('Not Found');?></h2>
</div>
<?php endif;?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>[sig moderated]
Posted 3 years ago #
What changes did you make to the divs? Comparing them I don't see any change there.
The sidebar is still stopping short, and the background below it is the main background color. If I could at least make it #ffffff below the sidebar, I could work with that.
Any help would be greatly appreciated! Thank you!
Posted 3 years ago #
I would use a faux column by means of a background gif in the wrapper div. Like this:
#wrapper {
margin:0 auto 0 auto;
width:750px;
text-align:left;
background:#fff url(background.gif) right repeat-y;
height:700px;
}The background gif would be 241 pixels wide and one or two pixels high, and be colored #86765f, the same background color you have now on your sidebar. I made one that you can download at http://rosecitygardens.com/background.gif - if you put it anywhere other than your theme directory, be sure to change the url in the above code.
I use faux columns a lot, when I want a border and/or different color sidebars. It saves me hours of tearing my hair out!
Posted 3 years ago #
[EDIT: Ok, now the layout is breaking pretty badly in IE. Any suggestions there?]
THANK YOU THANK YOU THANK YOU!!!
Why will that image background extend all the way down, but the color wouldn't beforehand? Even if I had a different color from the main background? Because of the repeat?
Posted 3 years ago #
I don't have IE - how is it breaking?
Posted 3 years ago #
In answer to your question - it's a faux, or fake column. The background is on the container div, and the sidebar goes over it. So it looks like the sidebar extends all the way to the bottom.
This topic has been closed to new replies.
