Julie Smyth : 2004
This month I've put together a tutorial centering around creating tableless tables using CSS (Cascading Style Sheets). Anyone who knows me knows that I have been a defender of the humble HTML table for many years, so it is not with a flippant attitude that I have written this tutorial. The TABLE tag still has its place in this new world of HTML 4.0 and XMTML 1.0 and W3C validations but I have to say that the DIV tag reigns supreme in most instances. So lets take a new look at an old tag named DIV and the differences between absolute and relative positioning using CSS.
I know that many of you will be using an HTML editor of some type, I use Dreamweaver myself, but for the point of this tutorial we are going to look at source code only. Eh, otherwise I would have to write a tutorial centered around the way Dreamweaver utilises CSS, which is great by the way, but useless if you don't have the product. First lets start with a basic blank HTML page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="fa61_style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
What I want to design is a basic CSS Website with a header, a text box on the left and a navigation panel on the right. Something like this little box image here. Lets start with the header. Open up your favourite HTML Editor in code view mode and put your cursor between the BODY tags and key in <div id="header"></div>. Now in Notepad or Wordpad create a new file and key in div#header { position: absolute; width: 600px; left: 0px; top: 0px; }. Now save this file and call it "styles.css". All we need do now is link the separate style sheet you have just created back to the HTML file. To do that, position your cursor just above the </head> tag and key in <link href="styles.css" rel="stylesheet" type="text/css" />.
What we have just accomplished is the creation of the header section of our Website and the creation and linking of an external style sheet which will govern how our page looks. The code in the style sheet is telling the HTML page to position the DIV tag with the id of HEADER at an absolute position of 0 pixels from the left and top of the page and to be 600 pixels in width. Before you test this you'll need to add in some text between the DIV tags in the HTML file or more simply put in a background color and height so that the header section stands out. In the "styles.css" file alter the div#header entry to look like this div#header { position: absolute; width: 600px; left: 0px; top: 0px; background-color: #666666; height: 100px; }. This will make the background of the whole header section a dark gray color. Test your HTML file in a browser and you will see the top header section displays in dark gray ... eureka, we have success!
Utilising what we already know it should be a simple matter to add in the "text area" DIV tag and the "nav" DIV tag and their corresponding CSS code. At this point we'll use absolute positioning. Alter your HTML and CSS files to reflect the two displayed below. Now test your HTML file again in a browser and you have 3 dark gray boxes positioned exactly where you want the segments of your page to be. In other words, you have a tableless table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="textarea"></div>
<div id="nav"></div>
</body>
</html>
/* CSS Document */
div#header {
position: absolute;
width: 775px;
left: 0px;
top: 0px;
background-color: #666666;
height: 100px;
}
div#textarea {
position: absolute;
width: 600px;
left: 0px;
top: 105px;
background-color: #666666;
height: 400px;
}
div#nav {
position: absolute;
width: 170px;
left: 605px;
top: 105px;
background-color: #666666;
height: 400px;
}
So after giving yourself a pat on the back ... press the "minimize" button on your browser window and notice that a "horizontal scroll" appears. This is because you have set your page size to an absolute width of 775 pixels. This is a good thing. Your page will look the same regardless of the size of a visitor's browser window. However, there are times when you want the contents of a page to resize along with the window. And this is where the "relative" sizing option comes into play.
What we need to do is add in another DIV tag into the HTML file, this one we'll call "wholepage", as it will govern the other three areas of the page. We also need to redefine how these four areas relate to each other. HTML Tables can be nested within each other to produce a variety of different design layouts for websites. Similarly, CSS elements using the DIV tag can produce exactly the same variety of design layouts. If we position the three existing sections of the page within the "wholepage" DIV tag, and then nest the "textarea" and "nav" sections together we will reproduce our first design layout. If we then change the "absolute" positioning to "relative" we will have a "Fluid" website that will expand and contract depending upon Browser window size.
If you follow the layout of the two files below you will see at a glance how the relative positioning is working as opposed to the absolute positioning we had earlier.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wholepage">
<div id="header"></div>
<div id="textarea"><div id="nav"></div></div>
</div>
</body>
</html>
/* CSS Document */
div#wholepage {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
height: 500px;
}
div#header {
position: relative;
width: 90%;
left: 0%;
top: 0%;
background-color: #666666;
height: 100px;
}
div#textarea {
position: relative;
width: 63%;
left: 0%;
top: 5%;
background-color: #666666;
height: 400px;
}
div#nav {
position: relative;
width: 33%;
left: 110%;
top: 0%;
background-color: #666666;
height: 400px;
}
Test the HTML file in your browser and experiment with the minimise and maximise buttons on your browser window. See how the header, text area and nav sections now expand and contract depending upon the browser window size, and there are no horizontal scrolls to be seen. Congratulations you have produced a "Fluid" website utilising a Tableless Table. Thanks for your patience and I hope you've learnt something with this little tutorial. At this point I'm planning another tutorial for next month's WBB explaining a little about W3C validation and how to achieve it with your Website.
Cyber Aspect™ © Copyright 1999-2008 website design by fx digital All rights reserved Contacts | Terms of Use | Privacy Policy