Os pongo el codigo css que uso en toda la pagina...
Código:
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: justify;
font-family: Verdana;
font-size: 11px;
font-color: #666666;
}
.TablaMenuSup{
border-width: 0px 0px 1px 1px;
border-style: solid;
border-color: #FF9966;
font-family: Verdana;
font-size: 9px;
font-color: #999999;
}
.MenuPrincipal{
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #CCCCCC;
/*font-family: Verdana;*/
/*font-size: 12px;*/
/*font-color: #6C2233;*/
text-align: left;
text-decoration:none;
}
.TablaCentral{
border-width: 0px 1px 1px 0px;
border-style: solid;
border-color: #CCCCCC;
font-family: Verdana;
font-size: 9px;
font-color: #999999;
}
.TablaLineaInf{
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #CCCCCC;
}
.TablaCopyRight{
border-width: 0px 1px 1px 0px;
border-style: solid;
border-color: #CCCCCC;
font-family: Verdana;
font-size: 9px;
font-color: #666666;
text-align: center;
color: #CCCCCC;
}
.TextoBurdeo {
font-family: Verdana;
font-size: 15px;
color: #6C2233;
}
.TextoBurdeoBold {
font-family: Verdana;
font-size: 14px;
color: #6C2233;
font-weight: bold;
}
.TextoHSE {
font-family: Verdana;
font-size: 15px;
color: #90ADB4;
}
.TextoHSEBold {
font-family: Verdana;
font-size: 14px;
color: #90ADB4;
font-weight: bold;
}
.TextoSafman {
font-family: Verdana;
font-size: 15px;
color: #0477A3;
}
.TextoSafmanBold {
font-family: Verdana;
font-size: 14px;
color: #0477A3;
font-weight: bold;
}
.TextoMymasur {
font-family: Verdana;
font-size: 15px;
color: #0E2050;
}
.TextoMymasurBold {
font-family: Verdana;
font-size: 14px;
color: #0E2050;
font-weight: bold;
}
.TextoNaranja {
font-family: Verdana;
font-size: 14px;
color: #FA916D;
}
.Parrafo {
font-family: Verdana;
font-size: 11px;
color: #666666;
text-align: justify;
}
.ParrafoBurdeo {
font-family: Verdana;
font-size: 11px;
color: #6C2233;
font-weight: bold;
text-align: justify;
}
.ParrafoHSE {
font-family: Verdana;
font-size: 11px;
color: #90ADB4;
font-weight: bold;
text-align: justify;
}
.ParrafoSafman {
font-family: Verdana;
font-size: 11px;
color: #0477A3;
font-weight: bold;
text-align: justify;
}
.ParrafoMymasur {
font-family: Verdana;
font-size: 11px;
color: #0E2050;
font-weight: bold;
text-align: justify;
}
.ParrafoMymasurtodo {
font-family: Verdana;
font-size: 11px;
color: #0E2050;
text-align: justify;
}
/* =========================
Estilo para el menu de navegacion*/
.menun {
color: #6C2233;
background-color: #FFFFFF;
background-position: right center;
font-family: Verdana;
font-size: 12px;
text-decoration:none;
}
.menun A:visited {
color: #6C2233;
/*background-color: #FFFFFF;*/
/*background-position: right center;*/
/*font-family: Verdana;*/
/*font-size: 12px;*/
/*text-decoration: none;*/
};
.menun A:hover {
color: #0E2050;
/*background-color: #FFFFFF;*/
/*background-position: right center;*/
/*font-family: Verdana;*/
/*font-size: 12px;*/
/*text-decoration: none;*/
};
.menun A:active {
color: #0E2050;
/*background-color: #FFFFFF;*/
/*background-position: right center;*/
/*font-family: Verdana;*/
/*font-size: 12px;*/
/*text-decoration: none;*/
};
/*Actual...
.TituloFoto {
font-family: Verdana;
font-size: 9px;
color: #666666;
}
.TituloParrafo {
color: #00B0C7;
font-size: 14px;
}
.Parrafo {
font-family: Verdana;
font-size: 11px;
color: #4C4688;
text-align: justify;
}
.TablaFoto {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #00B0C7;
right: auto;
}
.Textofotos {
color: #00B0C7;
font-size: 14px;
text-decoration: none;
}
.TablaMenu {
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #CCCCCC;
}
.ParrafoTitulo {
font-family: Verdana;
font-size: 11px;
color: #00B0C7;
}
*/
Parte del html de página, donde esta la tabla que contiene el menu
Código HTML:
<table width="205">
<tr valign="middle">
<td width="15"></td>
<td width="100" height="40" class="MenuPrincipal"><a href="javascript:abrirUrl('empresa.html')" class="menun"> La
Empresa </a> </td>
<td width="68"><img src="../imagenes/topoMM.gif" width="12" height="12" border="0" /></td>
</tr>
<tr valign="middle">
<td width="15"></td>
<td width="100" height="40" class="MenuPrincipal"><a href="javascript:abrirUrl('')" class="menun" onclick="despliega('2.1');despliega('i21');despliega('2.2');despliega('i22');despliega('2.3');despliega('i23');despliega('2.4');despliega('i24');despliega('2.5');despliega('i25');despliega('2.6');despliega('i26');return false;"> Servicios </a> </td>
<td width="68"><img src="../imagenes/topoMM.gif" width="12" height="12" border="0" /></td>
</tr>
<tr>
<td width="15"></td>
<td height="40" colspan="2">
<table width="100%">
<tr valign="middle">
<td height="40" class="MenuPrincipal" id="2.1"><div align="right"><a href="javascript:abrirUrl('smecanico.html')" class="menun">Mecánico</a> </div></td>
<td width="40" height="40" id="2.1"><div align="center"><img src="../imagenes/topoMM.gif" name="i21" width="12" height="12" border="0" id="i21" /></div></td>
</tr>
<tr valign="middle">
<td height="40" class="MenuPrincipal" id="2.2"><div align="right"><a href="javascript:abrirUrl('selectrico.html')" class="menun">Eléctrico</a> </div></td>
<td width="40" height="40" id="2.2"><div align="center"><img src="../imagenes/topoMM.gif" name="i22" width="12" height="12" border="0" id="i22" /></div></td>
</tr>
<tr valign="middle">
<td height="40" class="MenuPrincipal" id="2.3"><div align="right"><a href="javascript:abrirUrl('scaldeler.html')" class="menun">Caldelería
y Soldadura</a> </div></td>
<td width="40" height="40" id="2.3"><div align="center"><img src="../imagenes/topoMM.gif" name="i23" width="12" height="12" border="0" id="i23" /></div></td>
</tr>
<tr valign="middle">
<td height="40" class="MenuPrincipal" id="2.4"><div align="right"><a href="javascript:abrirUrl('shidraulica.html')" class="menun">Hidráulica
y Neumática</a> </div></td>
<td width="40" height="40" id="2.4"><div align="center"><img src="../imagenes/topoMM.gif" name="i24" width="12" height="12" border="0" id="i24" /></div></td>
</tr>
<tr valign="middle">
<td height="40" class="MenuPrincipal" id="2.5"><p align="right"><a href="javascript:abrirUrl('smecain.html')" class="menun">Mecanizados <br />
IN SITU</a></p></td>
<td width="40" height="40" id="2.5"><div align="center"><img src="../imagenes/topoMM.gif" name="i25" width="12" height="12" border="0" id="i25" /></div></td>
</tr>
<tr valign="middle">
<td height="40" class="MenuPrincipal" id="2.6"><p align="right"><a href="javascript:abrirUrl('smantind.html')" class="menun">Mantenimiento
Industrial</a></p></td>
<td width="40" height="40" id="2.6"><div align="center"><img src="../imagenes/topoMM.gif" name="i26" width="12" height="12" border="0" id="i26" /></div></td>
</tr>
</table> </td>
</tr>
</table> Y el js que puedo usar también ..
Código:
// JavaScript Document
function ocultamenu(id){
var menu = document.getElementById(id); //var menu = document.getElementById("estrategia");
menu.style.display = "none";
}
function despliega(id){
var menu = document.getElementById(id); //var menu = document.getElementById("estrategia")
if(menu.style.display == "none"){
menu.style.display = "block";
}
else{
menu.style.display = "none";
}
}
function cambiarColorTextoover(celda) {
celda.style.color='#6C2233';
}
function cambiarColorTextoout(celda) {
celda.style.color='#0E2050';
}
function cambiarCol(celda) {
var elBg = celda.style.backgroundColor;
if( elBg === "red" ) {
//celda.style.backgroundColor = "blue";
celda.style.color="red";
//celda.getElementsByTagName("A")[0].style.color = "yellow";
}
else {
//celda.style.backgroundColor = "red";
celda.style.color="green";
//celda.getElementsByTagName("A")[0].style.color = "blue";
}
}
function abrirUrl(url)
{
location=url;
} /* el objeto location es la url. En la misma ventana
abre otra url */
Ufff. ... nos e si me he pasado ..
Espero vuestra ayuda
gracias