Using the Golden Ratio in Liquid Web Page Designs - Including the previous CSS code in a basic (X)HTML document
(Page 4 of 4 )
As you might have guessed, including the CSS styles shown in the prior section in a sample web page is only a question of adding a couple of <style> tags and defining the divs that will render the page in question.
Thus, take a look at the following (X)HTML file, which displays a two-column liquid web page layout, based on the golden proportion:
<!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 Golden Ratio</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #eee;
}
/* main wrapper */
#container{
width: 100%;
margin: 0 auto;
}
/* header */
#header{
padding: 0 10px 0 10px;
height: 100px;
background: #fc0;
}
/* side column */
#sidebar{
float: left;
width: 36%;
height: 400px;
padding: 0 1% 0 1%;
background: #ccc;
}
/* main column */
#content{
margin-left: 38%;
height: 400px;
padding: 0 1% 0 1%;
background: #fff;
}
/* footer */
#footer{
clear: both;
height: 100px;
padding: 0 10px 0 10px;
background: #ffc;
}
/* headers */
h1{
font: bold 1.2em "Trebuchet MS", Tahoma, Sans-serif;
color: #000;
margin: 0;
}
h2{
font: bold 1.1em "Trebuchet MS", Tahoma, Sans-serif;
color: #444;
margin: 0;
}
/* paragraphs */
p{
font: normal 11px/1.75em Verdana, Tahoma, Arial, sans-serif;
color: #666;
margin: 0 0 15px 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header section</h1>
</div>
<div id="sidebar">
<h2>Side column</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>Main column</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>
<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>Footer section</h2>
</div>
</div>
</body>
</html>
That’s not rocket science, is it? As you can see above, I simply built the web page layout mentioned before, using the values obtained after applying the golden ratio. Of course, the best way to see how this web page really looks is by trying out this example on your own browser, so I recommend that you do so.
However, the following image might give you a clearer idea of the appearance of this web document. Here it is:
There you have it. If you ever though that building an elastic web page design using the golden ratio was a painful task, then you should feel glad, because it wasn’t! Of course, the example developed before doesn’t differ too much from a typical two-column web page, but keep in mind that it uses the golden proportion, so it’s following a pattern that occurs frequently in nature and that is aesthetically pleasant to humans.
Final thoughts In this second chapter of the series, I explained how to apply the golden proportion to creating a liquid web page design. As you saw for yourself, the process is fairly straightforward, meaning that you shouldn’t have major problems implementing it when designing your own web sites.
In the next article, I’m going to extend the usage of the golden ratio even more. You'll learn how to swap the positions of columns of the sample web page created previously. Don’t miss the following 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. |
