Extending the Rule Of Thirds for Web Page Layouts - Completing the sample web page layout
(Page 4 of 4 )
As I said in the section that you just read, the only thing that remains undone to get this web page layout complete is to link the CSS styles defined previously with the corresponding markup of the page in question. Thus, below I coded a new (X)HTML file, which gathers these two layers in one single place. Here’s how this file has been defined:
<!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>2-column web page layout using the Rule of Thirds</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #eee;
}
#container{
width: 900px;
margin: 0 auto;
background: #ccc;
}
#header{
height: 100px;
padding: 10px;
background: #fc0;
}
#sidebar{
float: right;
width: 280px;
height: 400px;
padding: 10px;
}
#content{
margin-right: 300px;
height: 400px;
padding: 10px;
background: #fff;
}
#footer{
clear: both;
height: 100px;
padding: 10px;
background: #ffc;
}
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="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>
<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>
</body>
</html>
It's easy to understand the above (X)HTML file, so I’m not going to bore you with irrelevant explanations. Even so, you may want to have a look at the following screen shot, which depicts pretty accurately how this sample file is displayed on the browser:
At this moment, do you realize how easy it is to build several web page layouts using the Rule Of Thirds? I hope you do! And if you still have some doubts about the effectiveness of this approach, try to create your own layouts according to this design principle and start enjoying the benefits of a pattern that truly occurs in nature.
Final thoughts Over the course of this sixth episode of the series, you learned how to produce yet another appealing two-column web page design by applying the Rule Of Thirds. As I explained a few moments ago, this process has to do mostly with tweaking the CSS styles of the page rather than dealing with the rule itself, but hopefully the experience has been instructive for you.
Moving forward, it’s time to talk about the topic that I plan to discuss in the last chapter of the series. So far, you may have noticed that all of the web page designs built using the Rule of Thirds were produced by calculating the correct widths for each column included in the document. This task can be pretty annoying when performed on a frequent basis.
It’s possible to simplify this process by using a technique called “background grid.” As its name suggests, this approach relies on creating a background grid image and assigning it to the <body> element of a web page. In doing so, it’s much easier to position elements within the document, since there’s a reference grid that can be used as a quick visual reference.
This useful technique will be discussed in depth in the final part of the series, so if you want to put it to work for you, don’t miss the last 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. |
