Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

CSS: Hold the front page

(Ed: Back to a little CSS talk.)

I’ve been experimenting with a ’magazine contents’ or news style page for a current project and thought I’d give it a whirl here.

Magazine and news style

When we (of a certain age) think of creating complex grid or column layouts with CSS, it’s sometimes hard to resist replacing <table>s with <div>s. It is often tempting and sometimes necessary to ’wrap’ columnised content into something akin to;

<div class="col1>
Stuff
</div>

<div class="col2>
More stuff
</div>

But for this excersise, my aim is to create a grid layout using only semantic mark-up (<hx>, <dl>, <ul>) and no additional <div>s. Here is what I have, take a peak at the finished result then read on…

First edition

First I set up the main news item definition list, styling the list with a background colour and border.

<h2>Section title</h2>

<dl class="first">
<dt><a href="#">News item title</a></dt>
<dd>
<p>Lorem ipsum dolor sit amet.</p>
<p class="date">Posted by: Author | Date</p>
</dd>
</dl>

h2 {
clear : both;
margin : .5em;
padding : 0;
}

dl.first {
margin : .5em;
padding : 1em;
background : #f4f1ed;
border : 1px solid #ded59c;
}

Second edition

For the secondary news items, two more <dl>s were wheeled into action (I’ve only listed the code for one here). I’ve specifically added a height of to allow for a reasonable amount of content in each description and display : inline; to rid my layout of the pesky IE Doubled Float-Margin Bug.

<dl class="next">
<dt><a href="#">News item title</a></dt>
<dd>
<p>Lorem ipsum dolor sit amet.</p>
<p class="date">Posted by: Author <br />Date</p>
</dd>
</dl>

dl.next {
display : inline;
float : left;
width : 240px;
height : 13em;
margin : .5em;
padding : 0;
border-bottom : 1px solid #ccc;
}

Extra, extra, read all about it!

Lastly, a ’clearing’ header followed by an unordered list of subsequent links in which the list items themselves are floated.

<h3>Previous destinations</h3>

<ul class="extra">
<li><a href="#">News item title</a></li>
<li><a href="#">News item title</a></li>
<li><a href="#">News item title</a></li>
<li><a href="#">News item title</a></li>
</ul>

h3 {
clear : both;
margin : .5em;
padding : 0;
}

ul.extra {
margin : .5em;
padding-bottom : 4em;
}

ul.extra li {
list-style-type : none;
float : left;
width : 240px;
margin-left : 0;
}

Stop the press

These three levels of links are repeated for each news section on the page, and a little sprinkling of extra (optional) CSS tidies things up nicely.

dd {
margin : 0;
padding : 0;
}

dd p  {
padding : 0;
}

dd p.date  {
padding-top : .25em;
color : #888;
font-size : 92%;
}

Over to you

I’ve so far tested this layout on PC IE6, IE5.5, IE5, Firefox, Opera 7 and 8 (beta), Mozilla and Netscape 7. Take another look at the finished result and let me know what you think? (And if you find any browser specific bugs, how about posting any fixes in the comments?)

Replies

  1. #1 On February 2, 2005 12:25 AM Erwin Heiser said:

    Just goes to show what a flexible combination XHTML and CSS is. Especially the DL can be twisted and floated (pardon my french) in a lot of surprising ways.
    Nice one ;-)

  2. #2 On February 2, 2005 12:41 AM Jesse said:

    That is pretty cool. I have been playing around with different ways of laying out some content that use to be in a newspaper layout and they want to retain some magazine-ny feel. This beats anything I was playing with ;) I am way to Dreamweaver crippled…

  3. #3 On February 2, 2005 12:50 AM Matt said:

    wow, compact markup.

  4. #4 On February 2, 2005 01:17 AM Nathan said:

    I thought you were going to bashing a Microsoft product ;)

    Nice markup and styling.

  5. #5 On February 2, 2005 06:28 AM Alex Sancho said:

    Thanks for this nice and fresh markup, you always surprise me

  6. #6 On February 2, 2005 06:42 AM David Horn said:

    Yes - very neat & tidy … looks great in Firefox, Safari & Opera for Mac. I’m still part of the band of men who feel that they’re doing enough towards standards / accessibility / compliance etc. when essentially replacing tables with div’s, so this will help me a lot - again - Thank you.

  7. #7 On February 2, 2005 08:21 AM John said:

    A great aid in cureing divitis
    Thanks although having old man Murdoch as your storey image seems odd. He’s into opinions, not news :)

  8. #8 On February 2, 2005 09:12 AM John Oxton said:

    I’ve just spent ten minutes looking for the <hx> tag until I realised you meant <hx> … Opps!

    Looks great though one for the bookmarks!

  9. #9 On February 2, 2005 10:46 AM Robert Wellock said:

    It’s a fair example. However, it is also a maltreatment of the Definition List trying to make it jump through hoops it wasn’t originally semantically designed for in the Recommendations thus a strong case of "Listitis".

    As they say; a sequence of objects doesn’t necessarily constitute a list of objects. A book is a sequence of paragraphs; a paragraph is a sequence of sentences; a sentence is a sequence of words and punctuation; a word is a sequence of letters.

  10. #10 On February 2, 2005 11:23 AM Malarkey said:

    @ Robert: Thus a strong case of "Listitis.

    Interesting… the maltreatment of the Definition List argument often comes up in examples like this (the same thing happened with my E-commerce Definition Lists example.

    I’m not sure I agree with you, and I’d be very interested to hear your own practical solution for an example such as this.

  11. #11 On February 2, 2005 11:52 AM Steve said:

    All looks very clean, and is a good example of the power of CSS to style any bit of markup, in any different way. But what’s wrong with the div tag? It is perfectly semantic to use div to markup divisions in content. Hasn’t the div always been your friend, has it not always been there to neatly divide your content?

    <hats off="off">DIV</hats>
    <boo hiss="hiss">DL<boo>

    Since when has a news story had a definition? Should we all write a custom dtd, so we can use <sentence> instead of <p>?

  12. #12 On February 2, 2005 01:05 PM Chris Hunt said:

    Were it my page, I think I’d put the article titles in <h?> elements, even if they were going to be further nested in <dt> elements as well. (not totally clear what the benefit of this is, btw).

    That way, screen readers that can provide a list of all headings on a page would list all the available articles, plus it may have SEO benefits too.

  13. #13 On February 2, 2005 02:12 PM seb said:

    In my opinion, the advantage of Definition Lists is that having CSS disabled, you get a nice "default" layout with a padding-left for each new Definition. So this is why I would use it and be thankful for some fresh air!

  14. #14 On February 2, 2005 02:22 PM Robert Wellock said:

    If that was the case the several paragraphs would define the heading not the term.

    In effect: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ’

    Would define the three words "News item title" plus the date and author in total at least three different entities, which is semi-nonsense.

    I can understand where you are coming from and it’s commendable CSS though it is illogical use of semantics call it a short fall of elements if you will.

    It would be like saying:
    ’
    <dt>The Ant and the Chrysalis</dt>

    <dd><p>An Ant nimbly running about in the sunshine in search of food came across a Chrysalis that was very near its time of change.</p></dd>

    <dd><p>The Chrysalis moved its tail, and thus attracted the attention of the Ant, who then saw for the first time that it was alive. "Poor, pitiable animal!" cried the Ant disdainfully. "What a sad fate is yours!</p><dd>

    <dd><p>While I can run hither and thither, at my pleasure, and, if I wish, ascend the tallest tree, you lie imprisoned here in your shell, with power only to move a joint or two of your scaly tail."</p></dd>

    <dd><p> The Chrysalis heard all this, but did not try to make any reply. A few days after, when the Ant passed that way again, nothing but the shell remained. Wondering what had become of its contents, he felt himself suddenly shaded and fanned by the gorgeous wings of a beautiful Butterfly.<p></dd>
    ’

    That in my self-effacing reasoning doesn’t define the term "The Ant and the Chrysalis".

    It’s a moral: <dt>The Ant and the Chrysalis</dt><dd>"Appearances are deceptive."</dd>

    Even then that’s not a true use of a definition of the term: "The Ant and the Chrysalis" but I assume you can follow my logic - excuse my poor illustration.

  15. #15 On February 2, 2005 02:22 PM Will said:

    This is great and all, but what is the purpose? Does using list help with search engine rankings or provide better code?

  16. #16 On February 2, 2005 02:56 PM Pierce said:

    I love clear:both. And clear:left. Can save on so much code. It took me a long time to realise I could just apply it to headers and certain paragraphs, and stop wrapping divs around everything.

  17. #17 On February 2, 2005 03:37 PM Carlos Porto said:

    I definately have to agree with Robert here. Semantically its out of context. Its just another way of using tables, so to say. Granted it is an intelligent way of laying out a page though. But sematically I think H? and divs would still be semantically logical.

  18. #18 On February 2, 2005 05:04 PM Ted Drake said:

    Was there a reason for putting
    posted by:Author<br />Date
    instead of
    <dd class="postinfo">posted by:Author</dd>
    <dd class="postinfo">Date</dd>

    To my eyes, it seems more logical to wrap these in separate dd’s instead of a paragraph, but I’m wondering if you had a reason. Perhaps you are avoiding a hack that I’m not visualizing. Just curious, I think it looks great and I may use the idea for a project that I need to work on tonight.

    listitis, I knew my love for dl’s would eventually come back and bite me.

    Ted

  19. #19 On February 2, 2005 05:14 PM Michael Pierce said:

    How did I know that as soon as I saw the use of definition list there was going to be a debate? :)

    In my opinion, this is a great use of a definition list. Remember, the objective of the exercise was to create a table of contents. A TOC is a list of articles, each with a synopsis to better define or describe the article. Sounds like a definition list to me! If this markup was used for the full articles, however, then I’d agree to the misuse argument.

    One suggestion I would make is to improve the semantic meaning for the class names. “First” and “next” really just describe the sequence. Maybe “highlighted” or “featured” would be better instead of “first”? Just a thought.

    Thanks for the great example!

  20. #20 On February 2, 2005 05:38 PM Malarkey said:

    @ Ted Drake: Personally, I prefer to use a single <dd> containing all the sub-elements I need <p>, <ul>, etc. Not saying it’s definative, more a personal preference.

    @ Carlos Porto, Robert Wellock, Steve and Chris Hunt.

    I’m not so sure that among other common, but some would say ’inappropriate’ uses of definition lists (CSS form layouts with <dd>’s for example), that this example is wholly inapproprate. After-all, the example was an excercise in ’what if?’ and ’will it do?’ and if some find it useful then job done.

    I do agree with you 100% that it would be more semantically appropriate (there is no such thing as semantically ’correct’ (as semantics are subjective) ) to use headers and paragraphs. This would assist screen-reader users and possibly (I say possibly) help with SEO.

    But the main reason for doing this (for myself) was to break the habit of wrapping <divs>’s which is often the ’easy’ option. Of course, that is exactly what <divs>’s were designed to do, but sometimes we group content into <divs>’s in a ’presentational’ mind-set. It’s a hard habit to break.

  21. #21 On February 2, 2005 06:54 PM Robert Wellock said:

    We accept that and appreciate what it was just an experiment; don’t take it to heart too much young fellow, it is just an abstract observation.

  22. #22 On February 2, 2005 07:23 PM Carlos Porto said:

    Yes, it definately is a great excercise. Don’t get me wrong, thinking outside of the box is what got us the internet.

  23. #23 On February 2, 2005 07:51 PM Zelnox said:

    Quite interesting. Would this work for three or four columns?

    I must admit I still like to group conceptually related things with divs (say I want to move a whole div, I can do that). In your example, the h2 and the dl would have to be moved separately, eh?

  24. #24 On February 2, 2005 09:59 PM Sean Fraser said:

    Do you intend pasting ADVISORY WARNING LABELS on all future experimentations?

    I agree with the usage of Semantics but - if lists are traditionally listed vertically - why are they oftimes shown as display: inline?

    Nice experiment.

  25. #25 On February 3, 2005 06:24 PM c. s. said:

    I also disagree with the use of a definition list: it’s usage is symantically incorrect in this instance. I hate to say it, but what you have is tabular data, and that calls for a table. Tables aren’t bad, just using them for layout purposes is bad. Even worse than listitis is tablephobia.

    You have so many superfluous tags for the sole purpose of styling (e.g. paragraph tags inside the definition descriptions), which place it far from semantic purity. Using a table would eliminate the need for the extra tags and put it in a more pure state:

    H2: Section Title
    Caption: Section Title Recent Entries
    Table Headings: Title, Exerpt, Author, Date

    Tables can be completely restyled, too, if one so desires:
    https://www.moronicbajebus.com/playground/cssplay/reformat-table/

  26. #26 On February 3, 2005 06:34 PM Malarkey said:

    I love a good debate on semantics, so much more complicated than stopping world poverty :/

    Wouldn’t it be great if we could group headers and other elements together akin to the combination of <label for=""> for form elements. ie:

    <h2 for="item-1">Header</h2>
    <p id="item-1"></p>

    Still I suppose that’s what <div>s are for… ho, hum.

    And I strongly disagree that this is ’tabular data’.

  27. #27 On February 4, 2005 06:12 PM kirkaracha said:

    I not only think it’s fine to use a definition list here, I think it’s more appropriate than using either tables or headings and paragraphs.

    Objecting to the use of definition lists leans too heavily on the "definition" part and overlooks the example from the HTML 4.01 Specification that suggests marking up dialogues as another application of DL.

    In the context of the example page, you’re referring to a list of articles more than you’re referring to different sections of the same piece of content. This seems just as valid as using DLs for dialog to me.

  28. #28 On February 7, 2005 01:29 PM Andy Budd said:

    I have to admit that I’ve never been all that convinced about using definition lists for anything other than erm, a list of definitions.

    Also I think there is a general misconception that a div has no semantic value. On the contrary a div signifies a division and as such represents

    a generic mechanism for adding structure to documents

  29. #29 On February 7, 2005 02:58 PM Malarkey said:

    Andy Budd wins a prize! His was comment number 1500!