Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Dynamic web layout problem

Options
  • 02-07-2014 5:32pm
    #1
    phishcakes
    Registered Users Posts: 326 ✭✭


    Hi Folks,

    Im in the process of constructing a website and ive run into a bit of a problem with the my layout.

    My layout consists of 2 margins on the left and right and a center piece consisting of a header, content section and a footer, the center piece is in a container and the container is inside the body and my body consists of a background image to give the illusion that the center piece is floating on the image.

    The problem i have is that when i test it out on different devices such as mobiles and tablets it doesn't re size correctly. Below is my code so far - any help be greatly appreciated

    HTML

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title></title>
    </head>

    <body>
    <img class="source-image" src="images/background.png" alt="" />

    <div id="container">
    <div id="header">...header text or logo goes here...</div>

    <div id="menu"> ...menu links goes in here... </div>

    <div id="content"> ...content in here... </div>

    <div id="footer">Copyright (c) 2014</div>

    </div>

    </body>
    </html>

    CSS

    #container
    {
    width: 60%;
    height: 100%;
    margin: 0 auto -20px;
    text-align: left;
    background-color: #000000;
    }

    body
    {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
    }
    #header
    {
    background-color: #ff006e;
    width: 100%;
    height: 15%;
    }

    #menu
    {
    background-color: #0094ff;
    width: 100%;
    height: 5%;
    }

    #content
    {
    background-color: #0026ff;
    width: 100%;
    height: 77%;
    }

    #footer
    {
    clear: both;
    background-color: #b6ff00;
    margin: 0 auto;
    height: 3%;
    width: 100%;
    text-align: center;
    }

    #img.source-image
    {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }

    Cheers!
    Tagged:


Comments

  • Options
    #2
    professore
    Closed Accounts Posts: 5,857 ✭✭✭professore


    Start reading up on responsive web design. There's a lot of things to take into account. It's not something that can be quickly explained here !!!!


  • Options
    #3
    RFOLEY1990
    Closed Accounts Posts: 302 ✭✭RFOLEY1990


    professore wrote: »
    Start reading up on responsive web design. There's a lot of things to take into account. It's not something that can be quickly explained here !!!!


    This.

    Responsive web design is the only way forward.


  • Options
    #4
    Aswerty
    Registered Users Posts: 586 ✭✭✭Aswerty


    Try using CSS to apply the background. The <img> tag is better suited for actual image content.
    html{
    background-size: 100%;
    background: url("images/background.png") no-repeat top center fixed; 
}

    At least this is what I think your main issue is after a quick copy paste into jsfiddle.


  • Options
    #5
    phishcakes
    Registered Users Posts: 326 ✭✭phishcakes


    Aswerty wrote: »
    Try using CSS to apply the background. The <img> tag is better suited for actual image content.
    html{
    background-size: 100%;
    background: url("images/background.png") no-repeat top center fixed; 
}

    At least this is what I think your main issue is after a quick copy paste into jsfiddle.

    I Just tried this and it doesnt seem to work, my background image doesnt appear, by the way ive removed the <img> tag completely and i now set my image inside the <body> tag in the index page.


  • Options
    #6
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭SimonTemplar


    Look into Bootstrap

    (I know this is a short reply but for broad questions like this, it is best to point you in the right direction and research technologies yourself. You'll gain a better understanding of it in the long run).


  • Advertisement
  • Options
    #7
    John_C
    Registered Users Posts: 1,029 ✭✭✭John_C


    phishcakes wrote: »
    I Just tried this and it doesnt seem to work, my background image doesnt appear, by the way ive removed the <img> tag completely and i now set my image inside the <body> tag in the index page.

    Your background image doesn't appear because you need to adjust the path to reference it from where the css file is located. I think url(./images/background.png) should do it.

    There are a lot of good online resources for creating responsive designs. To get you started, I've drawn up a fiddle with what I think you're trying to achieve with this code.

    http://jsfiddle.net/John_C/wr3ck/3/


Advertisement