Autor Tema: Problema con Rollover  (Leído 1366 veces)

Desconectado WildWolf360

  • PHPer@ Fijo
  • ***
  • Mensajes: 192
  • Karma: 8
    • Ver Perfil
Problema con Rollover
« en: 14 de Mayo de 2010, 18:31:27 pm »
Hola muy buenas. Estoy haciendo un menu con rollover, pero tengo un problema: Simplemente se pone el background pero justo el tamaño del texto, no las medidas que yo le pongo.

<div id="menu">
	
	
	
	
	
<
div id="item">
	
	
	
	
	
<
a href="#" class="menu">Home</a>
	
	
	
	
	
</
div>
</
div>

CSS

#item{
	
width122px;
	
height17px;
	
}
.
menu, .menu:link, .menu:visited {
	
width112px;
	
height17px;
	
background-imageurl("../images/backgrounds/effects/normal.png");
}

.
menu:hover{
	
width112px;
	
height17px;
	
background-imageurl("../images/backgrounds/effects/over.png");


¿Alguna idea?

Comunidad PHPeros

Problema con Rollover
« en: 14 de Mayo de 2010, 18:31:27 pm »

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Problema con Rollover
« Respuesta #1 en: 14 de Mayo de 2010, 20:58:09 pm »
Creo que a un link no puedes hacerle eso...
yo haría así, no se si funcionará:
Código: [Seleccionar]
<div id="menu">
<div id="item">
<span><a href="#">Home</a></span>
</div>
</div>
y en el CSS:
Código: [Seleccionar]
#item{
width: 122px;
height: 17px;
}
#item span{
                display:block;
width: 112px;
height: 17px;
background-image: url("../images/backgrounds/effects/normal.png");
}

#item span:hover{
background-image: url("../images/backgrounds/effects/over.png");
}

Tal vez fuera necesaria otra etiqueta como un div, en lugar de un span

Desconectado WildWolf360

  • PHPer@ Fijo
  • ***
  • Mensajes: 192
  • Karma: 8
    • Ver Perfil
Re:Problema con Rollover
« Respuesta #2 en: 14 de Mayo de 2010, 22:43:04 pm »
Creo que a un link no puedes hacerle eso...
yo haría así, no se si funcionará:
Código: [Seleccionar]
<div id="menu">
<div id="item">
<span><a href="#">Home</a></span>
</div>
</div>
y en el CSS:
Código: [Seleccionar]
#item{
width: 122px;
height: 17px;
}
#item span{
                display:block;
width: 112px;
height: 17px;
background-image: url("../images/backgrounds/effects/normal.png");
}

#item span:hover{
background-image: url("../images/backgrounds/effects/over.png");
}

Tal vez fuera necesaria otra etiqueta como un div, en lugar de un span

Gracias, conseguí hacerlo de otra manera: http://www.baluart.net/articulo/menu-rollover-con-css-y-una-sola-imagen

Ahora el problema se me presenta en que el texto no queda en el centro de la imagen. Tengo esto así:

<div id="menu">
	
<
a href="#" class="menulink">ue</a>
	
</
div>

Y el CSS

#menu a {
text-decorationnone;
width75px;
height20px;
displayblock;
padding10px 0 0 24px;
backgroundurl(boton.png);


#menu a:link, #menu a:visited{
	
backgroundurl(boton.png);
	
}
#menu a:hover{
	
background-position-30px;
	
}
.
menulink{
	
marginauto;
	
paddingauto;
	
}


¿Alguna idea de cómo centrar el texto? Captura:

Muchísimas gracias y un saludo

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Problema con Rollover
« Respuesta #3 en: 15 de Mayo de 2010, 13:36:49 pm »
prueba a poner #menu { text-align: center; }

Desconectado WildWolf360

  • PHPer@ Fijo
  • ***
  • Mensajes: 192
  • Karma: 8
    • Ver Perfil
Re:Problema con Rollover
« Respuesta #4 en: 16 de Mayo de 2010, 12:33:55 pm »
Haber. Olvidaos de todo lo anterior. He hecho un menú con UL y LIs. El problema es que aún estando el archivo boton.png en el mismo directorio que el archivo CSS, no lo muestra como background (ni como background ni como na)

HTML
<ul id="menulinks">
	
	
	
	
	
	
<
li><a href="#">Home</a></li>
	
	
	
	
	
	
<
li><a href="#">Logros por juegos</a></li>
	
	
	
	
	
	
<
li><a href="#">Guías de Logros</a></li>
	
	
	
	
	
	
<
li><a href="#">Envía tu logro</a></li>
	
	
	
	
	
	
<
li><a href="#">Foro</a></li>
	
	
	
	
	
	
<
li><a href="#">Contáctanos</a></li>
	
	
	
	
	
</
ul>


CSS
/*Menu*/
#menulinks{
	
marginauto;
	
list-
stylenone;
	
}
#menulinks li{
	
margin12px 10px 10px 10px;
	
floatleft;
	
}
#menulinks a{
	
background-imageurl(boton.png);
	
displayblock;
	
colorwhite;
	
}
#menulinks a:hover{
	
background-color:#003366;
	
}


¿Alguna idea?

Muchas gracias y un saludo
« Última modificación: 16 de Mayo de 2010, 14:45:45 pm por WildWolf360 »

Desconectado naveda

  • Administrador General
  • PHPero Master
  • *****
  • Mensajes: 2.282
  • Karma: 165
  • Sexo: Masculino
    • Ver Perfil
    • naveda.me
Re:Problema con Rollover
« Respuesta #5 en: 16 de Mayo de 2010, 20:18:51 pm »
Mira a ver que tal con

Código: [Seleccionar]
background: url('boton.png') no-repeat 0 0;
Por favor, leete las Normas


Desconectado WildWolf360

  • PHPer@ Fijo
  • ***
  • Mensajes: 192
  • Karma: 8
    • Ver Perfil
Re:Problema con Rollover
« Respuesta #6 en: 16 de Mayo de 2010, 21:38:15 pm »
Mira a ver que tal con

Código: [Seleccionar]
background: url('boton.png') no-repeat 0 0;

Qué va, igual igual...

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:Problema con Rollover
« Respuesta #7 en: 16 de Mayo de 2010, 23:02:24 pm »
Yo le pondria el background al li no al a
Código: [Seleccionar]
#menulinks li{
margin: 12px 10px 10px 10px;
background-image: url(boton.png);
float: left;
}
#menulinks a{
display: block;
color: white;
}

Desconectado WildWolf360

  • PHPer@ Fijo
  • ***
  • Mensajes: 192
  • Karma: 8
    • Ver Perfil
Re:Problema con Rollover
« Respuesta #8 en: 17 de Mayo de 2010, 13:49:23 pm »
Ups!... El archivo estaba nombrado como boton.png.png, simplemente era quitar el png y listo xD

Muchas gracias y un saludo a todos (Karma up for every1)

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:Problema con Rollover
« Respuesta #9 en: 17 de Mayo de 2010, 23:14:29 pm »
Ups!... El archivo estaba nombrado como boton.png.png, simplemente era quitar el png y listo xD

Muchas gracias y un saludo a todos (Karma up for every1)

Errores de esa clase son las que nos obligan a arrancarnos los cabellos y decirnos en nuestra mente ¡Soy tan estúpido! xD A todos nos a pasado alguna vez un error así me alegro que lo hayas solucionado.