Hi Nancy!
This is what I have created this morning, I like it but I have not been able to move the nav bar to the left so it is centered with the table that contains it. Could you let me know what I have to change to achieve this? Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../INDICE-INDEX/CNpage.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #503A25;
}
body,td,th {
color: #F2EDD9;
font-family: "Arial Narrow";
text-align: center;
vertical-align: top;
font-size: 18px;
}
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!-- TemplateParam name="background" type="boolean" value="true" -->
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body>
<table width="980" align="center">
<tr>
<td><!-- TemplateBeginEditable name="cabecera" --><a href="../index.html"><img src="../imagenes/cabeceras/cabecera_un_solo_pino_web.jpg" alt="header" width="980" height="188" class="header" /></a><!-- TemplateEndEditable --></td>
</tr>
</table>
<table width="980" align="center" cellpadding="0" cellspacing="5" class="nav_bar">
<tr>
<td><!doctype html>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/**BEGIN MENU STYLES**/
nav ul li {
list-style:none;
float:left;
display:inline;
padding:6px;
}
/**link styles**/
nav li a {
font-family: springfieldD;
font-size: 20px;
text-decoration:none;
border-radius: 12px;
background: #F2EDD9;
color:#503A25;
margin-right:2px;
display:inherit;
padding: 10px;
border: 3px outset #503A25;
}
/**on mouseover, click, focus**/
nav li a:hover,
nav li a:active,
nav li a:focus {
background:#503A25;
color:#F2EDD9;
border: 2px inset;
}
/**persistent indicator**/
body.la_empresa a.la_empresa,
body.nuestros_valores a.nuestros_valores,
body.porque_combustibles_naturales a.porque_combustibles_naturales,
body.productos a.productos,
body.hagase_distribuidor a.hagase_distribuidor,
body.contacto a.contacto {
background: #F2EDD9;
color: #503A25;
}
/**clear floats after menu**/
nav:after {
clear:both;
display:block;
content: '';
}
/**END MENU STYLES**/
</style>
<nav>
<ul>
<li><a class="la_empresa" href="../empresa1.html">La empresa</a></li>
<li><a class="nuestros_valores" href="../construire.html">Nuestros valores</a></li>
<li><a class="porque_combustibles_naturales" href="#">¿Porqué Combustibles Naturales?</a></li>
<li><a class="productos" href="#">Productos</a></li>
<li><a class="hagase_distribuidor" href="#">Hágase distribuidor</a></li>
<li><a class="contacto" href="#">Contacto</a></li>
</ul>
</nav></td>
</tr>
</table>
<table width="980" class="content">
<tr>
<td width="972"><!-- TemplateBeginEditable name="texto en tabla" -->
<table width="962" height="675" class="texto_table">
<tr>
<td width="46" height="43"> </td>
<td width="400" class="titulos_en_table"> </td>
<td width="46"> </td>
<td width="400"> </td>
<td width="46"> </td>
</tr>
<tr>
<td height="48"> </td>
<td class="titulos_en_table">Títulos</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="574"> </td>
<td class="texto_table">texto/fotos</td>
<td> </td>
<td class="texto_table">texto/fotos</td>
<td> </td>
</tr>
</table>
<!-- TemplateEndEditable --></td>
</tr>
</table>
<table width="980" class="copyright">
<tr>
<td width="312"> </td>
<td width="340">Copyright © 2014 Combustibles Naturales S.L</td>
<td width="312"> </td>
</tr>
</table>
<p> </p>
</body>
</html>