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