[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