[thelist] css class vs id

Martin martin at members.evolt.org
Fri May 10 08:53:00 CDT 2002


<tip type="CSS elements">
On Friday, May 10, 2002, at 02:26  pm, Steve Cook wrote:

> There are 3 types of basic elements in CSS, block-level, inline and list
> elemnets.
...
> List item elements are pretty much only LI elements!

And interestingly, each can be CSS-styled to visually appear
as one of the other types, which can bridge the gap between
looking swish and being semantically correct

Example - a navigation bar is usually semantically a list. If you've
got a non-visual browser (or a text only one), it makes sense for
it to be rendered as a list with links.

But having a list as your main nav often looks ugly - either
you don't want the bullets or numbers, or you may even want a
horizontal nav.

Well don't let that stop you using the semantically correct content -
because the presentation is separate, you can make your nav list
*look* like a normal nav bar.

Side nav:
http://ecoculture.com/styleguide/r/rollovers.html

Top nav:
CSS:
#toc {
	text-align: center;
	padding: 0px;
	margin: 0px;
	width: 100%;
	position: absolute;
	top: 0px;
	}

#toc li {
         display:	inline;
	}

XHTML:
<div id="toc">
    <ul>
       <li>
          <a href="/articles/index.html">Articles</a>
       </li>
       <li>
          <a href="/photos/index.html">Photos</a>
       </li>
       <li>
          <a href="/contact/index.html">Get in Touch</a>
       </li>
       <li>
          <a href="/cv/index.html">CV</a>
       </li>
    </ul>
</div>

Could you use dHTML to have sublists popping out or down on
hover? Probably.

</tip>
_______________________________________________
email: martin at easyweb.co.uk             PGP ID:	0xA835CCCB
	martin at members.evolt.org      snailmail:	30 Shandon Place
   tel:	+44 (0)774 063 9985				Edinburgh,
   url:	http://www.easyweb.co.uk			Scotland




More information about the thelist mailing list