corners header and footer

make a backup copy of your theme files before editing

header edges first –
edit header.php:

from this:

<div id="header-widgets-top">
		</div>
<div id="page"> 

<div id="header" role="banner">
	<div id="headerimg">
		<h1><a href="<?php .... ?>"></a></h1>
		<div class="description"></div>
	</div>
</div>

	<div id="header-widgets-bottom">

to this –
basically move the opening of the #page div to after the closing of the #header div, and put an online style with new margins to #header:

<div id="header-widgets-top">
		</div>

<div id="header" role="banner" style="margin:0 auto;">
	<div id="headerimg">
		<h1><a href="<?php .... ?>"></a></h1>
		<div class="description"></div>
	</div>
</div><div id="page"> 

	<div id="header-widgets-bottom">

i hope you can recognize what to change.
if you have it done, come back for the footer change.

good luck ??

thanks.

this worked perfectly. i hope you you can find some time to explain how to change the footer section.

greetings wouter

here you go:

basically, it is moving the closing div of #page from the end to before the div #footer. and putting a ‘clearfix’ div into place to stretch the #page background all the way to the bottom.

edit footer.php and find:

<hr />
<div id="footer" role="contentinfo">
<!-- If you'd like to suppo...

change it to:

<hr />
<div class="footer_clear"></div>
</div>
<div id="footer" role="contentinfo">
<!-- If you'd like to supp...

then further down, find:

</p>
</div>
</div>

<!-- Gorg../

change that to:

</p>
</div>

<!-- Gorg...

save the changes.

edit style.css:
find the style for #footer:

#footer {
	background: #e7e7e7 url('images/kubrickfooter.jpg') no-repeat top;
	border: none;
	}

change the background position to ‘bottom’:

#footer {
	background: #e7e7e7 url('images/kubrickfooter.jpg') no-repeat bottom;
	border: none;
	}

and add the new line for .footer_clear after it (actually it does not matter where you put it, this is just for tidyness):

.footer_clear { display:block; clear:both; }

last step –
increase the height of the footer background image ‘kubrickfooter.jpg’ –
a new version is here: https://img27.imageshack.us/img27/3521/kubrickfooter.jpg

(actually, you won’t need this image, just be aware that the footer background image might need to be much higher than the default one.)

this should be all.
god luck ??

Hi,

aih. it didn’t work.

the footer.php is now:

<hr />
<div class=”footer_clear”></div>
<div id=”footer” role=”contentinfo”>
<div id=”footer-widgets”>

<div class=”clear”></div>

</div>
</div>

<?php wp_footer(); ?>

</body>
</html>

and in style.css:

#footer {
background: url(‘images/kubrickfooter.png’) no-repeat bottom center;
border: none;

}
.footer_clear { display:block; clear:both; }

#footer {
padding: 0;
margin: 1 auto;
width: 760px;
clear: both;
}

#footer p {
margin: 0;
text-align: center;
}

thanks for the help…

greetings,

wouter

two small corrections:

you missed the closing div between these two lines:

<div class="footer_clear"></div>
</div> <!-- this needs to be added -->
<div id="footer" role="contentinfo">

and for some reason, there is ‘margin 1 auto;’ in the #footer style, which does not work – it has to be ‘margin: 0 auto’:

#footer {
	padding: 0;
	margin: 0 auto;
	width: 760px;
	clear: both;
	}

hope this works,
well done so far ??

thank you very much…
alchymyth –> karma + 5

greetings,

wouter