Ayuda para un menu

[tjempleo]

Hola a todos, pues quiero modificar un menu, pero no encuentro la manera de hacerlo espero que me puedan ayudar, comento que soy principiante en esto o mas bien apenas me adentro en esto.

Esta es la web de referencia como quiero hacer el menu, los cuadritos como cambian de color cuando uno pasa el mouse por encima.

Código:

yelp punto com/

No puedo poner direcciones por eso lo puse de esa manera

Quiero hacer mi menu similar al de referencia.

Este es el codigo de mi menu, mi menu solo cambia el color de la letra cuando pasas el mouse por encima, yo lo que quiero es que cambie la imagen, espero que me alla sabido explicar.

Código:

<p style="margin-top: 3px">
<table align="center" border="0" width="155" id="table5" cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="images/Phim_06.gif" width="155" height="8" alt=""></td>
    </tr>
    <!-- BEGIN block_type -->
    <tr>
        <td style="background:url(images/Phim_131.gif);background-repeat:no-repeat;" height="21">&nbsp;<a class="LeftMenu" href="{type_link}">{type_name}</a></td>
    </tr>
    <tr>
        <td  style="background:url(images/Phim_100.gif);background-repeat:no-repeat;" align="center">
        	<table border="0" width="100%" cellspacing="0" cellpadding="0">
        		{list_item}
            </table>
       	</td>
    </tr>
    <!-- END block_type -->
    <tr>
        <td><img src="images/Phim_27.gif" width="155" height="8" alt=""></td>
    </tr>
</table>
<!-- BEGIN block_row -->
	<tr>
      	<td style="background:url(images/Phim_{type_id}.gif);background-repeat:no-repeat;" height="26">&nbsp;<a class="LeftMenu" href="{item_link}">{item_name}</a></td>
    </tr>
<!-- END block_row -->

Gracias y Saludos...

[jomaruro]

Hola:

Prueba este código.

1º- El CSS:

Código:

.menu {
    margin:0;
    list-style:none;
    height:35px;
    background:#fff url(graficos/imagen-uno.gif);
    position:relative;
    border-bottom:1px solid #000;
}

.menu li {
    float:left;
}

.menu li a {
    display:block;
    float:left;
    height:35px;
    line-height:35px;
    color:#aaa;
    text-decoration:none;
    font-size:11px;
    font-family:verdana, arial, sans-serif;
    font-weight:bold;
    text-align:center;
    padding:0 16px;
}

.menu li a:hover {
    color:#fff;
    background:#000 url(graficos/imagen-dos.gif);
}

2º- El HTML:

Código HTML:

<ul class="menu">
    <li><a href="#">Opción 1</a></li>
    <li><a href="#">Opción 2</a></li>
    <li><a href="#">Opción 3</a></li>
    <li><a href="#">Opción 4</a></li>
    <li><a href="#">Opción 5</a></li>
    <li><a href="#">Opción 6</a></li>
    <li><a href="#">Opción 7</a></li>
</ul> 

Lo que tienes que cambiar es:

Código:

background:#fff url(graficos/imagen-uno.gif);

por la imagen que tu quieras poner como fondo del menú y

Código:

background:#000 url(graficos/imagen-dos.gif);

por la imagen cuando el ratón se posicione encima del botón.

Espero que te sirva de ayuda.

Un Saludo.



P.D.: Olvídate de hacer la maquetación web con tablas eso se usa para tabulación de datos.

[buzu]

Amigo, dices que estás aprendiendo apenas. Te sugiero que aprendas de la forma correcta, es decir que no aprendas usando tablas y que aprendas CSS. Aun que por algun motivo pienso que estas usando dreamweaver o algo parecido.

[tjempleo]

buzu, lo que pasa es que el script yo no lo ise, lo compre. De esta manera no sabria decirte si el que realizo el script uso o no dreamweaver. Yo solo le trato de mejorar algunas de las funciones o hacer le ver mas bonito para mi uso. Yo para editarlo uso el wordpad ya que el dreamweaver no se pero por alguna razon me genera codigos que no puse, asta espacios de mas y ese tipo de problemas.

Jomamuro Gracias por el codigo, voy a ponerlo en practica ya publicare aqui si pude o no jeje gracias.

[buzu]

el dreamweaver no se pero por alguna razon me genera codigos que no puse, asta espacios de mas y ese tipo de problemas.

Que bueno que te das cuenta de eso... jajaja. Sigue con el wordpad como hasta ahora. Estoy casi seguro que el código que te pasó jomamuro te va a funcionar, pero si tienes más problemas, pro acá andamos.

Saludos.

[tjempleo]

Bueno que de plano soy muy malo, intente cambiar todo, acomode, mobi e ise de todo y no consegÜi el objetivo. Me ise bolas en el css..

Este es el codio CSS, yo empeze a modificar en .LeftMenu asta .LeftMenu:hover ya que ese es el menu que quiero modificar. Es un menu lateral Izquierdo....

Este codigo es el original del CSS.

Código:

a 
{
	color				: #000000; 
	text-decoration		: none
}

a: hover 
{
	color				: #30569d; 
	text-decoration		: none
}

a :active 
{
	color				: #CCCCCC; 
	text-decoration		: none
}

.LeftMenu {
	PADDING-LEFT: 5pt; FONT-WEIGHT: bold; FONT-SIZE: 8.5pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.LeftMenu:link {
	PADDING-LEFT: 5pt; FONT-WEIGHT: bold; FONT-SIZE: 8.5pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.LeftMenu:visited {
	PADDING-LEFT: 5pt; FONT-WEIGHT: bold; FONT-SIZE: 8.5pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.LeftMenu:hover {
	PADDING-LEFT: 5pt; FONT-WEIGHT: bold; FONT-SIZE: 8.5pt; COLOR: yellow; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}


.MainBar {
	PADDING-LEFT: 40pt; FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #CC0000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.MainBar:link {
	PADDING-LEFT: 40pt; FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #CC0000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.MainBar:visited {
	PADDING-LEFT: 40pt; FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #CC0000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.MainBar:hover {
	PADDING-LEFT: 40pt; FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}


.AZSearch {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 9.5pt; COLOR: #ffffff; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.AZSearch:link {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 9.5pt; COLOR: #ffffff; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.AZSearch:visited {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 9.5pt; COLOR: #ffffff; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.AZSearch:hover {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 9.5pt; COLOR: yellow; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: underline
}


.Title {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 13pt; COLOR: #FF9900; FONT-FAMILY: Tahoma, Arial, Verdana; TEXT-DECORATION: none
}

.Content {
	FONT-SIZE: 9pt; FONT-WEIGHT: normal; COLOR: #000000; FONT-FAMILY: Arial, Verdana; TEXT-ALIGN: justify
}

.TitleSmall {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #006600; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.TitleSmall:link {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #006600; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.TitleSmall:visited {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #006600; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.TitleSmall:hover {
	PADDING-LEFT: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: underline
}

.BarText {
	PADDING-RIGHT: 10pt; FONT-WEIGHT: bold; FONT-SIZE: 8.5pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.BarText:link {
	PADDING-RIGHT: 10pt; FONT-WEIGHT: bold; FONT-SIZE: 8.5pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.BarText:visited {
	PADDING-RIGHT: 10pt; FONT-WEIGHT: bold; FONT-SIZE: 8.5pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.BarText:hover {
	PADDING-RIGHT: 10pt; FONT-WEIGHT: bold; FONT-SIZE: 8.5pt; COLOR: #FF9900; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}

.WhiteText {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.WhiteText:link {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.WhiteText:visited {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.WhiteText:hover {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #FFFFFF; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: underline
}


.DarkText {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.DarkText:link {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.DarkText:visited {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.DarkText:hover {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: red; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: underline
}

.GrayText {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #C0C0C0; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.GrayText:link {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #C0C0C0; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.GrayText:visited {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #C0C0C0; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.GrayText:hover {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: underline
}

.Button {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 7.5pt; COLOR: #336699; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.Button: link {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 7.5pt; COLOR: #336699; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.Button: visited {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 7.5pt; COLOR: #336699; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}
.Button:hover {
	PADDING-LEFT: 0pt; FONT-WEIGHT: none; FONT-SIZE: 7.5pt; COLOR: #000000; FONT-FAMILY: Tahoma, Verdana, Arial; TEXT-DECORATION: none
}

Y en el codigo de HTML no le mobi me enrede en el codigo LoL.

Código:

<p style="margin-top: 3px">
<table align="center" border="0" width="155" id="table5" cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="images/Phim_06.gif" width="155" height="8" alt=""></td>
    </tr>
    <!-- BEGIN block_type -->
    <tr>
        <td style="background:url(images/Phim_131.gif);background-repeat:no-repeat;" height="21">&nbsp;<a class="LeftMenu" href="{type_link}">{type_name}</a></td>
    </tr>
    <tr>
        <td  style="background:url(images/Phim_100.gif);background-repeat:no-repeat;" align="center">
        	<table border="0" width="100%" cellspacing="0" cellpadding="0">
        		{list_item}
            </table>
       	</td>
    </tr>
    <!-- END block_type -->
    <tr>
        <td><img src="images/Phim_27.gif" width="155" height="8" alt=""></td>
    </tr>
</table>
<!-- BEGIN block_row -->
	<tr>
      	<td style="background:url(images/Phim_{type_id}.gif);background-repeat:no-repeat;" height="26">&nbsp;<a class="LeftMenu" href="{item_link}">{item_name}</a></td>
    </tr>
<!-- END block_row -->

Haber si me echan una manita, trate pero no logre hacerlo funcionar... Gracias