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, 07h48	#1 (permalink)
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 (permalink)
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 (permalink)
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 (permalink)
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 (permalink)
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 (permalink)
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 (permalink)
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 (permalink)
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/

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