Re: [WSG] Semantically creating 'pipes' for footer links
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
#00;
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
lia href=link1.html title=Link 1
accesskey=1link/a/li
lia href=link2.html title=Link 2 accesskey=2link
with multiple words/a/li
lia href=link3.html title=Link 3
accesskey=3link/a/li
lia href=link4.html title=Link 4
accesskey=4linknbsp;withnbsp;NoBrokenSpaces/a/li
lia href=link5.html title=Link 5
accesskey=5link/a/li
/ul
ul id=validationLinks
lia href=http://validator.w3.org/check/referer;
rel=external title=Check XHTMLxhtml/a/li
lia
href=http://jigsaw.w3.org/css-validator/check/referer;
rel=external title=Check CSScss/a/li
lia
href=http://creativecommons.org/licenses/by-nc-sa/2.0/;
rel=external title=View licensecc/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
**
RE: [WSG] Semantically creating 'pipes' for footer links
From: i] On Behalf Of Richard Czeiger Subject: [WSG] Semantically creating 'pipes' for footer links 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... Why not save yourself all the trouble and just use the ascii vertical bar "#124;" for the pipe? drew
RE: [WSG] Semantically creating 'pipes' for footer links
I think this is a weakness and failing in the CSS spec. I feel designers should be able to assign any (relevant) ASCII character or Special Character set to list elements. rsaquo; and #187; would be good to be able to use as well. Because designers do this anyway, I've seen it. You have to make the tool kit available to give them a chance to be semantically correct, otherwise they are forced to add semi-garbage. They should have added this in the CSS spec. Geoff -Original Message-From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]On Behalf Of Trusz, AndrewSent: Tuesday, 5 October 2004 10:29 PMTo: '[EMAIL PROTECTED]'Subject: RE: [WSG] Semantically creating 'pipes' for footer links From: i] On Behalf Of Richard CzeigerSubject: [WSG] Semantically creating 'pipes' for footer links 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... Why not save yourself all the trouble and just use the ascii vertical bar "#124;" for the pipe? drew
Re: [WSG] Semantically creating 'pipes' for footer links
On Wed, 6 Oct 2004 06:13:17 +1000, Geoff Deering [EMAIL PROTECTED] wrote: I think this is a weakness and failing in the CSS spec. I feel designers should be able to assign any (relevant) ASCII character or Special Character set to list elements. snip/ They should have added this in the CSS spec. They did. See the :before pseudo element and the content property: http://www.w3.org/TR/REC-CSS2/generate.html#q11 http://www.w3.org/TR/REC-CSS2/generate.html#q12 Of course, certain browsers don't implement these features at all, which makes them kinda useless in most cases, but they do exist. -- Lindsay Evans http://lindsayevans.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Semantically creating 'pipes' for footer links
Title: 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] 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 #00;
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
lia href="" title=Link 1 accesskey=1link/a/li
lia href="" title=Link 2 accesskey=2link with multiple words/a/li
lia href="" title=Link 3 accesskey=3link/a/li
lia href="" title=Link 4 accesskey=4linknbsp;withnbsp;NoBrokenSpaces/a/li
lia href="" title=Link 5 accesskey=5link/a/li
/ul
ul id=validationLinks
lia href="" href="http://validator.w3.org/check/referer">http://validator.w3.org/check/referer rel=external title=Check XHTMLxhtml/a/li
lia href="" href="http://jigsaw.w3.org/css-validator/check/referer">http://jigsaw.w3.org/css-validator/check/referer rel=external title=Check CSScss/a/li
lia href="" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">http://creativecommons.org/licenses/by-nc-sa/2.0/ rel=external title=View licensecc/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.>
//]]/script
Re: [WSG] Semantically creating 'pipes' for footer links
Title: Re: [WSG] Semantically creating 'pipes' for footer links
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
To: [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 FutterOn 5/10/04 11:28 AM, "Richard
Czeiger" [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
#00; 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 *//stylediv
id="footer"ul id
="contentLinks"lia
href="" title="Link 1"
accesskey="1"link/a/lilia
href="" title="Link 2" accesskey="2"link with multiple
words/a/lilia
href="" title="Link 3"
accesskey="3"link/a/lilia
href="" title="Link 4"
accesskey="4"linknbsp;withnbsp;NoBrokenSpaces/a/lilia
href="" title="Link 5"
accesskey="5"link/a/li/ulul
id="validationLinks"lia href=""http://validator.w3.org/check/referer">http://validator.w3.org/check/referer"
rel="external" title="Check
XHTML"xhtml/a/lilia
href=""http://jigsaw.w3.org/css-validator/check/referer">http://jigsaw.w3.org/css-validator/check/referer"
rel="external" title="Check
CSS"css/a/lilia
href=""http://creativecommons.org/licenses/by-nc-sa/2.0/">http://creativecommons.org/licenses/by-nc-sa/2.0/"
rel="external" title="View
license"cc/a/li/ul/divscript
type="text/_javascript_"//![CDATA[// Kills the Left Border on the
Footer Navigationfunction 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
footermyListElements=myList.getElementsByTagName("li"); //
Gets all the LI elements that are children of the
ULsmyLI=myListElements.item(0); // Gets the first item of
the list of LI elementsmyLI.style.borderLeft = 'none'; //
And sets its border to nothing}}window.>//]]/script
Re: [WSG] Semantically creating 'pipes' for footer links
The method your using looks similar to the one described on A List Apart
www.a*list**apart*.com/articles/taming*list*s/ ?? or it could have come
from http://glazkov.com/blog/articles/CssPipedList.aspx
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
#00;
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
lia href=link1.html title=Link 1
accesskey=1link/a/li
lia href=link2.html title=Link 2 accesskey=2link
with multiple words/a/li
lia href=link3.html title=Link 3
accesskey=3link/a/li
lia href=link4.html title=Link 4
accesskey=4linknbsp;withnbsp;NoBrokenSpaces/a/li
lia href=link5.html title=Link 5
accesskey=5link/a/li
/ul
ul id=validationLinks
lia href=http://validator.w3.org/check/referer;
rel=external title=Check XHTMLxhtml/a/li
lia
href=http://jigsaw.w3.org/css-validator/check/referer;
rel=external title=Check CSScss/a/li
lia
href=http://creativecommons.org/licenses/by-nc-sa/2.0/;
rel=external title=View licensecc/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
**
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:* [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
#00;
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
lia href=link1.html title=Link 1
accesskey=1link/a/li
lia href=link2.html title=Link 2 accesskey=2link
with multiple words/a/li
lia href=link3.html title=Link 3
accesskey=3link/a/li
lia href=link4.html title=Link 4
accesskey=4linknbsp;withnbsp;NoBrokenSpaces/a/li
lia href=link5.html title=Link 5
accesskey=5link/a/li
/ul
ul id=validationLinks
lia href=http://validator.w3.org/check/referer;
rel=external title=Check XHTMLxhtml/a/li
lia
href=http://jigsaw.w3.org/css-validator/check/referer;
rel=external title=Check CSScss/a/li
lia
href=http://creativecommons.org/licenses/by-nc-sa/2.0/;
rel=external title=View licensecc/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
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Semantically creating 'pipes' for footer links
I have to say I'd use an extra class on the first li over that big chunk o' Javascript any day. Apart from the extra code, what if I have Javascript disabled? My 2c... N ___ Omnivision. Websight. http://www.omnivision.com.au/ On Tuesday, Oct 5, 2004, at 13:55 Australia/Sydney, Richard Czeiger wrote: Thanks for the feedback guys but the problem persists ! :o) While Neerav's solution puts pipes before the first and after the last - I am trying to get rid of these so that it looks like this: link | link | link | link and NOT | link | link | link | link | see? Ben's solution requires a separate class attached to the first list item. Again - this is kind of clunky when you're trying to work with the best possible form of an inherited cascade. That's why I used the JavaScript to kill the first LI in each UL in the footer - at least until the pseudo class firstChild is implemented by browsers. Also the Taming Lists article looses it's styling for IE 5 and above (same with the Practical CSS Layout Tips article). Anyone else? Richard :o) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Semantically creating 'pipes' for footer links
Hi Richard Ben's solution requires a separate class attached to the first list item. Again - this is kind of clunky when you're trying to work with the best possible form of an inherited cascade. That's why I used the JavaScript to kill the first LI in each UL in the footer - at least until the pseudo class firstChild is implemented by browsers. To me, adding something like: class=FirstItem to a couple of elements is much less clunky than adding a dozen or so lines of JavaScript that may or may not work, depending on browser settings. I'd only use JavaScript as a very last resort Regards -- Bert Doorn, Better Web Design www.bwdzine.com Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Semantically creating 'pipes' for footer links
Good point - I guess I might settle for Neerav's option and have the pipes at the beginning and the end phooey! wish i could've gotten a solution to that one :o( that's for eveyone's input though... Richard - Original Message - From: Nick Gleitzman [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Tuesday, October 05, 2004 2:15 PM Subject: Re: [WSG] Semantically creating 'pipes' for footer links I have to say I'd use an extra class on the first li over that big chunk o' Javascript any day. Apart from the extra code, what if I have Javascript disabled? My 2c... N ___ Omnivision. Websight. http://www.omnivision.com.au/ On Tuesday, Oct 5, 2004, at 13:55 Australia/Sydney, Richard Czeiger wrote: Thanks for the feedback guys but the problem persists ! :o) While Neerav's solution puts pipes before the first and after the last - I am trying to get rid of these so that it looks like this: link | link | link | link and NOT | link | link | link | link | see? Ben's solution requires a separate class attached to the first list item. Again - this is kind of clunky when you're trying to work with the best possible form of an inherited cascade. That's why I used the JavaScript to kill the first LI in each UL in the footer - at least until the pseudo class firstChild is implemented by browsers. Also the Taming Lists article looses it's styling for IE 5 and above (same with the Practical CSS Layout Tips article). Anyone else? Richard :o) ** 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 **
