CODEWITHSUNDEEP
htmlcssresponsive-design
Devesh M
Devesh M

Reputation: 1033

How to make design responsive using HTML5 & CSS3 ?

I am new to Responsive design using CSS3. I am trying to create a design, but it's not completely Fluid design.

HTML Markup

    <div id="wrapper">
    <div id="header">
        <div id="navigation">
            <ul>
                <li><a href="#">navigation1</a></li>
                <li><a href="#">navigation2</a></li>
                <li><a href="#">navigation3</a></li>
                <li><a href="#">navigation4</a></li>
            </ul>
        </div>
    </div>
</div>

CSS Style

    body {
    margin: 0px;
    padding: 0px;
}

#wrapper {
    width: 96%; /* Holding outermost DIV: 960 */
    background-color: lightgrey;
    margin-right: 10px;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#header {
    width: 95.83333333333333%; /* 920 divided by 960 */
    background-color: lightgreen;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#navigation {
    width: 91.66666666666667%; /* 880 divided by 960 */
    margin-left: 10px;
    margin-right: 10px;
    background-color: lightyellow;
    padding: 10px;
}

I am using this formula i.e. target ÷ context = result

It's not a completely Fluid design. When i rezise my browser, i can see a horizontal scroll bar after some time. So, to some extent i can say that it's a Fluid desing, but not completely.

Wrapper width: 960px i.e. for example 96%

Header width: 960 - (10 + 10 + 10 + 10) = 920 i.e. 920/960 = 95.83333333333333%

Navigation width: 920 - (10 + 10 + 10 + 10) = 880 i.e. 880/960 = 91.66666666666667%

Am i doing something wrong here while calculating the width in pixel/percentage ?

I am unable to understand how to decide that what would be width in px which need to convert into % value. Either it will be 920 or something else for Header, if i have given some margin/padding styles for Wrapper.

For example, if total width of main Wrapper is 960px and it has 10px of padding & marging, then Header should be 960 - ((10 * 2) + (10 * 2)) = 920. Please correct me if i am wrong here.

Looking for some help.

Upvotes: 0

Views: 321

Answers (3)

Punit
Punit

Reputation: 33

Use bootstrap framework for making your page responsive. Once you will understand Bootstrap then you can made your own css for making pages responsive.

Upvotes: 0

Pasindu Jay
Pasindu Jay

Reputation: 4510

960 - ((10 * 2) + (10 * 2)) = 920 Nope.

Why:

You add main wrapper a width of 960 and padding 10 to all sides. So total size of main wrapper is 960 + 10* 2 (left & right) = 980px. (it takes 980px of your browser window and has 960 container inside that div)

But

There is a property in CSS3 called box-sizing you put value of border-box your questions result can be expected.

with #wrapper { box-sizing: border-box }

960 - ((10 * 2) + (10 * 2)) = 920 Correct

Upvotes: 1

Chris Hitchcock
Chris Hitchcock

Reputation: 399

Use margin:0 auto; to get it to move the way you want. It will center each thing inside itself when you resize the window.

You can also do all your padding in one like I posted. It starts at the top and moves clockwise. If you put 10px it will do ten all the way around. If you do 0 10px; it will repeat.

<body>
<div id="wrapper">
<div id="header">
    <div id="navigation">
        <ul>
            <li><a href="#">navigation1</a></li>
            <li><a href="#">navigation2</a></li>
            <li><a href="#">navigation3</a></li>
            <li><a href="#">navigation4</a></li>
        </ul>
    </div>
</div>
</div>
</body>

body {
margin: 0px;
padding: 0px;
}

#wrapper {
width: 96%; /* Holding outermost DIV: 960 */
background-color: lightgrey;
margin:0 auto;
padding: 0 10px 0 10px;
}

#header {
width: 95.83333333333333%; /* 920 divided by 960 */
background-color: lightgreen;
margin: 0 auto;
padding: 0 10px 0 10px;
}

#navigation {
width: 91.66666666666667%; /* 880 divided by 960 */
margin: 0 auto;
background-color: lightyellow;
padding: 10px;
}

Upvotes: 0

Related Questions