Using a Background Grid to Assist Web Page Layout - Completing the sample web page layout
(Page 4 of 4 )
To complete the development of this sample web page layout that uses a single image as a background grid, it’s necessary to link the CSS styles coded in the previous section to the corresponding markup of the page. To do that, I’m going to create a whole new (X)HTML file, which will render the layout along with the grid. Here’s how this file looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3-column web page layout using the Rule Of Thirds (uses background grid)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #eee url(grid.gif) center top repeat-y;
}
#container{
width: 900px;
margin: 0 auto;
}
#header{
height: 100px;
padding: 0 10px 0 10px;
}
#sidebar{
float: left;
width: 280px;
padding: 0 10px 0 10px;
}
#extrabar{
float: right;
width: 280px;
padding: 0 10px 0 10px;
}
#content{
margin-left: 300px;
margin-right: 300px;
height: 302px;
padding: 0 10px 0 10px;
}
#footer{
clear: both;
height: 100px;
padding: 0 10px 0 10px;
}
h1,h2,p{
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="extrabar">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer">
<h2>Subheading</h2>
</div>
</div>
</body>
</html>
See how simple it is now to include certain common elements, such as headers and paragraphs, into the web page by using the background grid as a visual guide? I hope you do! I decided to keep the markup of the previous web document rather basic so you can easily grasp the functionality provided by grid.
In addition, below you'll see a screen capture that shows how the web page coded before is rendered on screen, including the background grid. Here it is:
From the above image it’s clear to see that using a background grid is truly a killer approach, particularly when it comes to aligning elements on a web page according either to the Golden Ratio or the Rule of Thirds. Finally, I encourage you to build your own design grid, so you can see how useful it can be for building harmonious, aesthetically appealing web page layouts.
Final thoughts
It’s hard to believe, but this is the end of the series. However, this shouldn’t make you feel sad at all, because you learned the theory that stands behind the Golden Ratio and the Rule of Thirds. Besides, you saw how easy it is to take these principles into the terrain of web design, which can be truly helpful for creating beautiful web sites.
See you in the next web development tutorial!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
