[SOLUCIONADO] Menú Simple CSS

[bathory84]

Hola que tal muchachos yo tengo un Menú Flash pero ahora estoy tratando de hacerlo en CSS simple pero no puedo lograrlo pues no es mi fuerte. Quisiera que el Menú quedara como la siguiente Imagen:



Todavía no puedo lograr que el :hover sombreé todo el cuadro (columna) asi como les dejé la imagen de ejemplo (Boton Servicios), esos fondos azules son imagenes. Solamente sombrea de azul las Letras y no me sirve así.

AQUI LES DEJO EL HTML DEL MENÚ:

Código HTML:

<table width="964" height="40" border="0" class="fondotabla">
  <tr>
 
    
    <th class="izquierda" scope="col">
    <a href="index.html">    Principal    </th>
    
    <th class="centro" scope="col">
    <a href="nosotros.html">    Nosotros    </th>
    
    <th class="centro" scope="col">
    <a href="servicios.html">    Servicios    </th>
    
    <th class="centro" scope="col">
    <a href="presupuestos.html">    Presupuestos    </th>
    
    <th class="centro" scope="col">
    <a href="testimonios.html">    Testimonios    </th>
    
    <th class="derecha" scope="col">
    <a href="contactos.html">    Contactos    </th>
    
    
  </tr>
</table>
 

AQUI LES DEJO EL CSS DEL BOTÓN "PRINCIPAL":

Código CSS:

.izquierda {
    height: 40px;
    width: 162px;
    font-family: "Arial";
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
    color: #000;
    vertical-align: middle;
}
 
 
.izquierda :hover{
    background-image: url(../images/izquierda.png);
    width: 162px;
    height: 40px;
    font-family: "Arial";
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
    color: #FFF;
    vertical-align: middle;
}
 

Por favor ayudenme a terminarlo, es para mi pagina personal de trabajo.

[Contac]

Hay programas gratuitos como CSS Tab Designer para desarrollar menus CSS que te ahorará mucho tiempo. Solo tienes que modificarlos a tus necesidades.

[bathory84]

Iniciado por contac

hay programas gratuitos como css tab designer para desarrollar menus css que te ahorará mucho tiempo. Solo tienes que modificarlos a tus necesidades.

gracias pero no es lo que estoy buscando.

[pzin]

Realmente el menú debería de constar de una lista desordenada, y en lugar de usar imágenes podrías usar degradados CSS. Ganarías en tanto que tienes un sitio más semántico y menos pesado porque no hace falta usar imágenes.

Aquí tienes un buen generador para degradados CSS: http://www.colorzilla.com/gradient-editor

[bathory84]

Iniciado por pzin

Realmente el menú debería de constar de una lista desordenada, y en lugar de usar imágenes podrías usar degradados CSS. Ganarías en tanto que tienes un sitio más semántico y menos pesado porque no hace falta usar imágenes.

Aquí tienes un buen generador para degradados CSS: http://www.colorzilla.com/gradient-editor

Muy Interesante tu ayuda, la voy a Guardar para despues porque ese no es el problema que tengo. Te explico.

Para el Menú hice una Tabla de 964 px de ancho con 6 Columnas, cada columna tiene un texto (Nombre del boton). El problema que tengo es que no se como darle correctamente a la columna el Estilo que ya hice, si miras el primer mensaje que puse en este Tema hay un Menú, ese es el resultado que quiero y que necesito amigo.

Pero el resultado que tengo es que ese fondo azul que vez cuando uno coloca el puntero del mouse sobre el boton (columna) solo se sombrea el Texto del boton y lo que necesito es que se sombreé la columna completa asi como el menú que puse arriba (boton de referencia: Servicios).

[bathory84]

Tambien puedes ver el HTML que puse arriba y que estoy utilizando, puede que encuentres ahí lo que estoy haciendo mal. No es problema de Estilos CSS pues ya lo tengo listo.

[bathory84]

Creo que estoy haciendo algo mal en el HTML pero no se como ponerlo.

[pzin]

Bueno, por un lado no estás cerrando los enlaces, te falta el cierre: </a>.

Luego tendrías que anular algún relleno que tengas de la celda (padding) y hacer que el enlace ocupe todo el ancho de la celda con display: block y darle el relleno que le quitaste a la celda.

[bathory84]

Iniciado por pzin

Bueno, por un lado no estás cerrando los enlaces, te falta el cierre: </a>.

Luego tendrías que anular algún relleno que tengas de la celda (padding) y hacer que el enlace ocupe todo el ancho de la celda con display: block y darle el relleno que le quitaste a la celda.

Gracias por una parte porque lo que me dijiste solucionó el Problema del Estilo CSS y ya funciona correctamente el :hover. Pero ahora el Menú me quedó vertical y no me sirve así, que puedo hacer?

[pzin]

¿Cómo tienes ahora el código?

[bathory84]

Iniciado por pzin

¿Cómo tienes ahora el código?

Muchas Gracias por todo amigo, ya pude resolver.

En los Estilos tenia que colocar Display: inline-block

En la Tabla: cellpadding="0" cellspacing="0" y todo quedó Horizontal y ordenado.