CSS teaching and wrapping block elements with an a tag

Today I taught a graduate digital history class about CSS. I only had an hour, and there was no projector in the room, so I put together a tutorial to walk through how to take a list from normal looking list to navigation style list.

Here it is, in case you are interested. All the explanation is in the linked CSS file. Best to use something besides IE to view the CSS.

Since I used an HTML5 doctype, I experimented with the now legal application of the <a> tag around a block element. In this case, I have code that looks like this:

<a href="#"><li> ... </li></a>

The weird thing about this is that the only thing that has stopped us from using this technique is fear of the almighty validator. As it turns out, browsers quietly kept the functionality while HTML itself did not. Because of this, the functionality is spotty. In the above picture, you can see that  the list items are underlined, even though I explicitly set text:decoration to none.

Still, this might be a fun technique to play with.

This entry was posted in coding, computers, CSS, Tutorial, Web Design and Development. Bookmark the permalink.

One Response to CSS teaching and wrapping block elements with an a tag

  1. Jeremy Boggs says:

    Excellent! Will dig into this a bit more. Do you see any advantage to putting the <a> outside the <li>, as far as styling horizontal navigation is concerned?

    And, looking at your CSS, it seems that the underline is on the links in Example 10 because you’re using ‘.example10 li a’ as your CSS selector. Instead it should be ‘.example10 a’, since the ‘a’ is not a descendant of the ‘li’.