{"id":170,"date":"2001-07-07T12:08:33","date_gmt":"2001-07-07T19:08:33","guid":{"rendered":"http:\/\/michaelhans.com\/eclecticism\/?p=170"},"modified":"2019-11-21T16:52:38","modified_gmt":"2019-11-22T00:52:38","slug":"site-design-why-css","status":"publish","type":"post","link":"https:\/\/michaelhans.com\/eclecticism\/2001\/07\/07\/site-design-why-css\/","title":{"rendered":"Site design: why CSS?"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:16922,&quot;href&quot;:&quot;http:\\\/\\\/www.w3.org\\\/Style\\\/CSS&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260311114554\\\/https:\\\/\\\/www.w3.org\\\/Style\\\/CSS\\\/&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/www.w3.org\\\/Style\\\/CSS&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-04-02 14:05:57&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-07 16:12:58&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-27 17:54:56&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-08 06:43:19&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-08 06:43:19&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:16923,&quot;href&quot;:&quot;http:\\\/\\\/www.glish.com\\\/css&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:16924,&quot;href&quot;:&quot;http:\\\/\\\/home.netscape.com\\\/browsers\\\/index.html&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20210307095425\\\/http:\\\/\\\/home.netscape.com\\\/browsers\\\/index.html&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-14 16:21:04&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-04-07 16:12:58&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-04-27 17:54:53&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-05-08 06:43:30&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:true,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-08 06:43:30&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:16925,&quot;href&quot;:&quot;http:\\\/\\\/www.microsoft.com\\\/windows\\\/ie\\\/default.htm&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20120919125709\\\/http:\\\/\\\/www.microsoft.com:80\\\/windows\\\/ie\\\/default.htm&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-14 16:21:08&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-07 16:13:00&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-27 17:54:56&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-08 06:43:21&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-08 06:43:21&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:16926,&quot;href&quot;:&quot;http:\\\/\\\/www.omnigroup.com\\\/products\\\/omniweb&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20130915020107\\\/http:\\\/\\\/www.omnigroup.com\\\/products\\\/omniweb\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-14 16:21:10&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-07 16:13:00&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-27 17:54:55&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-08 06:43:25&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-08 06:43:25&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:7118,&quot;href&quot;:&quot;http:\\\/\\\/www.apple.com\\\/macosx&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/www.apple.com\\\/macosx&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:16927,&quot;href&quot;:&quot;http:\\\/\\\/webstandards.org\\\/act\\\/campaign\\\/buc&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260122012606\\\/https:\\\/\\\/www.webstandards.org\\\/act\\\/campaign\\\/buc\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-14 16:21:17&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-07 16:12:59&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-27 17:54:54&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-08 06:43:24&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-08 06:43:24&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>As I&#8217;m currently with a fair amount of time without a whole lot of neccessary things to do, I&#8217;ve decided to explore one of the ideas I&#8217;ve had bouncing around in my head for a while. I&#8217;m redesigning the site (I know, I never got around to finishing the last redesign &#8212; but I found some tricks midway through) to comply with current <a href=\"http:\/\/www.w3.org\/Style\/CSS\/\" title=\"W3C: Cascading Style Sheets\">Cascading Style Sheet<\/a> standards. While I&#8217;d been using <acronym title=\"Cascading Style Sheets\">CSS<\/acronym> for a while now to standardize and simplify the formatting across the site, this is my first foray into using CSS for the actual site layout.<\/p>\n<p>Previously, I&#8217;d been using a table-based system to lay out the page. It works &#8212; and in some ways could be considered a de-facto standard across the web at the moment &#8212; but it&#8217;s kludgy, makes the code difficult to read, and is a <em>royal<\/em> pain when facing a site update. By switching to CSS-based layout (the basic framework was found at <a href=\"http:\/\/www.glish.com\/css\/\" title=\"Glish: CSS Layout Techniques: for Fun and Profit\">Glish<\/a>), my code is much leaner, and once done, I&#8217;ll be able to make large, sweeping changes to the site when I decide to redesign in the future by editing a single .css file, instead of having to recode every page on the site. Much, much nicer.<\/p>\n<p>There is one downside to this &#8212; certain browsers (either older browsers [<a href=\"http:\/\/home.netscape.com\/browsers\/index.html\" title=\"Netscape: Navigator\">Netscape<\/a> 4.x or previous, or <a href=\"http:\/\/www.microsoft.com\/windows\/ie\/default.htm\" title=\"Microsoft: Internet Explorer\">IE<\/a> 4.x or previous] or browsers still in development [such as <a href=\"http:\/\/www.omnigroup.com\/products\/omniweb\/\" title=\"OmniGroup: OmniWeb\">OmniWeb<\/a> for <a href=\"http:\/\/www.apple.com\/macosx\/\" title=\"Apple: Mac OS X\">Mac OS X<\/a>] will not display my page correctly. If you&#8217;re using an older browser, visit the <a href=\"http:\/\/webstandards.org\/act\/campaign\/buc\/\" title=\"WASP: Action: Browser Upgrade Initiative\">Web Standards Organization upgrade project<\/a> to see what browsers are available to you. If you&#8217;re using a current browser that is not standards-compliant, write the company to request compatibility with the currently published standards.<\/p>\n<p>Of course, what this means at the moment is that if you start bouncing through my site, there are currently three different &#8216;themes&#8217; to the pages &#8212; the older blue\/green layout, the grid-background I was recently working with, and this CSS-based layout. I&#8217;m hoping to get the entire site converted over to this new style fairly quickly, however &#8212; this main page was just the matter of a couple hours work, and now that I&#8217;ve got the tweaking finalized, the rest of the pages should fly by fairly quickly.<\/p>\n<p>So that&#8217;s it for now &#8212; a bit of work in front of the &#8216;puter to give my skin a rest from the constant flirtation with sunburn that I&#8217;ve been playing with for the past couple weeks. Ta ta for now&#8230;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m redesigning the site to comply with current Cascading Style Sheet standards. While I&#8217;d been using CSS for a while now to standardize and simplify the formatting across the site, this is my first foray into using CSS for the actual site layout.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2040],"tags":[65],"class_list":["post-170","post","type-post","status-publish","format-standard","hentry","category-blog","tag-technology"],"_links":{"self":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/comments?post=170"}],"version-history":[{"count":0,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/170\/revisions"}],"wp:attachment":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/media?parent=170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/categories?post=170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/tags?post=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}