Foros del Web » Creando para Internet » CSS »

Ayuda para centrar menu horizontal en Firefox

Estas en el tema de Ayuda para centrar menu horizontal en Firefox en el foro de CSS en Foros del Web. Amigos, buenas noches Tengo un problema muy similar al de este post dentro de forosdelweb: "como-centrar-este-menu-css-353257" (lo siento pero soy nuevo y no me dejan ...
  #1 (permalink)  
Antiguo 05/08/2009, 02:15
 
Fecha de Ingreso: agosto-2009
Mensajes: 2
Antigüedad: 8 años, 4 meses
Puntos: 0
Ayuda para centrar menu horizontal en Firefox

Amigos, buenas noches

Tengo un problema muy similar al de este post dentro de forosdelweb: "como-centrar-este-menu-css-353257" (lo siento pero soy nuevo y no me dejan incluir enlaces ni direcciones web) estoy intentando centrar un menu horizontal en firefox y probe la solucion pero no me funciono a mi.

Es un menu horizontal de 6 opciones y cada una de esas opciones llama a un menu vertical situado mas abajo.

En IExplorer me funciona muy bien pero en Firefox no, me sale alineado a la izquierda e incluso me cambia el tamaño de cada boton a 181px cuando el real es de 160px. Pude corregir algunas cosas que se descuadraban en Firefox pero solo me hace falta que el menu horizontal quede centrado y con el tamaño de 160px como en el IExplorer. Adjunto css y html.

CSS

/*Menu Vertical Azul*/

#menuv_azul {
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 230px;
font: 10pt "Verdana", Arial, Helvetica, sans-serif;
}
#menuv_azul ul, li {
list-style-type: none;
}

#menuv_azul ul {
margin: 0;
padding: 0;
}

#menuv_azul li {
border-bottom: 1px solid #ACCFE8;
}

#menuv_azul a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 6px;
width: 230px;
}

#menuv_azul a:hover {
color: #000000;
background: #DBEBF6;
}

/*Menu Vertical Verde de Titulo*/

#menuv_azul_title {
border: 1px solid #31CD21;
border-width: 1px 1px 0 1px;
width: 230px;
font: 10pt "Verdana", Arial, Helvetica, sans-serif;
}
#menuv_azul_title ul, li {
list-style-type: none;
}

#menuv_azul_title ul {
margin: 0;
padding: 0;
}

#menuv_azul_title li {
border-bottom: 1px solid #31CD21;
}

#menuv_azul_title a {
text-decoration: none;
color: #000000;
background: #31CD21;
display: block;
padding: 3px 6px;
width: 230px;
}

#menuv_azul_title a:hover {
color: #000000;
background: #31CD21;
}


/*Menu Horizontal General*/
#menuh {
font: 10pt "Verdana", Arial, Helvetica, sans-serif;
margin-top: 20px;
/*width: 960*/
width: 100%;
}

#menuh ul, li {
list-style-type: none;
}

/*
#menuh ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 960px;
}
*/

#menuh ul {
margin: 0px;
padding: 0px;
}

#menuh li {
float: left;
/* width: 960px;*/
}

#menuh a {
text-decoration: none;
color: #ffffff;
background: #2F86C9;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0px;
width: 160px;
}


#menuh a#primero {
border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
color: #000000;
background: #ffffff;
}

PAGINA HTML

<table width="960" border="0" cellpadding="0" cellspacing="0" summary="botones_up">
<tr>

<div id="menuh">
<ul>
<li><a href="index.html" id="primero">Productos</a></li>
<li><a href="hosting.html">Hosting & Webdesign</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="soporte.html">Soporte</a></li>
<li><a href="politicas.html">Pol&iacute;ticas</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
</ul>
</div>

</tr>
</table>


</br>

<table width="960" border="0" cellpadding="0" cellspacing="0" summary="content">
<tr>
<td width="230" valign="top">
<div align="left" >
<table width="230" border="0" cellpadding="0" cellspacing="0" summary="botones_left" >
<div id="menuv_azul_title">
<ul>
<li><a href="#"><b><center>Soporte</center></b></a></li>
</ul>
</div>
<div id="menuv_azul">
<ul>
<li><a href="#menuv">Mantenimiento Preventivo</a></li>
<li><a href="#menuv">Mantenimiento Correctivo</a></li>
<li><a href="#menuv">Instalaci&oacute;n y Configuraci&oacute;n</a></li>
<li><a href="#menuv">Actualizaciones</a></li>
<li><a href="#menuv">Seguridad</a></li>
<li><a href="#menuv">P&oacute;lizas</a></li>
<li><a href="#menuv">Linux / Unix</a></li>
<li><a href="#menuv">Links</a></li>
</ul>
</div>
</table>
</div>

</br>
</td>
<td width="730" valign="top">
<div align="left">

<iframe src="#" name="content" scrolling="no" frameborder="0" width="730" height="950">
</iframe>

</div>
</td>
</tr>
</table>
</center>

</body>
</html>





DE ante mano muchas gracias!
  #2 (permalink)  
Antiguo 05/08/2009, 12:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda para centrar menu horizontal en Firefox

Tienes el menú en una caja y ésta en una tabla, pero sin celda, es decir, has puesto un TR y luego el DIV, sin TD. Eso no debe ser nunca así.

Por otro lado, si tienes el menú en una tabla, deberás saber cómo centrar la celda o el menú dentro de la celda, con las propiedades de las tablas, no de CSS.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 05/08/2009, 17:10
 
Fecha de Ingreso: agosto-2009
Mensajes: 2
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda para centrar menu horizontal en Firefox

Mikmoro, muchas gracias..... FUNCIONO!!

Efectivamente hacia falta un <td>, se lo puse y quedo centrado el menu.

Ahora solo me queda el problema de que en firefox no respeta el tamaño de 160px por cada boton me lo pone de 181 cada uno

El ancho de mi tabla es de 960 con 6 botones (160 x 6) que en Iexplorer se ve bien pero en Firefox el ultimo boton lo manda al "renglon" de abajo.

De antemno muchas gracias

Francisco J. Gonzalez
  #4 (permalink)  
Antiguo 05/08/2009, 17:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda para centrar menu horizontal en Firefox

Porque según es estándar, el tamaño de una caja está formado por su anchura + padding + bordes + margin.

En este caso, FF sigue el modelo de caja estándar. Es ie el que va por libre (como siempre).

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:18.