| « I've lost interest in TV, Election Day | I found my camera cable! » |
Argonotes refreshed
09/22/07
I got energetic this afternoon and decided it was time to freshen the design of argonotes.com, the website of Argonotes - just Argonotes, not The Argonotes, thank you very much. Argonotes has been the official band of the Canadian Football League's Toronto Argonauts since away back in June of 1995. We think this makes us one of the oldest continually operating bands in the CFL.
A few years ago I took over the operation of the public website and it was starting to show it's age. The thing that finally spurred me into action was my desire to integrate the image galleries that I have been using iGal to create into the overall site design. iGal is a great program for making image galleries. The old Argonotes website design relied on tables to position the design elements which is an old technique that was used before CSS became widely implemented. The old design was a two column layout with a fixed header. I decided to stick with the same format with an fixed footer to include out contact information. I found a nice simple example of this layout on http://www.456bereastreet.com/. I spent most of the afternoon tweaking and tuning it. Argonotes.com already made extensive use of php includes to pull in the repetitive design elements across the different pages. After getting everything looking nice in Firefox I realized that it wasn't rendering the same way in IE, the main column was getting pushed up against the left side of the page instead of being centred properly. I traced the problem to the DOCTYPE declaration, if I used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> IE didn't render the page the same way as Firefox did, I found that I had to use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> to get it to render properly. Along the way I also learned how to find easily find the document base using php to include my fixed design elements. My page template looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">>
<HEAD>
<title>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<?php include($_SERVER['DOCUMENT_ROOT']."/top.html"); ?>
<div id=main>
Content goes here
</div>
<?php include($_SERVER['DOCUMENT_ROOT']."/bottom.html"); ?>
The $_SERVER['DOCUMENT_ROOT'] tells you where your document is based so that you can use the include statement in pages that aren't in the same directory as the file you want to include.
Another useful thing I learned was how to position things on the left and right side of a particular element. This is the CSS code required
.container {
position: relative;
height: 90px;
}
.left-element {
position: absolute;
left: 0;
width: 50%;
}
.right-element {
position: absolute;
right: 0;
width: 50%;
text-align: right; /* depends on element width */
}
and this is the HTML required:
<div class="container">
<div class="left-element">
Content in left item
</div>
<div class="right-element">
Content in right item
</div>
</div>
I found this information at Do You Want To Do That With CSS? — Align Elements Left and Right. You might be asking why I am bothering to blog about this at all. There are three reasons, I want you to go and look and tell me what you think and because I use my blog to archive things I want to remember and because I hope that by psoting this I may make it easier for someone else to find the information. I just realized that I have to fix up some more errors in my HTML that are making the pages render differently in Explorer and Direfox. that's it, there is no more.
No feedback yet
