Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorbhaynes
    • CommentTimeMar 12th 2008
     permalink
    Hello *hopefully smarter people than myself.

    Here is the comp:
    http://www.thepinkboa.com/comps/websites/macallan/

    i need the footer to stay at the bottom of the screen.
    i would like the site (parchment) to move vertically out of the footer, with the mountains as a body bg-image stationary.

    i'm running into all kinds of problems with the treeline png overlapping the "submit" button, among other things.

    Has anyone built something of this nature? Can you give me ideas of how to best go about building it?

    Thanks in advance,
    -brad
    • CommentAuthordave_o
    • CommentTimeMar 13th 2008
     permalink
    Hi Brad,

    that's the way to go:

    <html>

    <head>

    <style type="text/css">

    body {
    background:url(http://toghaus.com/president/clouds.jpg) no-repeat fixed top center;
    }

    #footer {
    background-color:#0c0;
    bottom:0;
    height:100px;
    left:0;
    position:fixed;
    width:100%;
    z-index:10;
    }

    #page {
    background-color:#c00;
    height:1000px;
    /* margin-bottom == #footer.height!!! */
    margin:0 auto 100px auto;
    width:600px;
    }

    </style>

    </head>

    <body>

    <div id="page"></div>

    <div id="footer"></div>

    </body>

    </html>

    Dave.
    • CommentAuthorbhaynes
    • CommentTimeMar 17th 2008
     permalink
    Thanks for the reply Dave! This is a great solution for Safari, but not one for IE :(

    Any other ideas?
    • CommentAuthordave_o
    • CommentTimeMar 17th 2008
     permalink
    Could you please upload all the different parts of your image seperately? Background, main page and overlapping footer. Thanks.
Add your comments
    Username Password
  • Format comments as (Help)