August 2nd, 2013, 07:00 PM
Dynamic Header and Footer
I'm an amatuer CSS coder, and I've been designing a website for myself using Weebly.
Obviously I've wanted to change some of the CSS styles to suit my needs, but I have gotten to a point where I'm stuck with one small thing.
If you have a look at the site, anewlife365 (dot) weebly (dot) com you will notice that the header and footer do not move while the rest of the page does. Now, I havent edited any of the middle section, so there is obviously something I am missing.
You can definitely see it becomes a pain when playing with different resolutions.
I just want the header and footer to have a dynamic feel, along with a background colour behind it, so when people visit the site in different resolutions it doesn't look weird.
My code for both is as follows:
So as you can see I've tweaked it so that its just a picture as a background for the header and footer, but obviously that doesnt work in my favour once the resolution changes.
ANY HELP would be immensely appreciated.
August 7th, 2013, 06:40 PM
On #footer-wrap remove float: left;
..and then add margin:0 auto; and width: 1350px;
On #header remove margin-left: 0; and margin-top: 0;
...and then add margin:0 auto;
The header and footer image widths are huge so the effect is difficult to see, it's much clearer when the header and footer aren't so wide.
I would suggest that you keep the width of the header and footer set to the image width, and also set the min-width of html to the image width. So with the header and footer being 1350px right now, you would have the following CSS code:
If you resize your browser and scroll right, you can see a black bar running along the right side, which gets bigger the smaller you have your browser window. Adding this CSS should prevent that from happening.
I hope this is what you were looking for.