How to make design responsive using HTML5 & CSS3 ?
Question
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 ie 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 ie for example 96%
Header width: 960 - (10 + 10 + 10 + 10) = 920 ie 920/960 = 95.83333333333333%
Navigation width: 920 - (10 + 10 + 10 + 10) = 880 ie 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.
3 answers
solution1
1 2015-07-27 06:23:43
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
solution2
0 2015-07-27 06:10:48
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;
}
solution3
0 2015-07-27 07:30:15
Use bootstrap framework for making your page responsive. Once you will understand Bootstrap then you can made your own css for making pages responsive.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.