I have an example at http://hamilton.id.au/temp/pipedlist.html using multiple words per item.
Ben Hamilton.
Richard Czeiger wrote:
Sure but this only works on, like, two browsers!
Is there a funckier CSS hack kind of way?
:o)
Richard
----- Original Message ----- *From:* Kevin Futter <mailto:[EMAIL PROTECTED]> *To:* [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> *Sent:* Tuesday, October 05, 2004 12:02 PM *Subject:* Re: [WSG] Semantically creating 'pipes' for footer links
For the line wrapping issue, you could try:
whitespace: nowrap;
On whatever element is giving you trouble.
Cheers, Kevin Futter
On 5/10/04 11:28 AM, "Richard Czeiger" <[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>> wrote:
Hi guys,
I'm putting together a semantically correct UL of links for my
footer.
I'd like to have them separated by 'pipes' as this is a common
and easily recognised technique.
But the pipes themselves are irrelevant (semantically). So
here's what I've come up with...
ALSO! My one thing is that if the text inside the links is
made up of two or more words, then they get pushed to separate
lines. Is there a way to avoid this without specifying a width
or without putting a 'no broken spaces' between the words?
Can you suggest anything better?
<style type="text/css">
#footer {
text-align: center;
}
#footer ul li {
display: inline; width: 1px;
margin: auto 5px; padding-left: 10px; border-left: 1px solid
#000000;
line-height: 120%;
}
#footer ul li:first-child { border-left: none; }
/* Not rendered by a few agents, so we'll use the
'footerBorderKill' javascript function switches off the first
child's left border */
</style>
<div id="footer">
<ul id ="contentLinks">
<li><a href="link1.html" title="Link 1"
accesskey="1">link</a></li>
<li><a href="link2.html" title="Link 2" accesskey="2">link
with multiple words</a></li>
<li><a href="link3.html" title="Link 3"
accesskey="3">link</a></li>
<li><a href="link4.html" title="Link 4"
accesskey="4">link with NoBrokenSpaces</a></li>
<li><a href="link5.html" title="Link 5"
accesskey="5">link</a></li>
</ul>
<ul id="validationLinks">
<li><a href="http://validator.w3.org/check/referer";
rel="external" title="Check XHTML">xhtml</a></li>
<li><a
href="http://jigsaw.w3.org/css-validator/check/referer";
rel="external" title="Check CSS">css</a></li>
<li><a
href="http://creativecommons.org/licenses/by-nc-sa/2.0/";
rel="external" title="View license">cc</a></li>
</ul>
</div>
<script type="text/javascript">//<![CDATA[
// Kills the Left Border on the Footer Navigation
function footerBorderKill() {
myBody=document.getElementById('footer');
myBodyElements=myBody.getElementsByTagName("ul"); // Gets all
the UL elements that are children of 'footer'
for( var i = 0; i < myBodyElements.length; i++ ) {
myList=myBodyElements.item(i); // Loops through all the ULs
in the footer
myListElements=myList.getElementsByTagName("li"); // Gets
all the LI elements that are children of the ULs
myLI=myListElements.item(0); // Gets the first item of the
list of LI elements
myLI.style.borderLeft = 'none'; // And sets its border to
nothing
}
}
window.onload = footerBorderKill;
//]]></script>
--
Ben Hamilton 0410 460 333 [EMAIL PROTECTED]
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
