Leading to M2H6

Posted
July 15 2004

If you have been here before, you have probably noticed that things look different. Again. I've been making quite some design changes today—both visual (CSS) as structural (MarkUp).


Several months ago, I started using definition lists for menu items, rather than the nested lists or generic containers with n headings that I'd been using before.

It seemed like a great idea at the time: the [container][header][body][/container] like design was perfect for styling, adds semantical relation between the header (dt) and the body (dd), and looks a lot like the strongly anticipated XHTML™ 2.0 (WD) navigation list (nl). Hell, even some of the gurus were starting to use it.

The fun didn't last, though. I grew rather uncomfortable with this markup decision as I started to see more and more problems with it. The fact that the dts that I had been using as headers can (rightfully) not contain block-level elements and therefor no headings is a contradiction in itself. Since dt does not hold to dl like label holds to nl (and by that take away the need for a heading element), I saw no other option than to throw out the idea … for this site anyway.

Menus now hold divs with a class of item (class="item"). These items hold a h3 for heading, and that's it—no body element. It might be a tad harder to achive some visual effects, but that shouldn't be a reason to begin with. Besides, it plays nice with search engines.

Modular CSS

(As always) I've been working on new style sheets. As with all things related to web standards (or so it seems), it eventually started being worked on modularly: first with seperate style sheets for the various media types, and later for including styles specific to a browser vendor (like Mozilla) or profile (like XFN). (Inclussion is done via the @import rule.)

I will talk about the various modules in full detail in future posts on my weblog. In the meantime, watch out for falling bricks.

ACJ

Comments

7 comments so far.

1/7

say hi to loesje for me, laters

Posted by: mark jacobson on July 15, 2004, at 05:22

2/7

Oh my fucking God … SPAM‼

[Runs around, screaming.]

Posted by: ACJ on July 15, 2004, at 06:21

3/7

Again, you use so many hovers. Luckily there's no overkill, which will tend to happen to my blog if I ignore the wishes of all the visitors :P

Well, I don't dare to make menus with divs and stuff. I'm a trendwhore: I use uls, and I like them. Maybe, maybe, one day I'll switch to dls. But divs... No way!

At least, not yet.

Posted by: Rob Mientjes on July 15, 2004, at 15:39

4/7

Hey Rob, thanks for you comment.

Don't get me wrong though: I use uls (and ols) in my menu, too. I always have. The thing I'm talking about it is the container elements that group different parts of the menu (menu items, as I like to call them). I did a quick peak into the source of your site, and noticed you actually use almost exactly the same markup for menus as I do (h3s followed by uls). The only difference is that you don't group items at all, and by that you're only one group of nested divs away from having the exact same structure.

<div> <!-- Menu //-->
<div> <!-- Menu Item //-->
<h3>Menu Item Heading</h3>
<ul> <!-- Menu Item List //-->
<li>Menu Item List Item</li>
</ul>
</div>
</div>

Posted by: ACJ on July 15, 2004, at 16:15

5/7

Who said that?!

Mmmm... Yes. I don't like nesting divs when I don't really or semantically need them. But you're right. I always try to use h3 for those headings. My way of logical semantics :D

And as (correct me if I'm wrong) Dave Shea said: What's the use of containers? Exactly: IE doesn't get your designs without them. And I believe he's right. But I do love containers, since you can :hover them :P

PS: Your preview page is unstyled. Probably because of the stinking dislike of PHP by MT...

Posted by: Rob Mientjes on July 15, 2004, at 19:30

6/7

Dave's statement goes a long way, but not all the way, in my opinion. Sure, generic containers (span and div) can be used just to apply language or (visual or aural) style, but I think one mustn't forget that they (can) carry some semantical meaning.

In the first place, they (again; can) group (as in relate) entities. Albeit in no specific way, but still. Apart from that, extra meaning can be added to elements by storing terms via ids and classes, and explaining said terms in a meta data profile that is linked via the head. ACJ's used to have such a profile explaining the extra markup (next to the XFN profile: you can add multiple profiles to a head), but I took it off because it was rendered inaccurate when I made some markup changes. I'm currently working on a new profile that will set the record straight.

You are correct about the preview system. The main reason it is as it is, is that I'm a slacker, but the fact that MT won't play nice with PHP without severly beating it also has to do with it. The same Dave you mentioned earlier has actually written a nice piece about this matter (including solutions and work-arounds (which are also solutions)) exactly a week ago. I'll get on it when I cut slacking.

Posted by: ACJ on July 15, 2004, at 19:50

7/7

fantastic change.. looks so classic!i like this style~

Posted by: seo on November 30, 2004, at 09:13