pipes (<!-- m --><a class="postlink" href="http://www.brookgroup.com/test/pipe/pipe.html">http://www.brookgroup.com/test/pipe/pipe.html</a><!-- m -->)
Nav at this link will be dynamically generated. Java checks a database to see which sections exist, and if they belong in the footer, it iterates an LI filled with a link to the appropriate section. Each LI has a pipe to the left, some padding, yadda.
In this case, "home", "contact", and "site map" are sections, the remaining 2 are just kinda clinger-on-ers with no pipes.
My question: is there some way, aside from assigning a class to the first LI (which I've done here "first-li"), to ditch the pipe through CSS?
It seems to me this should be handled on the backend, but am researching any way I might achieve this through CSS on the front end. Essentially, what I am trying to achieve is to sometimes have a class applied and sometimes not, without using a class declaration.
Is there anyway, via CSS, I can detect what is the first or last LI in a UL? Any other ideas? This seems like someone should have come up with an answer to this... it seems fairly common to have a pipe (or whatever) seperating inline LI elements, but when iterated you get too many pipes, either an extra before or an extra after.Your talking CSS Level 3 stuff which is possible from what your asking to do, just unsupported.
Do you do plumbing quite a lot?
Originally posted by Bonner
Your talking CSS Level 3 stuff which is possible from what your asking to do, just unsupported.
Do you do plumbing quite a lot?
ACk! OK, well I figured as much. Thanks, and I only plumb when absolutely necessary!Do you want to see what the CSS Level 3 for what you are asking looks like?
I can program it and I call it programming rather than scripting because most of the CSS level 3 looks more like programming.Granted, this won't work in IE...
<style type="text/css">
/*<![CDATA[*/
div ul {
list-style-type: none;
}
div ul li {
display: block;
float: left;
width: 50px;
height: 23px;
text-align: center;
}
div ul li:before {
content: " | ";
}
div ul li:first-child:before {
content: "";
}
/*]]>*/
</style>
... ... ...
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
But I think it does what you want.Originally posted by Bonner
Do you want to see what the CSS Level 3 for what you are asking looks like?
I won't be able to implement it, but if you'd like to I won't stop ya.
thanks!Originally posted by Paul Jr
But I think it does what you want.
Thanks! Is it the "first-child part that won't work in IE? I thought the :before and :after worked in IE but nothing else... anyway I had played a round with that a few months back but abandoned it when I realized it won't work cross-browser.
Essentially what I was really trying to do was to find a cross-browser way to make pipes that grow with the size of the text within navigation, and of course it needed to be done "yesterday".
The easiest solution is to make every other LI have a pipe character in it, but that's not the most accessibility-minded solution. We haven't heard much clamour over doing but it just feels wrong to have needless pipes in LIs.
Other solutions I couldn't seem to get to work in all the browsers that are on spec for this job. I most likely overlooked something but I spent a lot of time researching how to make the shell of the site to begin with, and I just don't have a whole lot of time for researching the little stuff anymore on this job.Originally posted by TimeBandit
Thanks! Is it the "first-child part that won't work in IE? I thought the :before and :after worked in IE but nothing else...
Unfortunately it's both.
Originally posted by TimeBandit
anyway I had played a round with that a few months back but abandoned it when I realized it won't work cross-browser.
Essentially what I was really trying to do was to find a cross-browser way to make pipes that grow with the size of the text within navigation, and of course it needed to be done "yesterday".
The easiest solution is to make every other LI have a pipe character in it, but that's not the most accessibility-minded solution. We haven't heard much clamour over doing but it just feels wrong to have needless pipes in LIs.
Other solutions I couldn't seem to get to work in all the browsers that are on spec for this job. I most likely overlooked something but I spent a lot of time researching how to make the shell of the site to begin with, and I just don't have a whole lot of time for researching the little stuff anymore on this job.
I see what you mean. I've had problems with this as well, but it's been in the design stages, and most of the time the pipes are cut out.Example 1
---------
li:nth-child(odd) {
border-left : 1px solid #000;
}
would give:
| ?blah
?blah
| ?blah
?blah
Example 2
---------
li:nth-child(odd) {
border-left : 1px solid #000;
border-right : 1px solid #000;
display : inline;
}
would give:
| ?blah | ?blah
| ?blah | ?blah
Example 3
---------
li:nth-last-child(-n+1) {
border-right : 1px solid #000;
}
li {
display : inline;
}
would give:
?blah ?blah ?blah | ?blah
Example 4
---------
li:contains("foo") {
border-right : 1px solid #000;
}
li {
display : inline;
}
would give:
?blah ?foo | ?blah ?blahI take it that's all CSS 3?
That's pretty cool.Most of it is, some does come from CSS Level 2 and is still unsupported. The likes of 'child' and the selector function style sort of selector:
.foo something(blah)
is also CSS level 2.Originally posted by Bonner
Most of it is, some does come from CSS Level 2 and is still unsupported. The likes of 'child' and the selector function style sort of selector:
.foo something(blah)
is also CSS level 2.
Wow... sweet. I really need to brush up on my CSS 2.
Originally posted by Paul Jr
Wow... sweet. I really need to brush up on my CSS 2.
I for one second that personal opinion. Most of the CSS I post like the one for the drop down menus comes straight out of my head and untested with the knowledge that it should work although may not.
I personally hate some new things added to the CSS Level 3 recommendations. Things like layers being inline while having one stupidly floating in the center of all the others and overlapping them too.
Someone might find a use for this but not untill the next Mozilla comes out.Here is what I am on about:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/css3-multicol/multicol-float">http://www.w3.org/TR/css3-multicol/multicol-float</a><!-- m -->
Saying that, this is still a working draft.There's one thing I'm really looking forward to: the-border-image (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image">http://www.w3.org/TR/2002/WD-css3-borde ... rder-image</a><!-- m -->)
Originally posted by Paul Jr
There's one thing I'm really looking forward to: the-border-image (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image">http://www.w3.org/TR/2002/WD-css3-borde ... rder-image</a><!-- m -->)
Totally!
[J]onaIf that doesn't sway everyone away from tables, I don't know what will.Originally posted by Bonner
Example 1
---------
| ?blah
?blah
| ?blah
?blah
very cool, thanks bonner! You've plumbed the depths of pipe placement...Originally posted by Paul Jr
There's one thing I'm really looking forward to: the-border-image (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image">http://www.w3.org/TR/2002/WD-css3-borde ... rder-image</a><!-- m -->)
I can only imagine the design nightmares that will follow... :O
Nav at this link will be dynamically generated. Java checks a database to see which sections exist, and if they belong in the footer, it iterates an LI filled with a link to the appropriate section. Each LI has a pipe to the left, some padding, yadda.
In this case, "home", "contact", and "site map" are sections, the remaining 2 are just kinda clinger-on-ers with no pipes.
My question: is there some way, aside from assigning a class to the first LI (which I've done here "first-li"), to ditch the pipe through CSS?
It seems to me this should be handled on the backend, but am researching any way I might achieve this through CSS on the front end. Essentially, what I am trying to achieve is to sometimes have a class applied and sometimes not, without using a class declaration.
Is there anyway, via CSS, I can detect what is the first or last LI in a UL? Any other ideas? This seems like someone should have come up with an answer to this... it seems fairly common to have a pipe (or whatever) seperating inline LI elements, but when iterated you get too many pipes, either an extra before or an extra after.Your talking CSS Level 3 stuff which is possible from what your asking to do, just unsupported.
Do you do plumbing quite a lot?
Originally posted by Bonner Your talking CSS Level 3 stuff which is possible from what your asking to do, just unsupported.
Do you do plumbing quite a lot?
ACk! OK, well I figured as much. Thanks, and I only plumb when absolutely necessary!Do you want to see what the CSS Level 3 for what you are asking looks like?
I can program it and I call it programming rather than scripting because most of the CSS level 3 looks more like programming.Granted, this won't work in IE...
<style type="text/css">
/*<![CDATA[*/
div ul {
list-style-type: none;
}
div ul li {
display: block;
float: left;
width: 50px;
height: 23px;
text-align: center;
}
div ul li:before {
content: " | ";
}
div ul li:first-child:before {
content: "";
}
/*]]>*/
</style>
... ... ...
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
But I think it does what you want.
Originally posted by Bonner Do you want to see what the CSS Level 3 for what you are asking looks like?
I won't be able to implement it, but if you'd like to I won't stop ya.
thanks!Originally posted by Paul Jr
But I think it does what you want.
Thanks! Is it the "first-child part that won't work in IE? I thought the :before and :after worked in IE but nothing else... anyway I had played a round with that a few months back but abandoned it when I realized it won't work cross-browser.
Essentially what I was really trying to do was to find a cross-browser way to make pipes that grow with the size of the text within navigation, and of course it needed to be done "yesterday".
The easiest solution is to make every other LI have a pipe character in it, but that's not the most accessibility-minded solution. We haven't heard much clamour over doing but it just feels wrong to have needless pipes in LIs.
Other solutions I couldn't seem to get to work in all the browsers that are on spec for this job. I most likely overlooked something but I spent a lot of time researching how to make the shell of the site to begin with, and I just don't have a whole lot of time for researching the little stuff anymore on this job.Originally posted by TimeBandit
Thanks! Is it the "first-child part that won't work in IE? I thought the :before and :after worked in IE but nothing else...
Unfortunately it's both.
Originally posted by TimeBandit
anyway I had played a round with that a few months back but abandoned it when I realized it won't work cross-browser.
Essentially what I was really trying to do was to find a cross-browser way to make pipes that grow with the size of the text within navigation, and of course it needed to be done "yesterday".
The easiest solution is to make every other LI have a pipe character in it, but that's not the most accessibility-minded solution. We haven't heard much clamour over doing but it just feels wrong to have needless pipes in LIs.
Other solutions I couldn't seem to get to work in all the browsers that are on spec for this job. I most likely overlooked something but I spent a lot of time researching how to make the shell of the site to begin with, and I just don't have a whole lot of time for researching the little stuff anymore on this job.
I see what you mean. I've had problems with this as well, but it's been in the design stages, and most of the time the pipes are cut out.Example 1
---------
li:nth-child(odd) {
border-left : 1px solid #000;
}
would give:
| ?blah
?blah
| ?blah
?blah
Example 2
---------
li:nth-child(odd) {
border-left : 1px solid #000;
border-right : 1px solid #000;
display : inline;
}
would give:
| ?blah | ?blah
| ?blah | ?blah
Example 3
---------
li:nth-last-child(-n+1) {
border-right : 1px solid #000;
}
li {
display : inline;
}
would give:
?blah ?blah ?blah | ?blah
Example 4
---------
li:contains("foo") {
border-right : 1px solid #000;
}
li {
display : inline;
}
would give:
?blah ?foo | ?blah ?blahI take it that's all CSS 3?
That's pretty cool.Most of it is, some does come from CSS Level 2 and is still unsupported. The likes of 'child' and the selector function style sort of selector:
.foo something(blah)
is also CSS level 2.Originally posted by Bonner
Most of it is, some does come from CSS Level 2 and is still unsupported. The likes of 'child' and the selector function style sort of selector:
.foo something(blah)
is also CSS level 2.
Wow... sweet. I really need to brush up on my CSS 2.
Originally posted by Paul Jr Wow... sweet. I really need to brush up on my CSS 2.
I for one second that personal opinion. Most of the CSS I post like the one for the drop down menus comes straight out of my head and untested with the knowledge that it should work although may not.
I personally hate some new things added to the CSS Level 3 recommendations. Things like layers being inline while having one stupidly floating in the center of all the others and overlapping them too.
Someone might find a use for this but not untill the next Mozilla comes out.Here is what I am on about:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/css3-multicol/multicol-float">http://www.w3.org/TR/css3-multicol/multicol-float</a><!-- m -->
Saying that, this is still a working draft.There's one thing I'm really looking forward to: the-border-image (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image">http://www.w3.org/TR/2002/WD-css3-borde ... rder-image</a><!-- m -->)
Originally posted by Paul Jr There's one thing I'm really looking forward to: the-border-image (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image">http://www.w3.org/TR/2002/WD-css3-borde ... rder-image</a><!-- m -->)
Totally!
[J]onaIf that doesn't sway everyone away from tables, I don't know what will.
Originally posted by Bonner Example 1
---------
| ?blah
?blah
| ?blah
?blah
very cool, thanks bonner! You've plumbed the depths of pipe placement...
Originally posted by Paul Jr There's one thing I'm really looking forward to: the-border-image (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image">http://www.w3.org/TR/2002/WD-css3-borde ... rder-image</a><!-- m -->)
I can only imagine the design nightmares that will follow... :O