Template Header and Body do not line up well (HTML Roookie)

Needs Help Please posted this at 23:48 — 22nd September 2010.

They have: 1 posts

Joined: Sep 2010

I am an HTML rookie with zero formal training. I probably have a very simple problem for most people here.

Problem:
My template has a header that is larger than the body. When my browser is collapsed, the header will hit the left margin and stop collapsing but the body will continue to collaps and the two items separate. In other words the site looks great when the browser is large but when the screen gets smaller the template header and body do not match.

I have been trying to add some padding to the body (wrapper I believe) to keep the body from collapsing further and this works when the browser is small, but once the screen is maximized the header and body are out of line in the opposite direction (body too far right from header).

Can someone please provide me with some advice on how to fix this problem?

CODE:
_________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">

<meta http-equiv="content-type" content="{%MetaCharset%}" />
<meta name="description" content="{%MetaDescription%}" />
<meta name="keywords" content="{%MetaKeywords%}" />
<title>{%MetaTitle%}</title>
<link rel="stylesheet" href="images/style.css" type="text/css" media="screen">
<style type="text/css">.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}</style>
</head>
<body>
<div id="header" style="width: 962px; height: 227px;">
<div id="headerimg">
<div>
<div style="margin-top: -66px; margin-left: 40px;"><span class="title"><a href="index.php">{%WebsiteName%}</a></span></div>
</div>
</div>
<div id="navi">
<ul id="nav">
{%menu_start=1%}
<li class="page_item"><a href="{%menu_href%}">{%menu_display%}</a></li>
{%menu_end=1%} 
</ul>
</div>
</div>
<!--/header -->
<div>
<div id="wrapper">
<div id="page">
<div id="content" style="width: 732px; height: auto;">
<div id="accordion">
<div class="element atStart" style="border-top: medium none; border-bottom: medium none; overflow: hidden; padding-top: 0px; padding-bottom: 0px;">
<div class="post" id="post-54">
<div class="entry">
<h2 style="width: 39.82%; height: 28px; margin-left: 0px;"><span style="font-size: small;"><strong>{%name%}</strong></span></h2>
</div>
<div style="line-height: 120%;">
<div class="post-content"><span style="font-family: sans-serif;">{%content%}</span></div>
</div>
</div>
</div>
<div class="element atStart" style="border-bottom: medium none; padding-bottom: 0px; width: 732px; height: 19px; overflow: hidden; border-top: medium none; padding-top: 0px;"><!--recent comments start --><!--recent comments start --><!--recent comments start --><!--recent comments end --></div>
</div>
</div>
<!--/content --><!--/sidebar -->
<hr size="2" class="clear" style="width: 88.26%;" />
</div>
<!--/page --></div>
<!--/wrapper -->
<div id="footerbg">
<div id="footer">
<div style="background-image: url(http://freewordpresslayouts.com/wp-content/themes/angelicdesign/images/f...); width: 760px; height: 25px; margin-left: 0px; background-: repeat-x;"></div>
<!--about text start --><!--about text end -->
<hr size="2" class="clear" style="width: 91.3%;" />
</div>
<!--/footer -->
<div id="credits">
<div class="align: center">
<div style="text-align: center;">{%WebsiteFooter%}</div>
</div>
</div>
</div>
<div></div>
<div style="width: 800px; margin-left: auto; margin-right: auto;"><img src="images/bottom.gif" alt="bottom" /></div>
</div>
</div>
</body></html>

{mod edit - added code tags}

Megan posted this at 15:51 — 23rd September 2010.

She has: 11,421 posts

Joined: Jun 1999

Hello,

The first thing you should do is get that CSS out of the HTML code and put it in a separate stylesheet. Secondly, it's useful to post a working link when asking for help. That makes it a lot easier for people to help you. Rather than reading through the code we can use Firebug or similar tools to see what's going on and what fixes the problem. Without real content in here it's difficult to see what's going on. The stylesheet referenced at images/stylesheet.css is also important to see.

What's with the {% placeholders in here? Is that a new way of doing Wordpress theming? I've never seen that before ....

What I can see here is that the header has a width of 962 pixels while the content is 732 pixels. Reducing the header to 732 could theoretically solve this problem, but would probably cause other problems with the display.

Really, this theme doesn't look to be very well coded to me... (given the mixing of CSS in this HTML code).

Megan
Connect with us on Facebook!

webwiz posted this at 23:49 — 23rd September 2010.

He has: 629 posts

Joined: May 2007

Megan's right. A working link is worth a thousand words.
One way to get a sample page is to open one in your browser, then use your browser's "save as complete page" choice from the menu. Then take out any sensitive information from the saved HTML and upload the page and its related _files folder to a server somewhere.

That's assuming you can't post a direct link for some reason.

P.S. I recommend the Firefox add-on "Save Complete" as it even saves code that's "hidden" with Microsoft's so-called "conditional comments."

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;