How can we isolate one table when using css?

Thank you very much for your answer. Does this mean that where we would
normally write for a table in our webpage:

<table> xxxxxxxxxx etc.
</table>

that I will write, in code on my webpage, for my specific table:

< table class="mytable"> xxxxxxxxxxxxxetc.
</ table class="mytable">

?? (and then refer in css sheet as you describe)



"Steve Easton" wrote:

> Give the table a class name, and then just apply the CSS to only that class.
>
> < table class="mytable">
>
>
> ..mytable{
>
> css stuff here
>
> }
>
>
> --
>
> Steve Easton
> Microsoft MVP FrontPage
> FP Cleaner
> http://www.95isalive.com/fixes/fpclean.htm
> Hit Me FP
> http://www.95isalive.com/fixes/HitMeFP.htm
>
>
> "Pinkpanther" <Pinkpanther RemoveThis @discussions.microsoft.com> wrote in message
> news:E8C29E10-F9BE-4AE2-9EF3-1ACF769F15D8@microsoft.com...
> > Hello,
> >
> > I've been following the w3schools great tutorials on css. I want to put a
> > horizontal menu in my page but when I insert it, it makes the values apply to
> > ALL links on the page! This is the normal page before (it's a test page):
> > http://www.theenginerevolution.com/ord.html
> >
> > and this is the page when I have put the css in and all links have gone
> > purple etc.: http://www.theenginerevolution.com/ord-2.html
> >
> > Could someone advise how to isolate the values to only apply to the
> > horizontal purple navbar?
> >
> > Many thanks for your time.
>
>
>

When you apply a css class (like you did for all a links) it applies to the whole page

Create a style class in the head section for the links in the horizontal nav
<style type="text/css">
a.white {color: white; text-decoration: none}
a.white:link {color: white; text-decoration: none}
a.white:visited {color: white; text-decoration: none}
a.white:hover {color: white; text-decoration: underline}
a.white:active {color: white; text-decoration: none}
</style>

And apply the class to the links in the horizontal nav
<a href="yourlink.htm" class="white">

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


"Pinkpanther" <Pinkpanther.TakeThisOut@discussions.microsoft.com> wrote in message news:E8C29E10-F9BE-4AE2-9EF3-1ACF769F15D8@microsoft.com...
| Hello,
|
| I've been following the w3schools great tutorials on css. I want to put a
| horizontal menu in my page but when I insert it, it makes the values apply to
| ALL links on the page! This is the normal page before (it's a test page):
| http://www.theenginerevolution.com/ord.html
|
| and this is the page when I have put the css in and all links have gone
| purple etc.: http://www.theenginerevolution.com/ord-2.html
|
| Could someone advise how to isolate the values to only apply to the
| horizontal purple navbar?
|
| Many thanks for your time.

Consider this more efficient approach -

<style type="text/css">
table#white a{color: white; text-decoration: none}
table#white a:hover {color: white; text-decoration: underline}
</style>

and then -

<table id="white">

All links within this table will be styled according to this new rule.

--
Murray
MVP Expression Web


"Stefan B Rusynko" <sbr_enjoy.TakeThisOut@hotmail.com> wrote in message
news:eL9QsGbCJHA.1628@TK2MSFTNGP03.phx.gbl...
> When you apply a css class (like you did for all a links) it applies to
> the whole page
>
> Create a style class in the head section for the links in the horizontal
> nav
> <style type="text/css">
> a.white {color: white; text-decoration: none}
> a.white:link {color: white; text-decoration: none}
> a.white:visited {color: white; text-decoration: none}
> a.white:hover {color: white; text-decoration: underline}
> a.white:active {color: white; text-decoration: none}
> </style>
>
> And apply the class to the links in the horizontal nav
> <a href="yourlink.htm" class="white">
>
> --
>
> _____________________________________________
> SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
> "Warning - Using the F1 Key will not break anything!" (-;
> _____________________________________________
>
>
> "Pinkpanther" <Pinkpanther.TakeThisOut@discussions.microsoft.com> wrote in message
> news:E8C29E10-F9BE-4AE2-9EF3-1ACF769F15D8@microsoft.com...
> | Hello,
> |
> | I've been following the w3schools great tutorials on css. I want to put
> a
> | horizontal menu in my page but when I insert it, it makes the values
> apply to
> | ALL links on the page! This is the normal page before (it's a test
> page):
> | http://www.theenginerevolution.com/ord.html
> |
> | and this is the page when I have put the css in and all links have gone
> | purple etc.: http://www.theenginerevolution.com/ord-2.html
> |
> | Could someone advise how to isolate the values to only apply to the
> | horizontal purple navbar?
> |
> | Many thanks for your time.
>
>

Thank you for your replies. At the moment I am still working on Stefan's
method, and at last I feel I'm getting somewhere
I've uploaded a tiny, simple page with BLUE links successfully 'connected'
to the stylesheet, but I still can't stop other <li> "listed items" from
being displayed in the same way.
I've made the page very simple, and would be really grateful if someone has
the time to have a quick look and say how to get the <li> rule to apply ONLY
to the links governed by the stylesheet (which is included in the <head>)
The page is at: http://www.theenginerevolution.com/cssupload.htm


Many thanks indeed for your time.



"Stefan B Rusynko" wrote:

> When you apply a css class (like you did for all a links) it applies to the whole page
>
> Create a style class in the head section for the links in the horizontal nav
> <style type="text/css">
> a.white {color: white; text-decoration: none}
> a.white:link {color: white; text-decoration: none}
> a.white:visited {color: white; text-decoration: none}
> a.white:hover {color: white; text-decoration: underline}
> a.white:active {color: white; text-decoration: none}
> </style>
>
> And apply the class to the links in the horizontal nav
> <a href="yourlink.htm" class="white">
>
> --
>
> _____________________________________________
> SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
> "Warning - Using the F1 Key will not break anything!" (-;
> _____________________________________________
>
>
> "Pinkpanther" <Pinkpanther DeleteThis @discussions.microsoft.com> wrote in message news:E8C29E10-F9BE-4AE2-9EF3-1ACF769F15D8@microsoft.com...
> | Hello,
> |
> | I've been following the w3schools great tutorials on css. I want to put a
> | horizontal menu in my page but when I insert it, it makes the values apply to
> | ALL links on the page! This is the normal page before (it's a test page):
> | http://www.theenginerevolution.com/ord.html
> |
> | and this is the page when I have put the css in and all links have gone
> | purple etc.: http://www.theenginerevolution.com/ord-2.html
> |
> | Could someone advise how to isolate the values to only apply to the
> | horizontal purple navbar?
> |
> | Many thanks for your time.
>
>
>

Use Murray's approach to limit the li style to your horizontal nav table
<style type="text/css">
table#white a {color: white; text-decoration: none}
table#white a:link {color: white; text-decoration: none}
table#white a:visited {color: white; text-decoration: none}
table#white a:hover {color: white; text-decoration: underline}
table#white a:active {color: white; text-decoration: none}
table#white li {display: inline }
</style>

Minimal code below:
<table class="white">
<tr><td><ul><li><a .... >Link 1</a></li><li><a .... >Link 2</a></li></ul></td></tr>
</table>

BTW
The same effect can be accomplished w/o a table by using div#white in the style sheet instead of table#white and
<div class="white">
<ul><li><a .... >Link 1</a></li><li><a .... >Link 2</a></li></ul>
</div>
Or with a unique ID instead of a style class by using say #topnav in the style sheet instead of table#white and
<div id="topnav">
<ul><li><a .... >Link 1</a></li><li><a .... >Link 2</a></li></ul>
</div>

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


"Pinkpanther" <Pinkpanther DeleteThis @discussions.microsoft.com> wrote in message news:DE39DD1A-790C-4672-9B6C-1BF2F29C72D4@microsoft.com...
| Thank you for your replies. At the moment I am still working on Stefan's
| method, and at last I feel I'm getting somewhere
| I've uploaded a tiny, simple page with BLUE links successfully 'connected'
| to the stylesheet, but I still can't stop other <li> "listed items" from
| being displayed in the same way.
| I've made the page very simple, and would be really grateful if someone has
| the time to have a quick look and say how to get the <li> rule to apply ONLY
| to the links governed by the stylesheet (which is included in the <head>)
| The page is at: http://www.theenginerevolution.com/cssupload.htm
|
|
| Many thanks indeed for your time.
|
|
|
| "Stefan B Rusynko" wrote:
|
| > When you apply a css class (like you did for all a links) it applies to the whole page
| >
| > Create a style class in the head section for the links in the horizontal nav
| > <style type="text/css">
| > a.white {color: white; text-decoration: none}
| > a.white:link {color: white; text-decoration: none}
| > a.white:visited {color: white; text-decoration: none}
| > a.white:hover {color: white; text-decoration: underline}
| > a.white:active {color: white; text-decoration: none}
| > </style>
| >
| > And apply the class to the links in the horizontal nav
| > <a href="yourlink.htm" class="white">
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > _____________________________________________
| >
| >
| > "Pinkpanther" <Pinkpanther DeleteThis @discussions.microsoft.com> wrote in message
news:E8C29E10-F9BE-4AE2-9EF3-1ACF769F15D8@microsoft.com...
| > | Hello,
| > |
| > | I've been following the w3schools great tutorials on css. I want to put a
| > | horizontal menu in my page but when I insert it, it makes the values apply to
| > | ALL links on the page! This is the normal page before (it's a test page):
| > | http://www.theenginerevolution.com/ord.html
| > |
| > | and this is the page when I have put the css in and all links have gone
| > | purple etc.: http://www.theenginerevolution.com/ord-2.html
| > |
| > | Could someone advise how to isolate the values to only apply to the
| > | horizontal purple navbar?
| > |
| > | Many thanks for your time.
| >
| >
| >

Stefan, Thank you very much for this great reply. I lost this thread and
have been trying to find it since last week - the email notifications were
just bringing up a blank page... is there any way to 'favorite' particular
threads in this forum??

Many thanks for all your great help!



"Stefan B Rusynko" wrote:

> Use Murray's approach to limit the li style to your horizontal nav table
> <style type="text/css">
> table#white a {color: white; text-decoration: none}
> table#white a:link {color: white; text-decoration: none}
> table#white a:visited {color: white; text-decoration: none}
> table#white a:hover {color: white; text-decoration: underline}
> table#white a:active {color: white; text-decoration: none}
> table#white li {display: inline }
> </style>
>
> Minimal code below:
> <table class="white">
> <tr><td><ul><li><a .... >Link 1</a></li><li><a .... >Link 2</a></li></ul></td></tr>
> </table>
>
> BTW
> The same effect can be accomplished w/o a table by using div#white in the style sheet instead of table#white and
> <div class="white">
> <ul><li><a .... >Link 1</a></li><li><a .... >Link 2</a></li></ul>
> </div>
> Or with a unique ID instead of a style class by using say #topnav in the style sheet instead of table#white and
> <div id="topnav">
> <ul><li><a .... >Link 1</a></li><li><a .... >Link 2</a></li></ul>
> </div>
>
> --
>
> _____________________________________________
> SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
> "Warning - Using the F1 Key will not break anything!" (-;
> _____________________________________________
>
>
> "Pinkpanther" <Pinkpanther.DeleteThis@discussions.microsoft.com> wrote in message news:DE39DD1A-790C-4672-9B6C-1BF2F29C72D4@microsoft.com...
> | Thank you for your replies. At the moment I am still working on Stefan's
> | method, and at last I feel I'm getting somewhere
> | I've uploaded a tiny, simple page with BLUE links successfully 'connected'
> | to the stylesheet, but I still can't stop other <li> "listed items" from
> | being displayed in the same way.
> | I've made the page very simple, and would be really grateful if someone has
> | the time to have a quick look and say how to get the <li> rule to apply ONLY
> | to the links governed by the stylesheet (which is included in the <head>)
> | The page is at: http://www.theenginerevolution.com/cssupload.htm
> |
> |
> | Many thanks indeed for your time.
> |
> |
> |
> | "Stefan B Rusynko" wrote:
> |
> | > When you apply a css class (like you did for all a links) it applies to the whole page
> | >
> | > Create a style class in the head section for the links in the horizontal nav
> | > <style type="text/css">
> | > a.white {color: white; text-decoration: none}
> | > a.white:link {color: white; text-decoration: none}
> | > a.white:visited {color: white; text-decoration: none}
> | > a.white:hover {color: white; text-decoration: underline}
> | > a.white:active {color: white; text-decoration: none}
> | > </style>
> | >
> | > And apply the class to the links in the horizontal nav
> | > <a href="yourlink.htm" class="white">
> | >
> | > --
> | >
> | > _____________________________________________
> | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
> | > "Warning - Using the F1 Key will not break anything!" (-;
> | > _____________________________________________
> | >
> | >
> | > "Pinkpanther" <Pinkpanther.DeleteThis@discussions.microsoft.com> wrote in message
> news:E8C29E10-F9BE-4AE2-9EF3-1ACF769F15D8@microsoft.com...
> | > | Hello,
> | > |
> | > | I've been following the w3schools great tutorials on css. I want to put a
> | > | horizontal menu in my page but when I insert it, it makes the values apply to
> | > | ALL links on the page! This is the normal page before (it's a test page):
> | > | http://www.theenginerevolution.com/ord.html
> | > |
> | > | and this is the page when I have put the css in and all links have gone
> | > | purple etc.: http://www.theenginerevolution.com/ord-2.html
> | > |
> | > | Could someone advise how to isolate the values to only apply to the
> | > | horizontal purple navbar?
> | > |
> | > | Many thanks for your time.
> | >
> | >
> | >
>
>
>