Make a Layout for a Web Page Fit all Screens

Hi friends,

Everyone uses different devices to vie a web page. To design a layout which has to be fitted in every screens just follow these simple steps. This will make your webpage good to view and also gives perfect layout in every devices.

Note: You can also use Golden ratio to make you web page look even better.

Step :1

In an HTML or Plain Text Editor such as Notepad, create a new file and insert the following:

<HTML>

<head>

</head>

<body>

</body>

</HTML>

Save this file as “filename.html”.

Step:2

Locate the <head> and </head> tags in your HTML file. Between these tags, insert the following CSS code:

<style type=’text/css’>

<!–

body {width:100%; background-color:#000000;}

.container {width:80%; background-color:#FFFFFF; margin:10%; padding:5px;}

.header {width:100%;}

.main-content {width:100%}

–>

</style>

This tells the browser that while the body of the web page takes up the entire screen, the container within the body will keep the content confined to the 80% in the center of the screen. Because the .header and .main-content sections will be inside the container, they are set to take up 100% of the container space. It also creates a white content container on a black page background to help you see the container dimensions better.

Step:3

Locate the <body> and </body> tags. Between these tags, insert the following HTML:

<div>

<div><h1>Web Page Title</h1></div>

<div>Page Content</div>

</div>

This tells the browser the order in which to display the nested page elements defined by the CSS code.

Step:4

Save the HTML file and view it in your web browser. Try changing the size of your browser window to see how the web page behaves. The width of the page layout will change to fit the browser’s different sizes.

 

Reference Site

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s