On Dec 8, 2008, at 10:54 AM, Michael Stevens wrote:
> Make separate classes for the oddball menu item...
>
> .menu_border {border-right: 1px solid;}
> .menu_border_last {border-right: none;}
>
> or adversely
>
> .menu_border {border-left: 1px solid;}
> .menu_border_first {border-left: none;}
>
> Mike
That would certainly work, but optimally I don't think you'd need to
put a class on every item... really you shouldn't need to use classes
on any of them to solve this problem, but browsers would tend to
disagree with that statement... but here's the way you'd do it without
classes at all:
#some.context li { border-left: 1px solid; }
#some.context li:first-child { border-left: none; }
but in the real world to deal with browsers being browsers, and to aid
legibility I'll typically use a class that looks *just* like the
pseudo class that would do the job [and use that class only in the
HTML where the pseudo class would apply]
#some.context ul li { border-left: 1px solid; }
#some.context ul li:first-child,
#some.context ul li.first-child { border-left: none; }
and then have the HTML look like
<div id="some" class="context">
<ul>
<li class="first-child">...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Again, Michael you're answer is accurate, I've just found that
substituting classes in place of the pseudo classes is the easiest to
read and maintain in the long run
>
>
> -----Original Message-----
> From: MEM [mailto:[EMAIL PROTECTED]
>
> Hi all,
>
> I need to have a horizontal menu like this:
>
> Item1 | Item2 | Item3
>
> Note that, at the beginning and at the end of the list there is no |.
> So, I only need them in the middle.
>
> If we apply all border-left: 1px, solid; then, Item3 will get a |.
> If we apply all border-right: 1px, solid; then, Item1 will get a |.
>
> How can we define borders only in the middle item like this:
> Item1 | Item2 | Item3
> ?
>
> Thanks a lot,
> Márcio
>
>
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
[ Chris Casciano ]
[ http://placenamehere.com ] [ http://flickr.com/photos/placenamehere ]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
