Styling menus

12/03/2008, 07h48

I'd really appreciate if someone would explain to me how to remove the
vertical line on the right of the last item in this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">

<title>title</title>

<style type="text/css">

..mainmenu {
padding:0px;
margin:0px;
}

..mainmenu li {
list-style-type:none;
float:left;
display:block;
padding:0px 13px 0px 13px;
font-family:arial, verdana, sans-serif;
font-weight:bold;
text-transform: uppercase;
font-size:8pt;
text-align:center;
color:#7d7d79; /*should be #7d7d79*/
border-right: 1px solid #dab763;
white-space:nowrap;
}

..mainmenu a, .mainmenu a:link, .mainmenu a:visited, .mainmenu a:active
{
text-decoration:none;
color:#7d7d79;
font-family:arial, verdana, sans-serif;
font-weight:bold;
font-size:8pt;
}
..mainmenu a:hover {
color:#dd4444;
}

..mainmenulast li {
border-right: 0px ;
}

</style>

</head>
<body>

<ul class="mainmenu">
<li><a href="our_story.html">Our Story</a></li>
<li><a href="why_choose_us.html">Why Choose Us?</a></li>
<li><a href="industry_affiliations.html">Industry Affiliations</a></
li>
<li class="mainmenulast"><a href="contact_us.html">Contact Us</a></li>
</ul>

</body>

</html>

Thanks!

12/03/2008, 08h26

<krys.squires@gmail.com> wrote in message
news:5484def3-c1c2-49bf-baf9-98085618a05e@s37g2000prg.googlegroups.com...
> I'd really appreciate if someone would explain to me how to remove the
> vertical line on the right of the last item in this page:
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML is not viable on the web. IE simply does not understand it.

> .mainmenu li {

> font-size:8pt;'

Way too small. Use font-size: 100% or omit entirely.

> .mainmenu a, .mainmenu a:link, .mainmenu a:visited, .mainmenu a:active
> {
> text-decoration:none;
> color:#7d7d79;
> font-family:arial, verdana, sans-serif;
> font-weight:bold;
> font-size:8pt;

You don't need to repeat most of this stuff. It will be inherited

> .mainmenulast li {
> border-right: 0px ;

border-right: none;

--
Richard.

12/03/2008, 11h13

rf wrote:
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
>> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
>
> XHTML is not viable on the web. IE simply does not understand it.

IE renders XHTML as HTML. This does not make it unviable. It may make
it inadvisable, perhaps, but not unviable.

12/03/2008, 11h24

C A Upsdell schrieb:
> rf wrote:
>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
>>> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
>>
>> XHTML is not viable on the web. IE simply does not understand it.
>
> IE renders XHTML as HTML.

when sent as text/html, which is not appropriate for XHTML 1.1.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

12/03/2008, 16h10

this is all very interesting, but can anyone actually me with my
original question?

12/03/2008, 16h33

On Wed, 12 Mar 2008, krys.squires@gmail.com wrote:

> this is all very interesting, but can anyone actually me with my
> original question?

Welcome to Usenet!

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell

12/03/2008, 16h37

krys.squires@gmail.com wrote:
>
> this is all very interesting, but can anyone actually me with my
> original question?

1) learn to quote
2) learn to post URLs
3) learn CSS

..mainmenulast li { border-right: 0px; }

does not apply to <li class="mainmenulast">...

but to a LI that is a descendant of some element of class "mainmenulast"

try:

li.mainmenulast { border-right: 0; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

12/03/2008, 16h41

krys.squires@gmail.com wrote:
>
> this is all very interesting,

What is? Please quote what you're replying to.

> but can anyone actually me with my
> original question?

Yes. You want a selector like li.mainmenulast instead of the
..mainmenulast li you now have. Then, as Richard (rf) suggested in the
first response, use "none," as in

li.mainmenulast { border-right:none; }

(although "0" or 20px" might also work well enough).

Also, in future postings to this group, please provide a URL instead of
pasted code.

--
John
Read about the UIP: http://improve-usenet.org/

12/03/2008, 16h42

krys.squires@gmail.com wrote:

> this is all very interesting, but can anyone actually me with my
> original question?

--> border-right: 1px solid #dab763;
puts the border on all <li> elements in the menu.

While there are more elegant ways, add this to your code, as the
simplest way:

<li style="border-right: 0;"><a href="contact_us.html">Contact
Us</a></li>

...and dump the class="mainmenulast"

But you should pay attention to all the other comments in the thread as
well. Especially the microfont sizing.
http://k75s.home.att.net/fontsize.html

--
-bts
-Motorcycles defy gravity; cars just suck

12/03/2008, 18h55

On 12 Mar, 15:10, krys.squi...@gmail.com wrote:
> this is all very interesting, but can anyone actually me with my
> original question?

Post a URL and some of us will think about it, in a way we wouldn't
for a posted fragment.

12/03/2008, 20h12

Beauregard T. Shagnasty wrote:
> krys.squires@gmail.com wrote:
>
>> this is all very interesting, but can anyone actually me with my
>> original question?
>
> --> border-right: 1px solid #dab763;
> puts the border on all <li> elements in the menu.
>
> While there are more elegant ways, add this to your code, as the
> simplest way:
>
> <li style="border-right: 0;"><a href="contact_us.html">Contact
> Us</a></li>
>
> ..and dump the class="mainmenulast"

I'd rather dump more and have just one class menu and use first-child
and let IE6 hang!

ul.menu { margin: 0; padding: 0; list-style: none; }

ul.menu li {
display: block; float: left; padding: 0 .5em;
border-left: 1px solid #dab763;
}

ul.menu li:first-child { border-left: 0; }

..menu a:link, .menu a:visited, .menu a:active {
text-decoration: none; color:#7d7d79;
font-family: arial, verdana, helvetica, sans-serif;
font-weight: bold;
}

..menu a:hover { color:#dd4444; }

Much cleaner...

<ul class="menu">
<li><a href="our_story.html">Our Story</a></li>
<li><a href="why_choose_us.html">Why Choose Us?</a></li>
<li><a href="industry_affiliations.html">Industry Affiliations</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

12/03/2008, 23h07

dorayme wrote:
> In article
> <9b3de763-25d6-46c1-be6c-b4ea8432bc82@e6g2000prf.googlegroups.com
>> ,
> krys.squires@gmail.com wrote:
>
>> this is all very interesting, but can anyone actually me with my
>> original question?
>
> rf did!
>

It looks like he did, and I started to say just that in a reply to the
OP, but upon closer inspection it seems that Richard's answer was
incomplete. The OP had some mangled selectors and rf didn't notice.

--
John

12/03/2008, 23h55

"John Hosking" <John@DELETE.Hosking.name.INVALID> wrote in message
news:47d858b4_6@news.bluewin.ch...
> dorayme wrote:
>> In article
>> <9b3de763-25d6-46c1-be6c-b4ea8432bc82@e6g2000prf.googlegroups.com
>>> ,
>> krys.squires@gmail.com wrote:
>>
>>> this is all very interesting, but can anyone actually me with my
>>> original question?
>>
>> rf did!
>>
>
> It looks like he did, and I started to say just that in a reply to the OP,
> but upon closer inspection it seems that Richard's answer was incomplete.
> The OP had some mangled selectors and rf didn't notice.

Indeed I missed the mangled selectors. However if a URL had been supplied
(op: BIG BLOODY HINT) I would have immediately spotted the problem with the
firebug inspector.

I'm just about getting over even looking at a post that does not supply a
URL, especially from these bedamned google groupers. Then again I'm just
about getting over even looking at a post from these bedamned google
groupers.
</rant>
--
Richard.

12/03/2008, 07h48	#1
krys.squires@gmail.com Messages: n/a Hébergeur:	Styling menus I'd really appreciate if someone would explain to me how to remove the vertical line on the right of the last item in this page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>title</title> <style type="text/css"> ..mainmenu { padding:0px; margin:0px; } ..mainmenu li { list-style-type:none; float:left; display:block; padding:0px 13px 0px 13px; font-family:arial, verdana, sans-serif; font-weight:bold; text-transform: uppercase; font-size:8pt; text-align:center; color:#7d7d79; /should be #7d7d79/ border-right: 1px solid #dab763; white-space:nowrap; } ..mainmenu a, .mainmenu a:link, .mainmenu a:visited, .mainmenu a:active { text-decoration:none; color:#7d7d79; font-family:arial, verdana, sans-serif; font-weight:bold; font-size:8pt; } ..mainmenu a:hover { color:#dd4444; } ..mainmenulast li { border-right: 0px ; } </style> </head> <body> <ul class="mainmenu"> <li><a href="our_story.html">Our Story</a></li> <li><a href="why_choose_us.html">Why Choose Us?</a></li> <li><a href="industry_affiliations.html">Industry Affiliations</a></ li> <li class="mainmenulast"><a href="contact_us.html">Contact Us</a></li> </ul> </body> </html> Thanks!

12/03/2008, 08h26	#2
rf Messages: n/a Hébergeur:	Re: Styling menus <krys.squires@gmail.com> wrote in message news:5484def3-c1c2-49bf-baf9-98085618a05e@s37g2000prg.googlegroups.com... > I'd really appreciate if someone would explain to me how to remove the > vertical line on the right of the last item in this page: > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTML is not viable on the web. IE simply does not understand it. > .mainmenu li { > font-size:8pt;' Way too small. Use font-size: 100% or omit entirely. > .mainmenu a, .mainmenu a:link, .mainmenu a:visited, .mainmenu a:active > { > text-decoration:none; > color:#7d7d79; > font-family:arial, verdana, sans-serif; > font-weight:bold; > font-size:8pt; You don't need to repeat most of this stuff. It will be inherited > .mainmenulast li { > border-right: 0px ; border-right: none; -- Richard.

12/03/2008, 11h13	#3
C A Upsdell Messages: n/a Hébergeur:	Re: Styling menus rf wrote: >> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" >> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> > > XHTML is not viable on the web. IE simply does not understand it. IE renders XHTML as HTML. This does not make it unviable. It may make it inadvisable, perhaps, but not unviable.

12/03/2008, 11h24	#4
Johannes Koch Messages: n/a Hébergeur:	Re: Styling menus C A Upsdell schrieb: > rf wrote: >>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" >>> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> >> >> XHTML is not viable on the web. IE simply does not understand it. > > IE renders XHTML as HTML. when sent as text/html, which is not appropriate for XHTML 1.1. -- Johannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.)

12/03/2008, 16h10	#5
krys.squires@gmail.com Messages: n/a Hébergeur:	Re: Styling menus this is all very interesting, but can anyone actually me with my original question?

12/03/2008, 16h33	#6
Andreas Prilop Messages: n/a Hébergeur:	Re: Styling menus On Wed, 12 Mar 2008, krys.squires@gmail.com wrote: > this is all very interesting, but can anyone actually me with my > original question? Welcome to Usenet! -- In memoriam Alan J. Flavell http://groups.google.com/groups/sear...Alan.J.Flavell

12/03/2008, 16h37	#7
Jonathan N. Little Messages: n/a Hébergeur:	Re: Styling menus krys.squires@gmail.com wrote: > > this is all very interesting, but can anyone actually me with my > original question? 1) learn to quote 2) learn to post URLs 3) learn CSS ..mainmenulast li { border-right: 0px; } does not apply to <li class="mainmenulast">... but to a LI that is a descendant of some element of class "mainmenulast" try: li.mainmenulast { border-right: 0; } -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com

12/03/2008, 16h41	#8
John Hosking Messages: n/a Hébergeur:	Re: Styling menus krys.squires@gmail.com wrote: > > this is all very interesting, What is? Please quote what you're replying to. > but can anyone actually me with my > original question? Yes. You want a selector like li.mainmenulast instead of the ..mainmenulast li you now have. Then, as Richard (rf) suggested in the first response, use "none," as in li.mainmenulast { border-right:none; } (although "0" or 20px" might also work well enough). Also, in future postings to this group, please provide a URL instead of pasted code. -- John Read about the UIP: http://improve-usenet.org/

12/03/2008, 16h42	#9
Beauregard T. Shagnasty Messages: n/a Hébergeur:	Re: Styling menus krys.squires@gmail.com wrote: > this is all very interesting, but can anyone actually me with my > original question? --> border-right: 1px solid #dab763; puts the border on all <li> elements in the menu. While there are more elegant ways, add this to your code, as the simplest way: <li style="border-right: 0;"><a href="contact_us.html">Contact Us</a></li> ...and dump the class="mainmenulast" But you should pay attention to all the other comments in the thread as well. Especially the microfont sizing. http://k75s.home.att.net/fontsize.html -- -bts -Motorcycles defy gravity; cars just suck

12/03/2008, 18h55	#10
Andy Dingley Messages: n/a Hébergeur:	Re: Styling menus On 12 Mar, 15:10, krys.squi...@gmail.com wrote: > this is all very interesting, but can anyone actually me with my > original question? Post a URL and some of us will think about it, in a way we wouldn't for a posted fragment.

12/03/2008, 20h12	#11
Jonathan N. Little Messages: n/a Hébergeur:	Re: Styling menus Beauregard T. Shagnasty wrote: > krys.squires@gmail.com wrote: > >> this is all very interesting, but can anyone actually me with my >> original question? > > --> border-right: 1px solid #dab763; > puts the border on all <li> elements in the menu. > > While there are more elegant ways, add this to your code, as the > simplest way: > > <li style="border-right: 0;"><a href="contact_us.html">Contact > Us</a></li> > > ..and dump the class="mainmenulast" I'd rather dump more and have just one class menu and use first-child and let IE6 hang! ul.menu { margin: 0; padding: 0; list-style: none; } ul.menu li { display: block; float: left; padding: 0 .5em; border-left: 1px solid #dab763; } ul.menu li:first-child { border-left: 0; } ..menu a:link, .menu a:visited, .menu a:active { text-decoration: none; color:#7d7d79; font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; } ..menu a:hover { color:#dd4444; } Much cleaner... <ul class="menu"> <li><a href="our_story.html">Our Story</a></li> <li><a href="why_choose_us.html">Why Choose Us?</a></li> <li><a href="industry_affiliations.html">Industry Affiliations</a></li> <li><a href="contact_us.html">Contact Us</a></li> </ul> -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com

12/03/2008, 23h07	#12
John Hosking Messages: n/a Hébergeur:	Re: Styling menus dorayme wrote: > In article > <9b3de763-25d6-46c1-be6c-b4ea8432bc82@e6g2000prf.googlegroups.com >> , > krys.squires@gmail.com wrote: > >> this is all very interesting, but can anyone actually me with my >> original question? > > rf did! > It looks like he did, and I started to say just that in a reply to the OP, but upon closer inspection it seems that Richard's answer was incomplete. The OP had some mangled selectors and rf didn't notice. -- John

12/03/2008, 23h55	#13
rf Messages: n/a Hébergeur:	Re: Styling menus "John Hosking" <John@DELETE.Hosking.name.INVALID> wrote in message news:47d858b4_6@news.bluewin.ch... > dorayme wrote: >> In article >> <9b3de763-25d6-46c1-be6c-b4ea8432bc82@e6g2000prf.googlegroups.com >>> , >> krys.squires@gmail.com wrote: >> >>> this is all very interesting, but can anyone actually me with my >>> original question? >> >> rf did! >> > > It looks like he did, and I started to say just that in a reply to the OP, > but upon closer inspection it seems that Richard's answer was incomplete. > The OP had some mangled selectors and rf didn't notice. Indeed I missed the mangled selectors. However if a URL had been supplied (op: BIG BLOODY HINT) I would have immediately spotted the problem with the firebug inspector. I'm just about getting over even looking at a post that does not supply a URL, especially from these bedamned google groupers. Then again I'm just about getting over even looking at a post from these bedamned google groupers. </rant> -- Richard.

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email