Yesterday was The Tenth Day of the Tenth Month of the Tenth Year

Monday October 11, 2010

Yesterday was the Tenth Day of the Tenth Month of the Tenth Year of this Century, This happens once a century, In Binary the string 101010 is 42 decimal, so Douglas Adams was remembered yesterday.

This is a style template adapted from an XHTML Page.

it was easy to match the IDs used in XHTML divisions to match HTML5 elements used here. I coded <div> elements originally, but since a book I just bought on HTML5 pointed out that they have no semantic meaning in HTML5 and could not be meaningfully used in acessable screen readers and suggested using <container> instead, I tried that. It had the effect of changing the background color layout from white for articles to grey for all. I actually like that for now, but I must figure out what changed. My guess is that the outer-most container set the background color that all of the inner ones inherited, but header and footer explicetly set a color. It may be that all I have to do to change it back is to set the color for the article element.

A Pure HTML5 page to be styled

This page will be given a style loosly similar to the YUI grid page I made two days ago. It has three columns, a header and a footer. The left side will contain a navigation side bar and articles to fit. The middle and right side are text blocks. The header and footer will fill the top and bottom of the page and I will try to center them as I did in the YUI Grid example. The difference is that the YUI Grid example does not have the usage that grows out of the HTML5 semantics, and that this page may not be supported on all browsers, especially IE5, and less so the stylesheet.

Verifying and inspecting the DOM for this page

The footer wouldn't style as I specified, so I examined the elements in the DOM inspector built into Chrome. First I had tried by inspection to make sure that the divisions were nested as I hoped with opening and closing tage, having seen with the inspector that the footer was properly included within the outer- most division, I was able to look at its style inherited from the paragraph element which was forcing text justifying. That was overriding my desire to center and italicize the string. So I removed the string from a paragraph so that I could style it alone, and that worked. The footer can have any element inside it, so this was a quick way out avoiding a conflict I created. I then needed to give it the font values it used to inherit from the paragraph. Now it looks like the rest.

I got a three column layout of the articles!

I was able emulate the multi column output I got with the YUI page, sans the gerish color scheme. I had to figure that <container> really does control the grouping, although maybe <container> is the perfered semantic object since divisions are generic. This allowed me to control which article went into which column.

With Containers the Articles was getting Body Background

When I went from <div> to <container> the article elements began to inherit the body background color. This overrides any attempt to set background for that element. I set the body bsckground color to white to restore the appearence to what I had with XHTML. I like it, or like that funny Russian guy in the Capital One ad: "I jump in it!".

The Columns are trying to be equal in size

The original design had a wider middle colume than the ones on either side. I changed that to make them more equal in size.

Free Web Hosting