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

    Join Date
    Jan 2011
    Posts
    7
    Rep Power
    0

    Header/footer shift left with display:inline-block


    The orginal issue was with header were resting on the container edges. There should be a 10px margin for both. I was informed that inline-block would resolve the issue. What happens was margin spacing is what I wanted, but both header/footer shifted left and resting on the container edges.

    What needs to be resolved this issue?



    <div id="container">
    <!--"style="background: url('banner2.jpg')"-->
    <div id="header"></div>
    <div id="body"></div>



    <div id="footer"style="background:url('footer.jpg')"></div>



    </div>
    </body>
    </html>







    * {
    margin:0px;
    width: auto;
    }

    #container {
    position:relative;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    height:auto;
    border-top-left-radius:25px;
    border-top-right-radius:25px;

    /* fallback */
    background-color: #063053;
    /* chrome 2+, safari 4+; multiple color stops */
    background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
    /* chrome 10+, safari 5.1+ */
    background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
    /* firefox; multiple color stops */
    background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
    /* ie 6+ */
    filter: progidXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
    /* ie8 + */
    -ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
    /* ie10 */
    background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
    /* opera 11.1 */
    background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
    /* The "standard" */
    background-image: linear-gradient(#063053, #395873, #5c7c99);
    }

    #body {
    position:relative;
    width:750px;
    margin-left:auto;
    margin-right:auto;
    height:500px;
    background-color:#CCFFFF;

    }



    #header {
    position:relative;
    width: 750px;
    height: 208px;
    /*background-image:banner.jpg; */
    background-color:blue;
    margin-top:20px;
    display:inline-block;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    }

    #footer {
    position:relative;
    width:750px;
    height:100px;
    display:inline-block;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    background-color:#00ff00;
    padding-bottom:10px;
    }
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there lortech,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    * {
        margin:0px;
     }
    #container {
        width:750px;
        margin:0 auto 20px;
        padding:20px 75px;;
        border-radius:25px 25px 0 0;
    /* fallback */
        background-color:#063053;
    /* chrome 2+,safari 4+; multiple color stops */
        background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.32,#063053),color-stop(0.66,#395873),             color-stop(0.83, #5c7c99));
    /* chrome 10+, safari 5.1+ */
        background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);
    /* firefox; multiple color stops */
        background-image: -moz-linear-gradient(top,#063053,#395873,#5c7c99);
    /* ie 6+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873');
    /* ie8 + */
        -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
    /* ie10 */
        background-image:-ms-linear-gradient(#063053,#395873,#5c7c99);
    /* opera 11.1 */
        background-image:-o-linear-gradient(#063053,#395873,#5c7c99);
    /* The "standard" */
        background-image:linear-gradient(#063053,#395873,#5c7c99);
     }
    #header {
        height:208px;
        border-radius:15px 15px 0 0;
        background-color:#00f;
        background-image:url(banner.jpg);
     }
    #body {
        height:500px;
        background-color:#cff;
        overflow:auto;
     }
    #footer {
        width:750px;
        height:100px;
        border-radius:0 0 15px 15px;
        background-color:#0f0;
        background-image:url(footer.jpg);
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
     <div id="header"></div>
     <div id="body"></div>
     <div id="footer"></div>
    </div>
    
    </body>
    </html>

    coothead
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    7
    Rep Power
    0

    coolhead, that works great! but the header is partly cut off


    The height of the header is shorter so not sure what happened. Looks great. Tell me what I may have done wrong? Do you also do this for a living?





    Originally Posted by coothead
    Hi there lortech,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    * {
        margin:0px;
     }
    #container {
        width:750px;
        margin:0 auto 20px;
        padding:20px 75px;;
        border-radius:25px 25px 0 0;
    /* fallback */
        background-color:#063053;
    /* chrome 2+,safari 4+; multiple color stops */
        background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.32,#063053),color-stop(0.66,#395873),             color-stop(0.83, #5c7c99));
    /* chrome 10+, safari 5.1+ */
        background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);
    /* firefox; multiple color stops */
        background-image: -moz-linear-gradient(top,#063053,#395873,#5c7c99);
    /* ie 6+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873');
    /* ie8 + */
        -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
    /* ie10 */
        background-image:-ms-linear-gradient(#063053,#395873,#5c7c99);
    /* opera 11.1 */
        background-image:-o-linear-gradient(#063053,#395873,#5c7c99);
    /* The "standard" */
        background-image:linear-gradient(#063053,#395873,#5c7c99);
     }
    #header {
        height:208px;
        border-radius:15px 15px 0 0;
        background-color:#00f;
        background-image:url(banner.jpg);
     }
    #body {
        height:500px;
        background-color:#cff;
        overflow:auto;
     }
    #footer {
        width:750px;
        height:100px;
        border-radius:0 0 15px 15px;
        background-color:#0f0;
        background-image:url(footer.jpg);
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
     <div id="header"></div>
     <div id="body"></div>
     <div id="footer"></div>
    </div>
    
    </body>
    </html>

    coothead
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there lortech,

    the header measures 208px in all my test browsers.

    Do you also do this for a living?
    Good god no.

    I'm a septuagenarian retired postman and I do coding just for
    personal amusement and to help stave off senile dementia.

    coothead
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    7
    Rep Power
    0

    Thanks for helping. If you are interested in staying in contact or chat on irc.


    I go to css on the freenode.net irc network. They were not to keen in helping me understand what was going on with my code.
    I am working on the css horizontal menu. That code is a little tricky to learn but will get it eventually.


    My cousins husband is also a retired us postal carrier. Do you know other code other then CSS? I eventually want to master it then move on to java script and perhaps python.

    I have a interest in robotics and been messing with arduino code. I would eventually like to own my own machine shop and build robotics like the ones on betty robots. http://beatty-robotics.com/workshop-blog/





    Originally Posted by coothead
    Hi there lortech,

    the header measures 208px in all my test browsers.



    Good god no.

    I'm a septuagenarian retired postman and I do coding just for
    personal amusement and to help stave off senile dementia.

    coothead

IMN logo majestic logo threadwatch logo seochat tools logo