Version 7 "and into the light"
Thursday, October 19, 2006
The site has changed and I would like to dub these edits and improvements an upgrade. The old black and orange layout, shown below, was my first attempt at creating a site completely from CSS, more than a year ago now. This turned out a failure, after hours of messing and continual frustration with the discrepancies between Internet explorer and Firefox and the bastardization of CSS rendering, in desperation I resorted to methods I knew best - tables and those dreaded font tags. This resulted in formatting that was half controlled by a hacked IE-fixing style sheet and half by random style and formatting strings placed sporadically throughout the design. To say the code was messy was an understatement. Another problem became the accessibility of content - all the links to older posts, archives, special pages, my websites and other random articles became obscured, hard to find and ultimately hidden from the reader. Thirdly the site, although looking relatively stylish on a flat screen was almost illegible on a classic CRT. For these reasons, and probably a few others I decided to address my distaste with this blog and fix everything that was once wrong.
My aims were thus to create a clean crisp appearance that looks good on all screens, where links are in visible and logical positions and the separation of posts, content, ads and information is obvious. This was to be brought about using a pure CSS design, no tables - a site that's content can be completely separated from its appearance. I am pretty pleased with the results, my aims have been fulfilled and the style sheet did not have to revert to a single IE fix. The biggest problems I had to overcome were firstly the central positioning of the main table and the right column.
My first attempt at creating the centre-piece was to use an auto-margin on either side of the <div> using margin-left and margin-right, yet Internet explorer doesn't like this in the slightest. I remember having a number of simple margin issues with IE during previous escapades. I switched to the 'all-in-one' definition and defined only the left margin as auto: "margin:0px auto;" and then set the table width to a fixed amount before applying the 'work-around' which is to provide the body element with a "text-align:center", this positions the <div> in the centre of the page from the start. A second text-align is then required within the <div> so that all the text within it is not also centered.
Fixing the column issue has a less elegant solution. In fact the first method was the best, it utilised the float parameter and allowed text to flow around the column once it had ended, the height of the main <div> would adapt to include all the content. However applying my design to blogger prevented this, on each post Blogger adds an irremovable <div> with the style "clear:both" which renders all floating around said element impossible. I imagine this is a security measure to prevent users hiding malicious things, etc. Going back to the drawing-board yielded an absolutely positioned column with margin to get the correct alignment and a restriction on the post <div> to prevent overlap. A new problem presented, by placing the content absolutely the main container would not stretch to encompass the full content, a crude fix for this was to include a minimum-height tag within it. If anyone has some better suggestions on solving this dilemma I am all ears.
My aims were thus to create a clean crisp appearance that looks good on all screens, where links are in visible and logical positions and the separation of posts, content, ads and information is obvious. This was to be brought about using a pure CSS design, no tables - a site that's content can be completely separated from its appearance. I am pretty pleased with the results, my aims have been fulfilled and the style sheet did not have to revert to a single IE fix. The biggest problems I had to overcome were firstly the central positioning of the main table and the right column.
My first attempt at creating the centre-piece was to use an auto-margin on either side of the <div> using margin-left and margin-right, yet Internet explorer doesn't like this in the slightest. I remember having a number of simple margin issues with IE during previous escapades. I switched to the 'all-in-one' definition and defined only the left margin as auto: "margin:0px auto;" and then set the table width to a fixed amount before applying the 'work-around' which is to provide the body element with a "text-align:center", this positions the <div> in the centre of the page from the start. A second text-align is then required within the <div> so that all the text within it is not also centered.
Fixing the column issue has a less elegant solution. In fact the first method was the best, it utilised the float parameter and allowed text to flow around the column once it had ended, the height of the main <div> would adapt to include all the content. However applying my design to blogger prevented this, on each post Blogger adds an irremovable <div> with the style "clear:both" which renders all floating around said element impossible. I imagine this is a security measure to prevent users hiding malicious things, etc. Going back to the drawing-board yielded an absolutely positioned column with margin to get the correct alignment and a restriction on the post <div> to prevent overlap. A new problem presented, by placing the content absolutely the main container would not stretch to encompass the full content, a crude fix for this was to include a minimum-height tag within it. If anyone has some better suggestions on solving this dilemma I am all ears.
Posted by FofR
| Permalink
| Comments (0)
| 
