Foros del Web » Creando para Internet » HTML »

Ayuda para un menu

Estas en el tema de Ayuda para un menu en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/04/2009, 21:33
 
Fecha de Ingreso: marzo-2009
Mensajes: 9
Antigüedad: 8 años, 8 meses
Puntos: 0
Ayuda para un menu

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...
  #2 (permalink)  
Antiguo 10/04/2009, 04:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda para un menu

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.
  #3 (permalink)  
Antiguo 10/04/2009, 11:20
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Ayuda para un menu

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.
__________________
twitter: @imbuzu
  #4 (permalink)  
Antiguo 10/04/2009, 15:16
 
Fecha de Ingreso: marzo-2009
Mensajes: 9
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Ayuda para un menu

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.
  #5 (permalink)  
Antiguo 10/04/2009, 16:06
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Ayuda para un menu

Cita:
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.
__________________
twitter: @imbuzu
  #6 (permalink)  
Antiguo 10/04/2009, 23:25
 
Fecha de Ingreso: marzo-2009
Mensajes: 9
Antigüedad: 8 años, 8 meses
Puntos: 0
Sonrisa Respuesta: Ayuda para un menu

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
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 23:19.