Ah yes - now I remember :o) Richard
----- Original Message ----- From: "Neerav" <[EMAIL PROTECTED]> To: <wsg@webstandardsgroup.org> Sent: Tuesday, October 05, 2004 2:36 PM Subject: Re: [WSG] Semantically creating 'pipes' for footer links Richard See how I display the pipes on the horizontal menu at www.bhatt.id.au using css borders. the list itself has a border-left, and all list items have a border-right Neerav Bhatt http://www.bhatt.id.au Web Development & IT consultancy Mobile: +61 (0)403 8000 27 http://www.bhatt.id.au/blog/ - Ramblings Thoughts http://www.bookcrossing.com/mybookshelf/neerav 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:* wsg@webstandardsgroup.org <mailto:wsg@webstandardsgroup.org> > *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; > file://]]></script> > > > ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
