> -----Original Message----- > From: [EMAIL PROTECTED] [mailto:css-d- > [EMAIL PROTECTED] On Behalf Of Chris Casciano > Sent: segunda-feira, 8 de Dezembro de 2008 16:11 > To: CSS-D > Subject: Re: [css-d] Simple Horizontal Menu > > > 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 > > > > > > > ______________________________________________________________________
Thanks a LOT for all the replies. I will pick one option for sure, I just hope I can make it at once, because I'm trying not to tell which one I will pick. :s ;) Regards, 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/
