PDA

View Full Version : I have this page all screwed up, need some help



CarlMartin10
Jul 15th, 2010, 05:02 PM
Here is the page: http://billboardfamily.com/?page_id=2

Here are the issues:

1) The footer is supposed to extend all the way across the page (like the header), but it no longer does. I added the content int he page (the <div> "table"), and it has not been right since!

2) I can not get the 2 columns resized to fit onto their designated area on the page without making the questions and answers display on top of each other, they need to look the same way they are, layout-wise....the paragraphs can be smaller.

3) I need the bottom box in the sidebar to automatically extend to the lenght of the content area of the page. This will be different length on each page, but I need the sidebar to be uniform relative to the content on all pages.


Thanks to everyone in advance!

page code

<?php
/*
Template Name: About Us
*/
?>


<?php include("header.php"); ?>
<?php include ('sidebar_aboutus.php'); ?>


<div id="table" style="background: url(&quot;<?php bloginfo('template_url'); ?>/assets/images/map.png&quot;) no-repeat; padding-top: 390px;">

<div class="column" style="margin-right: 10px;">
<h3>Carl Martin</h3>

<div class="about">
<div class="row"><span class="row-head">Height:</span> <span class="rowinfo">6'0</span></div>
<div class="row"><span class="row-head">Weight:</span> <span class="rowinfo">250lbs</span></div>
<div class="row"><span class="row-head">Middle Name:</span> <span class="rowinfo">Eugene</span></div>
<div class="row"><span class="row-head">Age:</span> <span class="rowinfo">32</span></div>
<div class="row"><span class="row-head">Eye Color:</span> <span class="rowinfo">Brown</span></div>

<div class="row"><span class="row-head">Favorite Website:</span> <span class="rowinfo"><a href="http://www.apple.com" target="_blank">Apple</a></span></div>
<div class="row"><span class="row-head">Favorite Activity:</span> <span class="rowinfo">Driving</span></div>
<div class="row"><span class="row-head">Favorite Color:</span> <span class="rowinfo">Red</span></div>

<div class="row"><span class="row-head">Shirt Size:</span> <span class="rowinfo">3XL</span></div>
<div class="row"><span class="row-head">Shoe Size:</span> <span class="rowinfo">10</span></div>
<div class="row"><span class="row-head">First Car:</span> <span class="rowinfo">BMW 325ic</span></div>
<div class="row"><span class="row-head">Dream Job:</span> <span class="rowinfo">Professional T-Shirt Wearer</span></div>

<div>&nbsp;</div>

</div>
<p><b>Carl Martin</b> has always been interested in three thing: cars, comupters, and business. Now he has combined two of the three to create The Billboard Family. He holds a B.S. in Computer Science, with an emphysis on Application Development, a degree in Automotive Technology and Repair from UTI/Hot Rod U, and is the former owner of Martin Metals, LLC, a successful metal recycling company. The idea to wear t-shirts for a living was inspired by his desire to make a respectable living, and spend the maximum amount of time possible with his family.</p>
<p>Carl's future plans include adding more children to his family, bringing his other business ideas to life, and owning a vacation home in Alaska.</p>
</div>

<div class="config" style="margin-right: 10px;">
<h3 class="h3" style="visibility: visible;">Amy Martin</h3>

<div class="about">
<div class="row"><span class="row-head">Height:</span> <span class="rowinfo">5'3</span></div>
<div class="row"><span class="row-head">Weight:</span> <span class="rowinfo">She Is Pregnant!</span></div>
<div class="row"><span class="row-head">Middle Name:</span> <span class="rowinfo">Lynn</span></div>
<div class="row"><span class="row-head">Age:</span> <span class="rowinfo">26</span></div>
<div class="row"><span class="row-head">Eye Color:</span> <span class="rowinfo">Blue</span></div>

<div class="row"><span class="row-head">Favorite Website:</span> <span class="rowinfo"><a href="http://www.babiesrus.com" target="_blank">Babies R Us</a></span></div>
<div class="row"><span class="row-head">Favorite Activity:</span> <span class="rowinfo">Family Time</span></div>
<div class="row"><span class="row-head">Favorite Color</span> <span class="rowinfo">Blue</span></div>

<div class="row"><span class="row-head">Shirt Size:</span> <span class="rowinfo">XL</span></div>
<div class="row"><span class="row-head">Shoe Size:</span> <span class="rowinfo">5 &amp; 1/2</span></div>
<div class="row"><span class="row-head">First Car:</span> <span class="rowinfo">Never Had A Driver's License</span></div>
<div class="row"><span class="row-head">Dream Job:</span> <span class="rowinfo">Day Care Owner</span></div>

<div>&nbsp;</div>

</div>
<p><b>Amy Martin</b> always wanted to have a great husband, wonderful children, and an amazing life. Now she does! She is the mother of two young children: Layne, 4 &amp; Kaitlyn, 3, and is expecting child number three sometime in December. She can't wait! The idea of wearing t-shirts for a living, and spreading the word about companies and products she uses and believes in, is something she is very passionate about. She is looking forward to trying new products for her family, and telling the world about them.</p>

<p>Amy's future plans include adding more children to her family, owning a day care, and spending time with her family at her vacation home in Alaska.</p>


</div>



<?php get_footer(); ?>

page css

#table{padding:20px;}

#table .block{border-top:10px solid #fff;margin:10px -10px 0;padding:8px 10px;}

.column{float:left;width:345px;background:transparent url(/sites/all/themes/paprika/images/bg-checkers.gif) repeat-x;padding-

top:4px;padding-bottom:36px;}

.column p{padding-right:18px;}

.row{background:transparent url(/sites/all/themes/paprika/images/bg-dots.gif) repeat-x 0 bottom;float:left;padding:3px 0;}

.about{margin-bottom:15px;background:transparent url(/sites/all/themes/paprika/images/bg-dots.gif) repeat-x 0 top;}

.rowinfo{float:left;width:210px;font-weight:bold;}

.page-column h3{font-size:14px;margin-bottom:0;padding:5px 0 6px;}

.row-head{float:left;width:142px;}

.row-head{float:left;width:134px;padding-left:1px;}

abduraooft
Jul 15th, 2010, 05:07 PM
1) The footer is supposed to extend all the way across the page (like the header), but it no longer does. I added the content int he page (the <div> "table"), and it has not been right since! Then, you'd need to put your footer outside of wrapper, to stretch to the full width of browser. Currently you are getting a stretched effect for that footer because, that background image is applied to the body, instead of header.

I'd recommend you to check http://bonrouge.com/2c-hf-fluid%28r%29.php, which is a good 2 column layout.

CarlMartin10
Jul 15th, 2010, 05:09 PM
Then, you'd need to put your footer outside of wrapper, to stretch to the full width of browser. Currently you are getting a stretched effect for that footer because, that background image is applied to the body, instead of header.

I see. I want that image (the map) in the content area, in the top of the <div> "table" to be exact, its not part of the header, it is on that page only.


UPDATE: I took that image out of the css and the html markup, and nothing changed....footer is still messed up, so I put it back in.

CarlMartin10
Jul 15th, 2010, 05:39 PM
I fixed the footer, thanks for the help.

I still need help on the other 2 items, however. I just want the box at the bottom to extend to the bottom of the content, not the entire sidebar. Running wordpress. Thanks.