XHTML Changeover

Main Points

CSS Development
The development of the template and CSS file.
Navbar
The sudden possibility of creating easy, accessible drop down menus sparked a furious round of navbar testing.
XHTML Beginning
Here's the first stab at recreating a basic webpage template in XHMTL.

CSS Development

Here's the main stages in the development of the CSS and demo pages.

1. NewXhtmlDemo.html The CSS design is basically done. Just need to tweak SEO and Accessibility. But it's not bad on both counts already. I also need to consider the future needs of the page. A few wrapper divs here and there could greatly increase the future flexibility of the template (by CSS manipulation alone) without adding much code. [chroniclemaster1, 2006/11/11]
2. LeftAlignedMenuPaddingProblem.html In an attempt to make things look more like normal menus, I tried to left align the links on the drop down menus just like windows applications. Firefox handles it fine. However, IE most of the time (not always) screws up the padding, so that the menu width is too narrow and it looks really bad. So either you have to left align the menu links and have them smashed up against the left side of the menu, or I decided in the next go round to go back to centered links. [chroniclemaster1, 2006/11/11]
3. AccessiblexhtmlDemo.html Is this more Accessible? Not sure if it's even an improvement. The menus are at the end of the document. Didn't have to do anything but cut and paste the header navbar because they're already absolutely positioned anyway. [chroniclemaster1, 2006/11/11]
4. NonAccessiblexhtmlDemo.html Is this less Accessible? This is the most developed webpage, and looks better than any previous version when CSS isn't applied. One last issue though. The Javascript events cause some weird effects popping in and out. That doesn't look great and I'm worried that it may cause accessibility problems too. [chroniclemaster1, 2006/11/11]
5. MenusAuthortableishXhtmlDemo.html This finally fits the menus to the content. I deleted the manually set height for the div and suddenly it just snaps to the content. Why didn't I do it that way from the beginning??? And I've got the Authorship set up properly. The code is AWFUL. CSS is supposed to cut back on useless tags????????? However, it does render fine with the CSS turned off and is linearized for Accessiblity. While I don't like the code, this is the first version of the webpages I could say THAT about, plus the code is more readable than the table version. [chroniclemaster1, 2006/11/10]
6. MenusXhtmlDemo.html Worked out the techniques from the TestMenu files. This one seems to work pretty well cross browser. [chroniclemaster1, 2006/11/02]

Navbar Menus

My JavaScript may be paying dividends. By taking some different pieces of CSS and DHTML programming that I've learned in a recent XHTML/CSS class, I've stitched together a complete menu system that's very simple. Check this out and see what you think.

• TestMenu2.html
• TestMenu3.html

It should be easily maintainable. The positioning is all controlled by ids (which is the secret to making everything very simply and easily interfacable with really basic JavaScript calls).

The look of the buttons is completely controlled by one CSS class, and the look of the menus is controlled by another. So by changing the CSS of two classes, I can control navmenus sitewide. I haven't looked at menus as part of the navbar before... but then they've never been this easy. There's also the cool, if unexpected feature in TestMenu2, that if you run your mouse across the buttons horizontally, then every menu pops open. And if you run your mouse across the menus horizontally, then they all pop closed. They're like magic menus. Now you see them, now you don't. But if you cross the bottom edge of the buttons into the menu then they act normally. Move your mouse off the menu and it closes automatically. In TestMenu3, I figured out how to make the menus act normally. [chroniclemaster1, 2006/10/23]

XHTML Beginning

We are currently working on our next major redesign of EarthChronicle.com, learning XHTML and using full CSS 2.0. There are two pages. A demo XHTML page which I'm using to play with designing general webpages/templates. I also have a version of the main index to play with as well. We are styling these with full CSS using box model hacks and browser compatibility tricks, etc. etc. Trying to control as much of the layout and look with external CSS to improve the flexibility of the site for future updates. I even have a CSS reference that is styled with the same CSS file. [chroniclemaster1, 2006/09/02]