Responsive CSS: A better approach on layout design Samples and examples

Responsive CSS: A better approach on layout design

Posted Date: 18-Aug-2012	Category: Html
Author: Pritom Nandy	Member Level: Gold	Points: 20

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>

Post Comment:

Notify me by email when others post comments to this article.

Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.

No HTML formatting and links to other web sites are allowed.

This is a strictly moderated site. Absolutely no spam allowed.

Name:	Sign In to fill automatically.
Email:	(Will not be published, but required to validate comment)
	Type the numbers and letters shown on the left.

Online Members

Responsive CSS: A better approach on layout design

Post Comment:

Email subscription