In yesterday’s post, I demonstrated how CSS can be used to separate the presentation from a document’s structure (and not its content; are you hearing me yet?). In the example code, I started off with content, then gave that content structure with some arbitrary markup. Then I replaced the markup with browser-friendly XHTML.

The quote element became a DIV, the character a SPAN, and the text a P. DIV and P are block-level elements, meaning they are designed to contain other elements. By default, DIV and P elements begin on a new line. SPAN, on the other hand, is an inline element.

Now, if you view the HTML source of yesterday’s post, you’ll see this markup for the CSS-formatted example:


This might look something like this (sorry, NS4 users):<br /><br />

<span class="quote">
<span class="character">PROSPERO:</span>
<span class="text">
For you, most wicked sir, whom to call brother<br />
Would even infect my mouth, I do forgive<br />
Thy rankest fault, -- all of them; and require<br />
My dukedom of thee, which perforce, I know,<br />
Thou must restore.
</span>
</span>

Hey, wait, what happened to the DIV and P? Why did I use only SPAN tags for that last example? And how did I get the SPAN to act like a DIV?

Every weblog post here at scottandrew.com is formatted as text inside a P element. As a rule, P elements cannot contain other block-level elements, including P itself. So if I were to take the code samples with DIV and P and insert them into my post, I’d be invalidating my site’s markup. (Not to mention that some browsers choke nastily parsing nested block elements inside of a P.)

So I had a problem: how do I demonstrate what the code sample should look like in a browser, without invalidating my existing markup? Since the P element can only contain inline elements, switching to SPAN across the board seemed like a good choice. The only trick was to get the SPAN elements for the quote and the text to act like block-level elements.

Fortunately, the CSS-2 spec provides the answer: the display property. By setting the value of display to block, we can force the browser to render an inline element as a block element:


<span style="display:block; background-color:#ccffcc; border:1px dotted #cccccc; padding: 10px;">
This is a SPAN rendered as a block-level element.
</span>

This is a SPAN rendered as a block-level element.

Now I can safely demonstrate how the example code might be rendered. The W3 validator doesn’t care that we’ve pressed our SPANs into service as block elements, as long as the element nesting rules are followed.

I like to use display:block with links to create funky rollover navigation bars, without all the JavaScript craziness:

One Fish
Two Fish
Red Fish
Blue Fish

Here’s all the HTML:


<span id="funkynav">
<a href="#" onclick="return false;">One Fish</a>
<a href="#" onclick="return false;">Two Fish</a>
<a href="#" onclick="return false;">Red Fish</a>
<a href="#" onclick="return false;">Blue Fish</a>
</span>

And here’s the CSS used:


#funkynav {
  display:block;
  width:100px;
}

#funkynav a {
  display:block;
  width:100px;
  background-color:#cc3300;
  font-family:verdana;
  font-size:11px;
  text-decoration:none;
  padding:4px;
  border-bottom:1px solid #ffffff;
  color:#ffffff;
}

#funkynav a:hover {
  background-color:#ff9900;
  color:#000000;
}

That’s it.

So before you start going all DIV-and-JavaScript crazy, consider what CSS and HTML already provide.

Unless you’re stuck with Netscape 4.

Previously: Hope

Next: Peninsula Living