Main Points

  • CSS Development The development of the template and CSS file.
  • Menu Navigation 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.

In some ways this was the most formative period of the website. This page charts the original look of the website. Upgraded with much better HTML, but still fundamentally our beginning site. We'd been playing with a lot of different ideas to revamp the site, but hadn't settled on anything firmly yet though some pieces were clearly emerging. A CSS class I took really shook things up. It helped us advance on the initial CSS we'd been playing with and got us up to speed. This allowed us to attack and put together the guts of the menu driven navbar which is the centerpiece of our website navigation. Once that was in place a whole swath of pages followed as other pieces fell into place culminating in a solid XHTML template with menu driven navigation.

CSS Development

Here are 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 (but not always) screws up the left padding. 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 Accessibility. 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]

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.

It should be easily maintainable. The positioning is all controlled by ids (which is the secret to making everything very simple and easy to interface 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 site wide. 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've lost the original template, but I'll repost it if I find it. 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]

Fortunately, we quickly got over the box model and any other hacks and settled down to POSH XHTML coding and solid cross-browser compatibility techniques.

[chroniclemaster1, 2009/04/02]