Header and Footer Problems

  • svo000

    (@svo000)


    15 years ago

    Hello,

    I’ve just merged over to www.ads-software.com from wordpress.com. My blog is https://www.ourkoreanteapot.com. I’ve been editing my template and have come across a few problems with my header and footer. I’m familiar with CSS, but not so much with PHP.

    First, my header or it might be title section is not extending to the 950 px that I set it to. Should I be editing the layout.css file or the header.php? I think it is the layout.css.

    Secondly, my footer will sometimes go to the bottom of the page and sometimes it will appear in the sidebar. I’m not sure what is causing this.

    This is what i have for the layout.css file: 

    #header {
width:950px;
margin-right:auto;
margin-left:auto !important; /* stupid ie... */
margin-left:1px;
margin-top:0px;
padding:0px;
}

#footer {
background:url(images/page_bottom.gif) bottom center transparent no-repeat;
padding-bottom:10px;
margin-bottom:30px;
}

    Any help would be greatly appreciated. Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)

  • The problem is that the header.gif background image is only 800px wide.

    The footer is wrapping weird because there is a float on the sidebar, and it is floating the footer too.

    If you add a clear to your footer CSS like this that will fix it:

    #footer  {
background:url("images/page_bottom.gif") no-repeat scroll center bottom transparent;
margin-bottom:30px;
padding-bottom:10px;
clear: both;
}

    If you aren’t already using it, I’d highly recommend Firebug, its a big help!

    Thread Starter svo000

    (@svo000)

    Thanks so much! And thanks for the recommendation! I fixed the header, but my footer still looks funny. I added the clear and changed some of the padding. But, there is still a gap where there should be no padding on the left. Do you know what might be causing that? This is my css for my footer: 

    #footer .footer_content {	

	width:800px !important;

	width:950px;

	display:block;

	margin-right:auto;

	margin-left:0 !important; /* stupid ie... */

	margin-left:1px;

	margin-top:0px;

	padding:10px 10px 10px 10px;

	border-top:1px dotted silver;

	text-align:center;

bottom:0;

    No problem, I would replace that CSS code with this:

    #footer .footer_content {
	width:950px;
	display:block;
	margin: 0px;
	padding:10px;
	border-top:1px dotted silver;
	text-align:center;

    That should be more consistent in different browsers.

    It looks like the background graphics are too narrow for this width, you’ll have to fix these and it should look better:
    https://www.ourkoreanteapot.com/wp-content/themes/freshy/images/page_bg.gif
    https://www.ourkoreanteapot.com/wp-content/themes/freshy/images/page_bottom.gif

    It seems like your blog pages load a bit slow because of the number of large images. You might think about only showing 4 or 5 posts per page, that should speed up your site.

    Thread Starter svo000

    (@svo000)

    Thanks again jleuze! I changed the code, but I still need to fix the background.

    Also, thanks for the tip about the number of blog posts. You’ve been so helpful!

    No problem, glad to help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header and Footer Problems’ is closed to new replies.