Portfolio - it-enquirer.com
CSS Portfolio
The screen shot links to the site in question
IT.Enquirer
The main goals with this site was to create it in template format and have the main content section appear first in the source. Also Erik, the site owner, wanted the menu to highlight the active page or section. It had to be an easy matter for Erik to add/remove sections from the top navigation menu too, hence no use of image replacement techniques.
The biggest challenge was to devise a template that could cope with 2, 3 or 4 columns (and there is actually 2 x different 3 column layouts) and still have the footer remain below all. So floats were the best option and this then allowed for ordering the source as well.
With the use of classes in the body we able to target the menu and highlight it accordingly also along with this an added extra, which Erik asked had asked about, was that the image in the top right corner of the page was able to be changed by section as well. There weren't any images, apart from the logo, on the site originally. The use of second class was necessary because then within a section of the site there are 2-3 differing layout styles. 4 columns for an index, 2 columns for a review, and 3 columns again for a feature with pricing details. The use of nested floats along with the second body class controls which "columns" are displayed and how wide they are.
Erik has actually featured his own stylesheet in the web design section of it-enquirer site. Overall I think we are both very pleased with the results, as he says he just picks up the template and all he has to do input the layout body class and the web section body class and get to work. The stylesheet does the rest.
The use of one hack is purely aesthetic. IE/Mac didn't like the background graphic being attached to the absolute bottom of the page, it left a nasty looking trail as the page was scrolled, so rather than deploy hacks to fiddle with pixel co-ordinates, it was agreed to take it out altogether for the Mac. This design was never meant to be "pixel perfect". Even the top menu has to allow for the fact it sometimes wraps depending on the amount of available content sections.
This is a site that has got room to grow even bigger and still not require a complete rethink every time something changes.
I thoroughly enjoyed doing this site and working with Erik!
Claire
«« Portfolio Index | Next page »»
