Responsive CSS: A better approach on layout design
Resizing web application based on browser window: A better approach to adjust the application proportional to browser window using Responsive CSS. Here we will create a sample web page and make the webpage to re-size according to browser window and make it browser independent.
Resizing web application based on browser window: A better approach to adjust the application proportional to browser window using Responsive CSS.
Smart web users always ready to appreciate better approaches! Cross browser has become an important key for scalability. Besides now a day smart websites focused on resizing the layout depending on browser size. Using CSS can make that happen.
Let's try to create a simple html page and implement this feature.
Step 1:
Create a simple html page. Before that select 2 images and place those inside a folder called 'Images'.
Now the html code will be following
<html>
<head>
<title>.:: Neck2Feet ::. Fashion Trend of Bangladesh</title>
</head>
<body >
<div class="main">
</div>
<div class="footer">
©www.neck2feet.com
</div>
</body>
</html>
Step 2:
Here comes CSS now.
<style type="text/css">
.main
{
width: 100%;
height: 95%;
background-image:url('Images/content.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
}
.footer
{
width: 100%;
height: 5%;
background-image:url('Images/footer.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
}
@media screen and (max-width:800px)
{
body
{
//More work on adjusting all objects
}
}
@media screen and (max-width:400px)
{
body
{
//More work on adjusting all objects
}
}
</style>
Step 3:
Now often this would be the tricky part where 'height' does not work in '%'. Because the height depends on it's container. So the root container should have defined height. This can be travelled till the base tag which is <html> here.
Use the following CSS
html, body
{
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
}
Now browse the site. Experience the charm of Responsive CSS.
Here is the complete code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="Fashion of Bangladesh" name="description">
<style type="text/css">
.main
{
width: 100%;
height: 95%;
background-image:url('Images/content.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
}
.footer
{
width: 100%;
height: 5%;
background-image:url('Images/footer.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
}
html, body
{
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
}
@media screen and (max-width:800px) {
body {
}
}
@media screen and (max-width:400px) {
body {
}
}
</style>
<title>.:: Neck2Feet ::. Fashion Trend of Bangladesh</title>
</head>
<body >
<div class="main">
</div>
<div class="footer">
©www.neck2feet.com
</div>
</body>
</html>