How can we isolate one table when using css?

P

Pinkpanther

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.
 
P

Pinkpanther

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)
 
S

Stefan B Rusynko

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!" (-;
_____________________________________________


| 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.
 
M

Murray

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.
 
P

Pinkpanther

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.
 
S

Stefan B Rusynko

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!" (-;
_____________________________________________


| 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!" (-;
| > _____________________________________________
| >
| >
| > | 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.
| >
| >
| >
 
P

pinkpanther

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 said:
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!" (-;
_____________________________________________


| 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!" (-;
| > _____________________________________________
| >
| >
| > | 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.
| >
| >
| >
 
P

pinkpanther

I'm still having a problem. I apologise for all this code but:

This is the w3schools.com code that I want basically to use:

<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

This is how I have incorporated the above code with the code you gave me -
which obviously I have not done correctly as it is just coming out 2 tables
with vertical list of ordinary links; this is the code I have put:

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

<style type="text/css">
table#white ul {float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;}

table#white a{float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;}

table#white a:hover {background-color:#ff3300}
table#white li {display:inline}



</style>


</head>

<body>

<table class="white" cellpadding="0" cellspacing="0" width="679" height="109">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" width="627">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p> </td>
<td height="109" width="52"> </td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" width="679">
<!-- MSTableType="layout" -->
<tr>
<td valign="top">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p> </td>
</tr>
</table>

</body>

(for future reference, is it better to put the page on the web and supply
the link here or is it better to do it as I have done here, putting the code
here? )

Thank you very much for your help.




pinkpanther said:
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 said:
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!" (-;
_____________________________________________


| 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!" (-;
| > _____________________________________________
| >
| >
| > | 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.
| >
| >
| >
 
S

Stefan B Rusynko

The code from Murray is using the unique id (white) as an identifier for the table style

From your code you should just need to change

<table class="white" cellpadding="0" cellspacing="0" width="679" height="109">
to
<table id="white" cellpadding="0" cellspacing="0" width="679" height="109">

PS
not sure why your page has a stray <p> tag after each of your lists
- or why you are setting a table and cell height in your nav table
(table heights are deprecated, and not fully supported - add a transparent gif to your second empty cell if your intent is to force
some sort of vertical spacing)

--

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


| I'm still having a problem. I apologise for all this code but:
|
| This is the w3schools.com code that I want basically to use:
|
| <head>
| <style type="text/css">
| ul
| {
| float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;
| }
| a
| {
| float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;
| }
| a:hover {background-color:#ff3300}
| li {display:inline}
| </style>
| </head>
|
| This is how I have incorporated the above code with the code you gave me -
| which obviously I have not done correctly as it is just coming out 2 tables
| with vertical list of ordinary links; this is the code I have put:
|
| <head>
| <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
| <title>New Page 1</title>
|
| <style type="text/css">
| table#white ul {float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;}
|
| table#white a{float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;}
|
| table#white a:hover {background-color:#ff3300}
| table#white li {display:inline}
|
|
|
| </style>
|
|
| </head>
|
| <body>
|
| <table class="white" cellpadding="0" cellspacing="0" width="679" height="109">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top" width="627">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| <td height="109" width="52"> </td>
| </tr>
| </table>
|
| <table cellpadding="0" cellspacing="0" width="679">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| </tr>
| </table>
|
| </body>
|
| (for future reference, is it better to put the page on the web and supply
| the link here or is it better to do it as I have done here, putting the code
| here? )
|
| Thank you very much for your help.
|
|
|
|
| "pinkpanther" wrote:
|
| > 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!" (-;
| > > _____________________________________________
| > >
| > >
| > > | 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!" (-;
| > > | > _____________________________________________
| > > | >
| > > | >
| > > | > > | > | 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.
| > > | >
| > > | >
| > > | >
| > >
| > >
| > >
 
P

pinkpanther

Stefan, thank you so, so much for all your help :) !
I've done it using the <div> option you gave and have copied all the posts
here for future reference as I get more understanding of css.

re your 'ps' about the tables heights, etc.... it is how Frontpage makes
them. - would it have anything to do with the sort of 'Doctype' at the top
of the page?? I have got this at the top of all my pages:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

but yesterday I read something that made me think that there are different
versions of Doctypes, so maybe my version is going out of date or something?




Stefan B Rusynko said:
The code from Murray is using the unique id (white) as an identifier for the table style

From your code you should just need to change

<table class="white" cellpadding="0" cellspacing="0" width="679" height="109">
to
<table id="white" cellpadding="0" cellspacing="0" width="679" height="109">

PS
not sure why your page has a stray <p> tag after each of your lists
- or why you are setting a table and cell height in your nav table
(table heights are deprecated, and not fully supported - add a transparent gif to your second empty cell if your intent is to force
some sort of vertical spacing)

--

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


| I'm still having a problem. I apologise for all this code but:
|
| This is the w3schools.com code that I want basically to use:
|
| <head>
| <style type="text/css">
| ul
| {
| float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;
| }
| a
| {
| float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;
| }
| a:hover {background-color:#ff3300}
| li {display:inline}
| </style>
| </head>
|
| This is how I have incorporated the above code with the code you gave me -
| which obviously I have not done correctly as it is just coming out 2 tables
| with vertical list of ordinary links; this is the code I have put:
|
| <head>
| <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
| <title>New Page 1</title>
|
| <style type="text/css">
| table#white ul {float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;}
|
| table#white a{float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;}
|
| table#white a:hover {background-color:#ff3300}
| table#white li {display:inline}
|
|
|
| </style>
|
|
| </head>
|
| <body>
|
| <table class="white" cellpadding="0" cellspacing="0" width="679" height="109">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top" width="627">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| <td height="109" width="52"> </td>
| </tr>
| </table>
|
| <table cellpadding="0" cellspacing="0" width="679">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| </tr>
| </table>
|
| </body>
|
| (for future reference, is it better to put the page on the web and supply
| the link here or is it better to do it as I have done here, putting the code
| here? )
|
| Thank you very much for your help.
|
|
|
|
| "pinkpanther" wrote:
|
| > 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!" (-;
| > > _____________________________________________
| > >
| > >
| > > | 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!" (-;
| > > | > _____________________________________________
| > > | >
| > > | >
| > > | > > | > | 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.
| > > | >
| > > | >
| > > | >
| > >
| > >
| > >
 
M

Murray

(table heights are deprecated

Table heights are and always have been invalid HTML. They were never part
of the HTML specification. To get deprecated, one has to have been 'legal'
at some point. Table heights never were.

--
Murray
MVP Expression Web


Stefan B Rusynko said:
The code from Murray is using the unique id (white) as an identifier for
the table style

From your code you should just need to change

<table class="white" cellpadding="0" cellspacing="0" width="679"
height="109">
to
<table id="white" cellpadding="0" cellspacing="0" width="679"
height="109">

PS
not sure why your page has a stray <p> tag after each of your lists
- or why you are setting a table and cell height in your nav table
(table heights are deprecated, and not fully supported - add a transparent
gif to your second empty cell if your intent is to force
some sort of vertical spacing)

--

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


| I'm still having a problem. I apologise for all this code but:
|
| This is the w3schools.com code that I want basically to use:
|
| <head>
| <style type="text/css">
| ul
| {
| float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;
| }
| a
| {
| float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;
| }
| a:hover {background-color:#ff3300}
| li {display:inline}
| </style>
| </head>
|
| This is how I have incorporated the above code with the code you gave
me -
| which obviously I have not done correctly as it is just coming out 2
tables
| with vertical list of ordinary links; this is the code I have put:
|
| <head>
| <meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
| <title>New Page 1</title>
|
| <style type="text/css">
| table#white ul {float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;}
|
| table#white a{float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;}
|
| table#white a:hover {background-color:#ff3300}
| table#white li {display:inline}
|
|
|
| </style>
|
|
| </head>
|
| <body>
|
| <table class="white" cellpadding="0" cellspacing="0" width="679"
height="109">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top" width="627">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| <td height="109" width="52"> </td>
| </tr>
| </table>
|
| <table cellpadding="0" cellspacing="0" width="679">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| </tr>
| </table>
|
| </body>
|
| (for future reference, is it better to put the page on the web and
supply
| the link here or is it better to do it as I have done here, putting the
code
| here? )
|
| Thank you very much for your help.
|
|
|
|
| "pinkpanther" wrote:
|
| > 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!" (-;
| > > _____________________________________________
| > >
| > >
message
| > > | 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!" (-;
| > > | > _____________________________________________
| > > | >
| > > | >
message
| > > | > > | > | 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.
| > > | >
| > > | >
| > > | >
| > >
| > >
| > >
 
M

Murray

it is how Frontpage makes

Not if you never click and drag a border it's not. And you would do well to
eliminate that method from your interaction with tables, anyhow.
would it have anything to do with the sort of 'Doctype' at the top
of the page??
No.

but yesterday I read something that made me think that there are different
versions of Doctypes

There are 4 in use mostly -

1. HTML4.01 Loose (Transitional)
2. HTML 4.01 Strict
3. XHTML 1.0 Loose
4. XHTML 1.0 Strict

You should use a doctype that is valid and complete to prevent the browser
from trying to render your page in the "no doctype" mode, called "Quirks
mode", which is different from one browser to the next. At least when your
page is rendered in the "doctype" mode, called "Standards mode", you get the
most reliable rendering from one browser to another (although there will
still be some, mostly minor, differences).

You should choose which doctype to use on your pages by considering your
ability to sustain code that is consistent with that doctype. For most
users here that would be HTML 4.01 Loose.
--
Murray
MVP Expression Web


pinkpanther said:
Stefan, thank you so, so much for all your help :) !
I've done it using the <div> option you gave and have copied all the posts
here for future reference as I get more understanding of css.

re your 'ps' about the tables heights, etc.... it is how Frontpage makes
them. - would it have anything to do with the sort of 'Doctype' at the
top
of the page?? I have got this at the top of all my pages:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

but yesterday I read something that made me think that there are different
versions of Doctypes, so maybe my version is going out of date or
something?




Stefan B Rusynko said:
The code from Murray is using the unique id (white) as an identifier for
the table style

From your code you should just need to change

<table class="white" cellpadding="0" cellspacing="0" width="679"
height="109">
to
<table id="white" cellpadding="0" cellspacing="0" width="679"
height="109">

PS
not sure why your page has a stray <p> tag after each of your lists
- or why you are setting a table and cell height in your nav table
(table heights are deprecated, and not fully supported - add a
transparent gif to your second empty cell if your intent is to force
some sort of vertical spacing)

--

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


| I'm still having a problem. I apologise for all this code but:
|
| This is the w3schools.com code that I want basically to use:
|
| <head>
| <style type="text/css">
| ul
| {
| float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;
| }
| a
| {
| float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;
| }
| a:hover {background-color:#ff3300}
| li {display:inline}
| </style>
| </head>
|
| This is how I have incorporated the above code with the code you gave
me -
| which obviously I have not done correctly as it is just coming out 2
tables
| with vertical list of ordinary links; this is the code I have put:
|
| <head>
| <meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
| <title>New Page 1</title>
|
| <style type="text/css">
| table#white ul {float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;}
|
| table#white a{float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;}
|
| table#white a:hover {background-color:#ff3300}
| table#white li {display:inline}
|
|
|
| </style>
|
|
| </head>
|
| <body>
|
| <table class="white" cellpadding="0" cellspacing="0" width="679"
height="109">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top" width="627">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| <td height="109" width="52"> </td>
| </tr>
| </table>
|
| <table cellpadding="0" cellspacing="0" width="679">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| </tr>
| </table>
|
| </body>
|
| (for future reference, is it better to put the page on the web and
supply
| the link here or is it better to do it as I have done here, putting the
code
| here? )
|
| Thank you very much for your help.
|
|
|
|
| "pinkpanther" wrote:
|
| > 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!" (-;
| > > _____________________________________________
| > >
| > >
message
| > > | 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!" (-;
| > > | > _____________________________________________
| > > | >
| > > | >
message
| > > | > > | > | 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.
| > > | >
| > > | >
| > > | >
| > >
| > >
| > >
 
P

pinkpanther

Murray, thank you for still more great info

Should we only make tables by stating their size first then? ...and if we
want to change their size do we do it the same way?





Murray said:
it is how Frontpage makes
them

Not if you never click and drag a border it's not. And you would do well to
eliminate that method from your interaction with tables, anyhow.
would it have anything to do with the sort of 'Doctype' at the top
of the page??
No.

but yesterday I read something that made me think that there are different
versions of Doctypes

There are 4 in use mostly -

1. HTML4.01 Loose (Transitional)
2. HTML 4.01 Strict
3. XHTML 1.0 Loose
4. XHTML 1.0 Strict

You should use a doctype that is valid and complete to prevent the browser
from trying to render your page in the "no doctype" mode, called "Quirks
mode", which is different from one browser to the next. At least when your
page is rendered in the "doctype" mode, called "Standards mode", you get the
most reliable rendering from one browser to another (although there will
still be some, mostly minor, differences).

You should choose which doctype to use on your pages by considering your
ability to sustain code that is consistent with that doctype. For most
users here that would be HTML 4.01 Loose.
--
Murray
MVP Expression Web


pinkpanther said:
Stefan, thank you so, so much for all your help :) !
I've done it using the <div> option you gave and have copied all the posts
here for future reference as I get more understanding of css.

re your 'ps' about the tables heights, etc.... it is how Frontpage makes
them. - would it have anything to do with the sort of 'Doctype' at the
top
of the page?? I have got this at the top of all my pages:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

but yesterday I read something that made me think that there are different
versions of Doctypes, so maybe my version is going out of date or
something?




Stefan B Rusynko said:
The code from Murray is using the unique id (white) as an identifier for
the table style

From your code you should just need to change

<table class="white" cellpadding="0" cellspacing="0" width="679"
height="109">
to
<table id="white" cellpadding="0" cellspacing="0" width="679"
height="109">

PS
not sure why your page has a stray <p> tag after each of your lists
- or why you are setting a table and cell height in your nav table
(table heights are deprecated, and not fully supported - add a
transparent gif to your second empty cell if your intent is to force
some sort of vertical spacing)

--

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


| I'm still having a problem. I apologise for all this code but:
|
| This is the w3schools.com code that I want basically to use:
|
| <head>
| <style type="text/css">
| ul
| {
| float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;
| }
| a
| {
| float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;
| }
| a:hover {background-color:#ff3300}
| li {display:inline}
| </style>
| </head>
|
| This is how I have incorporated the above code with the code you gave
me -
| which obviously I have not done correctly as it is just coming out 2
tables
| with vertical list of ordinary links; this is the code I have put:
|
| <head>
| <meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
| <title>New Page 1</title>
|
| <style type="text/css">
| table#white ul {float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;}
|
| table#white a{float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;}
|
| table#white a:hover {background-color:#ff3300}
| table#white li {display:inline}
|
|
|
| </style>
|
|
| </head>
|
| <body>
|
| <table class="white" cellpadding="0" cellspacing="0" width="679"
height="109">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top" width="627">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| <td height="109" width="52"> </td>
| </tr>
| </table>
|
| <table cellpadding="0" cellspacing="0" width="679">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| </tr>
| </table>
|
| </body>
|
| (for future reference, is it better to put the page on the web and
supply
| the link here or is it better to do it as I have done here, putting the
code
| here? )
|
| Thank you very much for your help.
|
|
|
|
| "pinkpanther" wrote:
|
| > 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!" (-;
| > > _____________________________________________
| > >
| > >
message
| > > | 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!" (-;
 
M

Murray

That's how I would do it, yes.

--
Murray
MVP Expression Web


pinkpanther said:
Murray, thank you for still more great info

Should we only make tables by stating their size first then? ...and if we
want to change their size do we do it the same way?





Murray said:
it is how Frontpage makes
them

Not if you never click and drag a border it's not. And you would do well
to
eliminate that method from your interaction with tables, anyhow.
would it have anything to do with the sort of 'Doctype' at the top
of the page??
No.

but yesterday I read something that made me think that there are
different
versions of Doctypes

There are 4 in use mostly -

1. HTML4.01 Loose (Transitional)
2. HTML 4.01 Strict
3. XHTML 1.0 Loose
4. XHTML 1.0 Strict

You should use a doctype that is valid and complete to prevent the
browser
from trying to render your page in the "no doctype" mode, called "Quirks
mode", which is different from one browser to the next. At least when
your
page is rendered in the "doctype" mode, called "Standards mode", you get
the
most reliable rendering from one browser to another (although there will
still be some, mostly minor, differences).

You should choose which doctype to use on your pages by considering your
ability to sustain code that is consistent with that doctype. For most
users here that would be HTML 4.01 Loose.
--
Murray
MVP Expression Web


pinkpanther said:
Stefan, thank you so, so much for all your help :) !
I've done it using the <div> option you gave and have copied all the
posts
here for future reference as I get more understanding of css.

re your 'ps' about the tables heights, etc.... it is how Frontpage
makes
them. - would it have anything to do with the sort of 'Doctype' at the
top
of the page?? I have got this at the top of all my pages:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

but yesterday I read something that made me think that there are
different
versions of Doctypes, so maybe my version is going out of date or
something?




:

The code from Murray is using the unique id (white) as an identifier
for
the table style

From your code you should just need to change

<table class="white" cellpadding="0" cellspacing="0" width="679"
height="109">
to
<table id="white" cellpadding="0" cellspacing="0" width="679"
height="109">

PS
not sure why your page has a stray <p> tag after each of your lists
- or why you are setting a table and cell height in your nav table
(table heights are deprecated, and not fully supported - add a
transparent gif to your second empty cell if your intent is to force
some sort of vertical spacing)

--

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


| I'm still having a problem. I apologise for all this code but:
|
| This is the w3schools.com code that I want basically to use:
|
| <head>
| <style type="text/css">
| ul
| {
| float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;
| }
| a
| {
| float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;
| }
| a:hover {background-color:#ff3300}
| li {display:inline}
| </style>
| </head>
|
| This is how I have incorporated the above code with the code you
gave
me -
| which obviously I have not done correctly as it is just coming out 2
tables
| with vertical list of ordinary links; this is the code I have put:
|
| <head>
| <meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
| <title>New Page 1</title>
|
| <style type="text/css">
| table#white ul {float:left;
| width:100%;
| padding:0;
| margin:0;
| list-style-type:none;}
|
| table#white a{float:left;
| width:6em;
| text-decoration:none;
| color:white;
| background-color:purple;
| padding:0.2em 0.6em;
| border-right:1px solid white;}
|
| table#white a:hover {background-color:#ff3300}
| table#white li {display:inline}
|
|
|
| </style>
|
|
| </head>
|
| <body>
|
| <table class="white" cellpadding="0" cellspacing="0" width="679"
height="109">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top" width="627">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| <td height="109" width="52"> </td>
| </tr>
| </table>
|
| <table cellpadding="0" cellspacing="0" width="679">
| <!-- MSTableType="layout" -->
| <tr>
| <td valign="top">
| <ul>
| <li><a href="#">Link one</a></li>
| <li><a href="#">Link two</a></li>
| <li><a href="#">Link three</a></li>
| <li><a href="#">Link four</a></li>
| </ul>
| <p> </td>
| </tr>
| </table>
|
| </body>
|
| (for future reference, is it better to put the page on the web and
supply
| the link here or is it better to do it as I have done here, putting
the
code
| here? )
|
| Thank you very much for your help.
|
|
|
|
| "pinkpanther" wrote:
|
| > 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!" (-;
| > > _____________________________________________
| > >
| > >
message
| > > | 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!" (-;
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top