Foros del Web » Creando para Internet » CSS »

Menú desplegable tapado por un Gif animado

Estas en el tema de Menú desplegable tapado por un Gif animado en el foro de CSS en Foros del Web. Hola!! Tengo el problema de que el menu desplegable hecho en css se ven tapados algunos items por un gif animado. Este problema no se ...
  #1 (permalink)  
Antiguo 17/03/2010, 11:33
Avatar de fechasoru  
Fecha de Ingreso: diciembre-2008
Mensajes: 149
Antigüedad: 9 años
Puntos: 0
Menú desplegable tapado por un Gif animado

Hola!!
Tengo el problema de que el menu desplegable hecho en css se ven tapados algunos items por un gif animado. Este problema no se presenta en Explorer pero si en los otros navegadores como firefox, opera , chrome.

Alguien me puede decir que propiedades del css debe codificar.

Código:
.logo

{

display : block;

position: absolute;

z-index:55;

left: 520px;  /*Position*/

top: 60px;  /*Position*/

width: 380px;  /*Image width*/

height: 143px;  /*Image height*/

background-image: url('../images/logo.gif');  /*Image path*/

background-repeat:no-repeat;

background-position: 0 0;

}
Código:
/* begin Menu */
/* menu structure */
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover

{

	text-align:left;

	text-decoration:none;

	outline:none;

	letter-spacing:normal;

	word-spacing:normal;

}



.art-menu, .art-menu ul

{

	margin: 0;

	padding: 0;

	border: 0;

	list-style-type: none;

	display: block;

}



.art-menu li

{

	margin: 0;

	padding: 0;

	border: 0;

	display: block;

	float: left;

	position: relative;

	z-index: 5;

	background:none;

}



.art-menu li:hover

{

	z-index: 10000;

	white-space: normal;

}



.art-menu li li

{

	float: none;

}



.art-menu ul

{

	visibility: hidden;

	position: absolute;

	z-index: 10;

	left: 0;

	top: 0;

	background:none;

}



.art-menu li:hover>ul

{

	visibility: visible;

	top: 100%;

}



.art-menu li li:hover>ul

{

	top: 0;

	left: 100%;

}



.art-menu:after, .art-menu ul:after

{

	content: ".";

	height: 0;

	display: block;

	visibility: hidden;

	overflow: hidden;

	clear: both;

}

.art-menu, .art-menu ul

{

	min-height: 0;

}



.art-menu ul

{

	background-image: url(../images/spacer.gif);

	padding: 10px 30px 30px 30px;

	margin: -10px 0 0 -30px;

}



.art-menu ul ul

{

	padding: 30px 30px 30px 10px;

	margin: -30px 0 0 -10px;

}











/* menu structure */



.art-menu

{

	padding: 3px 3px 3px 3px;

}



.art-nav

{

	position: relative;

	height: 29px;

	z-index: 100;

}



.art-nav .l, .art-nav .r

{

	position: absolute;

	z-index: -1;

	top: 0;

	height: 29px;

	background-image: url('../images/nav.png');

}



.art-nav .l

{

	left: 0;

	right:0px;

}



.art-nav .r

{

	right: 0;

	width: 990px;

	clip: rect(auto, auto, auto, 990px);

}





/* end Menu */



/* begin MenuItem */

.art-menu ul li

{

	clear: both;

}



.art-menu a

{

	position:relative;

	display: block;

	overflow:hidden;

	height: 23px;

	cursor: pointer;

	text-decoration: none;

	margin-right: 4px;

	margin-left: 4px;

}





.art-menu a .r, .art-menu a .l

{

	position:absolute;

	display: block;

	top:0;

	z-index:-1;

	height: 69px;

	background-image: url('../images/MenuItem.png');

}



.art-menu a .l

{

	left:0;

	right:8px;

}



.art-menu a .r

{

	width:416px;

	right:0;

	clip: rect(auto, auto, auto, 408px);

}



.art-menu a .t 

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

	color: #BFBFBF;

	padding: 0 5px;

	margin: 0 8px;

	line-height: 23px;

	text-align: center;

}



.art-menu a:hover .l, .art-menu a:hover .r

{

	top:-23px;

}



.art-menu li:hover>a .l, .art-menu li:hover>a .r

{

	top:-23px;

}



.art-menu li:hover a .l, .art-menu li:hover a .r

{

	top:-23px;

}

.art-menu a:hover .t

{

	color: #D4D4D4;

}



.art-menu li:hover a .t

{

	color: #D4D4D4;

}



.art-menu li:hover>a .t

{

	color: #D4D4D4;

}





.art-menu a.active .l, .art-menu a.active .r

{

	top: -46px;

}



.art-menu a.active .t

{

	color: #FFFFFF;

}





/* end MenuItem */



/* begin MenuSubItem */

.art-menu ul a

{

	display:block;

	text-align: center;

	white-space: nowrap;

	height: 26px;

	width: 180px;

	overflow:hidden;

	line-height: 26px;

	margin-right: auto;





	background-image: url('../images/subitem-bg.png');

	background-position: left top;

	background-repeat: repeat-x;

	border-width: 1px;

	border-style: solid;

	border-color: #C7C7C7;

}



.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span

{

	display: inline;

	float: none;

	margin: inherit;

	padding: inherit;

	background-image: none;

	text-align: inherit;

	text-decoration: inherit;

}



.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span

{

	text-align: left;

	text-indent: 12px;

	text-decoration: none;

	line-height: 26px;

	color: #000000;

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

}



.art-menu ul ul a

{

	margin-left: auto;

}



.art-menu ul li a:hover

{

	color: #FFFFFF;

	border-color: #FFFFFF;

	background-position: 0 -26px;

}



.art-menu ul li:hover>a

{

	color: #FFFFFF;

	border-color: #FFFFFF;

	background-position: 0 -26px;

}



.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span

{

	color: #FFFFFF;

}



.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span

{

	color: #FFFFFF;

}





/* end MenuSubItem */
__________________
Looking for a terrific Persistence Layer and Business Objects system for Microsoft.NET? our blog for more details.

http://www.entityspaces.net
  #2 (permalink)  
Antiguo 17/03/2010, 15:49
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Menú desplegable tapado por un Gif animado

Mira a simple vista te diria que le des position y z-index al contenedor del menu (supongo que es .art-menu {}) en vez de darselo al enlace.

A lo mejor puede que te sirva este tutorial.

Saludos!
  #3 (permalink)  
Antiguo 17/03/2010, 20:09
Avatar de fechasoru  
Fecha de Ingreso: diciembre-2008
Mensajes: 149
Antigüedad: 9 años
Puntos: 0
Respuesta: Menú desplegable tapado por un Gif animado

Este es mi problema ,no lo puedo resolver, no anda como mencionaron anteriormente. Les dejo la web usen firefox , chrome por ejemplo
unionchecoslovaca.org



Dejo el css completo uso joomla
http://unionchecoslovaca.org/templat...s/template.css
__________________
Looking for a terrific Persistence Layer and Business Objects system for Microsoft.NET? our blog for more details.

http://www.entityspaces.net
  #4 (permalink)  
Antiguo 18/03/2010, 00:34
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Menú desplegable tapado por un Gif animado

Bueno supongo que ya lo resolviste, porque lo veo bien en IE, chrome, opera y firefox.
  #5 (permalink)  
Antiguo 18/03/2010, 09:05
Avatar de fechasoru  
Fecha de Ingreso: diciembre-2008
Mensajes: 149
Antigüedad: 9 años
Puntos: 0
Respuesta: Menú desplegable tapado por un Gif animado

No no lo solucione todavia , lo que pasa que hay una imagen header.png que es el banner y despues sobre esta hay otra que es el gif anidado logo.gif que tiene un eslogan en varios idiomas que va cambiando.
__________________
Looking for a terrific Persistence Layer and Business Objects system for Microsoft.NET? our blog for more details.

http://www.entityspaces.net
  #6 (permalink)  
Antiguo 19/03/2010, 21:46
Avatar de tonypc  
Fecha de Ingreso: enero-2008
Mensajes: 10
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú desplegable tapado por un Gif animado

Yo lo veo bien en Chrome, Firefox y el (problemático) Internet Explorer (version 7), aunque la captura no dice lo mismo.
De casualidad estás usando IE 6???

Etiquetas: desplegable, gif, animados
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 03:59.