css horizontal navigation menu

  jhatter 11:08 15 Oct 2007
Locked

Hi All

I'm new to CSS and I am having problems creating a horizontal navigation menu in Dreamweaver.

Having done all the work in Dreamweaver, the navigation in either IE or Safari is lined up, but some of it is in the correct font, whilst some is in Times, in a purple colour.

I have created a linked style sheet in Dreamweaver as below:

#nav a:link {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
#nav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #FF0000;

I have placed the text, centered in a table which is 514px(w) x 80px(h) as below. Between each link there is a bullet point to separate the links:

div id="nav">
div align="center"> a href="index.html" >HOME /a> a href="planning.html">•
CUSTOMS PLANNING /a> a href="AEO_NEWS.html"> • AEO
NEWS /a> a href="experience.html">• EXPERIENCE /a>
a href="links.html">• LINKS /a> a href="contact.html">•
CONTACT US /a> /div>
/div> /td>

When I linked the style sheet, in the code it added in the path on my local drive to find the style sheet. I simplified it to the following:

link href="customnetwork.css" rel="stylesheet" type="text/css">

Many thanks

  IntoPCs 15:53 15 Oct 2007

No opening < on the tags
this should work better:
<div id="nav" align="center">
<a href="index.html">HOME </a>
<a href="planning.html">• CUSTOMS PLANNING </a> <a href="AEO_NEWS.html"> • AEO NEWS </a>
<a href="experience.html">• EXPERIENCE </a>
<a href="links.html">• LINKS </a>
<a href="contact.html">• CONTACT US</a>
</div>
</td>
but where does the last </td> fit in?

  IntoPCs 15:55 15 Oct 2007

The link you show to the CSS file will only work if that file is located in the same folder as your web page ie all the html docs

  jhatter 09:46 16 Oct 2007

Thank you for the suggestion, unfortunately it has not resolved my problem.

Here is all the code for the particular section/table, would really appreciate any further suggestions.

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="80" colspan="3" align="center" valign="top"> <table id="Table_01" width="800" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <img src="images/top_bar_01.jpg" width="14" height="80" alt=""></td>
<td> <img src="images/top_bar_02.jpg" width="254" height="80" alt="Customs Network Ltd"></td>
<td width="514" height="80" background="images/top_bar_03.jpg">
<div id="nav" align="center">
<a href="index.html">HOME </a>
<a href="planning.html">• CUSTOMS PLANNING </a>
<a href="AEO_NEWS.html"> • AEO NEWS </a>
<a href="experience.html">• EXPERIENCE </a>
<a href="links.html">• LINKS </a>
<a href="contact.html">• CONTACT US</a>
</div></td>
<td> <img src="images/top_bar_04.jpg" width="18" height="80" alt=""></td>
</tr>
</table></td>

  Ade_1 17:39 16 Oct 2007

Just a suggestion, don't know if it will work or not, but try what I have done below. Just insert it above your other CSS code for the navigation.

#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}


Sorry if it doesn't work.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Xiaomi Mi Mix 2 review

What went wrong at the Designs of the Year 2017

iPhone X news: Release date, price, new features & specs

Comment regarder des séries et talk-shows américains en France ?