#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    1
    Rep Power
    0

    Unhappy Dynamic Header and Footer


    Hi all,

    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:

    #header {
    border-collapse: collapse;
    border-spacing: 0;
    width:1350px;
    height:222px;
    background: url(banner6.png);
    margin-top:0px;
    margin-left:0px;
    padding: 50px;

    }

    #footer-wrap {
    background:url(footer.png);
    padding:50px 0;
    color:#eee;
    float:left;
    }

    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.

    Thanks.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    Try this:

    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:

    Code:
    html {
       min-width:1350px;
    }
    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.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com

IMN logo majestic logo threadwatch logo seochat tools logo