Problema visualización de mi menú

Azer · #1 (**permalink**) 15/04/2012, 12:52

Hola gente de forosdelweb! Espero que estén bien. Realizo mi segundo post porque me surgio otro inconveniente con mi primer web que estoy desarrollando en html y css.

Mi problema es que cuando chequeo el menú de mi web desde el index.html alojado en mi pc, puedo observar el efecto que busco. Pero a la hora de ver mi web alojada en un hosting me encuentro con que cuando posiciono mi cursor arriba de cada botón de mi navbar este antes se pone del color azul de fondo que se encuentra atras. Tambien note que el logo de facebook al posicionarse ensima de el primero desaparece y luego muestra la imagen que debería tener.

Les dejo [URL="http://transmisionespares.webatu.com/"]mi web[/URL]. Perdón por la lentitud, la estoy probando desde un hosting gratutito. (espero que esté bien colocado, si no es así comenten debajo por favor)
(No puede insertar correctamente el enlace)

Adjunto mi porcion de código css:

Código HTML:

/***********NAVBAR***********/

.separador{
	background-color:#15075e;
	height:1px;	
	width:588px;
	margin-left:372px;
	margin-top:0px;
	margin-bottom:0px;
}

.navbar{
	height:35px;
	width:960px;
	background:url(images/navbar.png)
}

.navbar ul{
	padding-top:0px;
	margin-left:0px;
}

.navbar ul li{
	float:left;
	font-family:arial;
	margin-left:5px;
	background:url(images/botnavlink.png) no-repeat;
}

.navbar ul li:hover{
	background:url(images/botnavhover.png) no-repeat;
}

.navbar ul li:active{
	background:url(images/botnavhover.png) no-repeat;
}

.navbar ul li h4{
	height:26px;
	width:88px;
	padding:4px 0px 0px 0px;
	margin:auto;
	color:#000;
	text-align:center;
	font-size:14px;
}

.navbar ul li a{
	display:block;
	width:88px;
	height:26px;
}

.navbar ul li h4 a:link{
	color:#000;
}

.navbar ul li h4 a:hover{
	color:#999 !important;
}

.navbar ul li h4 a:active{
	color:#fff !important;
}

.navbar ul li h4 a:visited{
	color:#000;
}

.logofacebook a{
	width:24px;
	height:24px;
	float:right;
	margin-top:18px;
	margin-right:10px;
	background:url(images/logfaceest.png);
}

.logofacebook a:hover{
	background:url(images/logfacehov.png);
}

/***********FINAL NAVBAR***********/

Cual puede ser el problema? Aparentemente no es el hosting gratuito (llegue a pensar que era por la lentitud de carga) ya que también lo probé con uno pago y ocurre lo mismo.
Ojala puedan ayudarme, muchisimas gracias y que tengan un buen dia!

emprear · #2 (**permalink**) 15/04/2012, 13:43

Si observás bien vas a ver que ese problema se produce la primera vez que visitas la página, debido a que las imágenes que hacen el hover, recien cargan cuando posicionas el cursor sobre los menues o el icono de facebook, necesitarías "precargar" dichas imágenes, para evitar el parpadeo (que en el menu es azul porque tenes definido ese color de fondo)
Hay varias formas de solucionarlo, te doy una sencilla para tu web en particular

Inmediatamente despues del tag <body>, crea una capa con id ó class "precarga", dentro de esta pones tags img con las imágenes que hacen el hover, luego a esta capa le das la propiedasdes width: 0; height: 0; margin: 0; para hacerla invisible y que no afecte la estructura actual.

Las imágenes en cuestion no se van a ver, pero ya estarán disponibles y cargadas en la cache del navegador para cuando se hagan los :hover, ya que tu menu y el icono de facebook aparecen con posterioridad en el documento

Saludos

Azer · #3 (**permalink**) 15/04/2012, 14:26

Muchas gracias emprear! Que bien se siente saber que hay gente con ganas de ayudar en esta comunidad!

Lo pude solucionar realizando lo que me sugeriste, mi código quedó de esta manera (un fragmento) :

Código HTML:

<body>
	<div class="precargadas">
		<img src="images/botnavhover.png">
		<img src="images/logfacehov.png">
	</div>
</body>

Algo raro es que en mi hoja de estilos css al agregar los atributos width y height en 1 px cada uno, no desaparecieron la imagenes. Pero si desaparecieron al agregar el atributo "overflow: hidden", que la verdad todavia no entiendo para que funciona jaja.

Así quedo mi fragmento de código css:

Código HTML:

.precargadas{
	width:1px;
	height:1px;
	overflow:hidden;
}

Ahora quiero saber, es correcto realizar esto? Esta bien visto por los desarrolladores de páginas web? El navegador carga las mismas imagenes dos veces, o con la precarga no se tienen que volver a cargar?
Muchas gracias, que tengan un buen día.

emprear · #4 (**permalink**) 15/04/2012, 14:49

No, no está mal, pudo hacerse con javascript tambien, yo para simplificarte las cosas, el width y height eran 0, no 1
Cargar mas de una vez la imagen no representa ningún problema, imagina poner un logo al inicio y al pie de tu página

Para ampliar, la técnica específica para realizar eso rollover simples es esta
http://foros.emprear.com/css/over_input/over_input.html

(el ejemplo se aplica a un input, pero es lo mismo para otros elementos)

Saludos

Azer · #5 (**permalink**) 15/04/2012, 15:00

Cita:

Iniciado por emprear

No, no está mal, pudo hacerse con javascript tambien, yo para simplificarte las cosas, el width y height eran 0, no 1
Cargar mas de una vez la imagen no representa ningún problema, imagina poner un logo al iniio y al pie de tu página

Saludos

Si, por lo visto lei mal jaja.

Deje mi código así pero seguían apareciendo las imágenes:

Código HTML:

.precargadas{
	width:0px;
	height:0px;
	margin:0px;
}

Lo volví a dejar de esta manera:

Código HTML:

.precargadas{
	width:0px;
	height:0px;
	margin:0px;
	overflow:hidden;
}

Muchas gracias emprear! Aunque no entiendo la función de el atributo "overflow" usándolo pude solucionar mi problema. Suerte a todos.