Hi all
Those at last nights Sydney meeting would have seen Richard's
excellent JS presentation (only slightly thwarted by a screen that
decided when the next slide should be shown.)
The section on using borders instead of pipes "|" in list navigation
shows how CSS can be used to visually provide the same feedback as the
pipe but leave the structure of the document untouched.
My question last night was about this as an alternative:
On screen:
Marvin | Ford | Late, as in the late dentarthurdent | Zarquon
Markup:
<ul>
<li>Marvin</li>
<li>Ford</li>
<li>Late, as in the late dentarthurdent</li>
<li class="lastitem">Zarquon</li>
</ul>
CSS:
ul li
{
float : left; /* get them floating horizontally */
border-right : 1px solid #000;
/* whatever presentational styles you want */
}
ul li.lastitem
{
float : none; /* don't float the last one so the ul is filled out */
border: none;
}
It seems to me that this is a better, cleaner alternative than using
JS to traverse the document tree and remove the borders after the
document has loaded. The class is being described as to what it does,
it works with no styles, it doesn't rely on JS being present.
The only query last night was the loss of semantics... but maybe that
needs a clearer explanation for me.. it seems that the list is still a
list whether it has a class on the end or not?
Also, the example last night used display : inline; which will cause
styled lists to break in the middle of text if they travel past the
end of the containing box width. It's better to keep them as blocks
and float them, then the list items that wrap end up completely on
the next line (and they can have lots more styles). Remember, inline
items can't contain block items.
Cheers
James
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
