Foros del Web » Creando para Internet » CSS »

Fallo posición barra deslizante.

Estas en el tema de Fallo posición barra deslizante. en el foro de CSS en Foros del Web. Hola! Llevo ya unos dias solucionando fallos en mi web, si bien no esta terminada ya que me quedan bastantes cosas por terminar y mejorar, ...
  #1 (permalink)  
Antiguo 20/02/2010, 15:36
 
Fecha de Ingreso: octubre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 0
Fallo posición barra deslizante.

Hola!

Llevo ya unos dias solucionando fallos en mi web, si bien no esta terminada ya que me quedan bastantes cosas por terminar y mejorar, esta vez vengo a consultar con vosotros concretamente este fallo. No estaba seguro de en que foro ponerlo así que he optado por ponerle aquí en el general, de antemano perdón si no era el sitio.


Estoy testeando la web en IE7 / IE8 / Firefox / Safarí / Crome.
*(El maldito IE6 e inferiores me lo dejare para ultimo).

-------------------------------------------------------------------------------------------------------

Bien os pongo el fallo en concreto. Es un error con una barra deslizante:
Website: [URL="http://www.xtremexperience.es"]http://www.xtremexperience.es[/URL]

Foto01:


Solo me da fallo con FF-3.6 y IE8 si bien creo que esta relacionado con los complementos. La razón es que si Inicio IE8 en modo sin complementos no me da el error y lo visualiza correctamente, he de suponer que en el FireFox tambien tenga que ver algo, en este desabilite todos los plugin's y continua haciendo lo mismo.

Una de las soluciones que tengo es obligar a IE8 que trabaje como IE7 usando un meta:
Código:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Con lo cual soluciono IE8 aunque claro IE7 no visualiza como IE8, pero bueno esto es asumible. El problema lo mantengo en FireFox y por tanto nose si exista una meta para él o si alguno me de algún aporte sobre este comportamiento que en teoría lo asumo a algún complemento.

No voy a poner todo el codigo, para evitar poner aquí una biblia de codigo pero si dejare lo que extrictamente afecta a la barra. Sí alguien quiere pues le paso el codigo completo pero creo que con esto basta:
Código HTML:
<div id="cabecera">
<div id="slidermenu">
	<ul id="linked">
		<li><a href="xxx.asp"><img class="celdas" src="img/xxx.png" /></a></li>
		<li>............. LINKS  
		etc.</li>
		<li><a href="xxx.asp"><img class="celdas" src="img/xxx.png" /></a></li>
		<li><a href=""><img class="celdas" src="img/inicio.png" /></a></li>
	</ul>
	<div id="prueba">
		<div id="tracker">
			<!-- Este son las dos clases que afectan al comportamiento de la barra deslizante -->
			<div class="slider">
				<div class="handle"></div>
			<!-- /////////// -->	
					<!-- Marcas de las secciones -->
					<span class="marca0">BattleField</span>
					<span class="marca1">PaintBall</span>
					<span class="marca2">Submarinismo</span>
					<span class="marca3">Kite-Surfing</span>
					<span class="marca4">Megarena</span>
					<span class="marca5">BossaBall</span>
					<span class="marca6">Outdoor-Training</span>
				</div>
		</div>
	</div>
</div>
</div
La CSS:
Código:
/* MENU SLIDE */ /* SLIDER Specific CSS */
#slidermenu {
	width:922px;	
	height:180px;
	position:relative;
	overflow:hidden;
	float:left;	
	}
#slidermenu UL {
	position:absolute;
	list-style:none;
	overflow:none;
	white-space:nowrap;
	}
#slidermenu UL LI {
	display:inline;
	}
#prueba {}
#tracker {
	background:url(../img/backscroll.png) no-repeat white;
	position:absolute;
	width:922px;
	height:23px;
	z-index:200;
	display:block;
	left:0px;
	}
#linked a {	
	z-index:201;
	} 
.handle {
	position:absolute;
	cursor:w-resize;
	height:17px;
	width:181px;
	top:4px;
	/*left:auto;
	right:auto;
	bottom:auto;*/
	background: url(../img/ScrollBarSlider.png) no-repeat;
	z-index:101;
	}
.slider {
	width:875px;
	height:180px;
	position:relative;
	margin-left:27px;
	margin-right:20px;
	float:left;
	left:0px;
	}  
.slider span {
	color:red;
	font-size:11px;
	cursor:pointer;
	z-index:110;
	top:20px;
	}
.slider .marca0 {
	left:2px;
	}
.slider .marca1 {
	left:60px;
	}
.slider .marca2 {
	left:130px;
	}
.slider .marca3 {
	left:200px;
	}
.slider .marca4 {
	left:280px;
	}
.slider .marca5 {
	left:370px;
	}
.slider .marca6 {
	left:465px;
	}
.celdas {
	width:100px;
	height:100px;
	margin-top:50px;
	}
Bueno pues aquí dejo lo dicho, cuando lo termine intentare poner el codigo completo con una demo para descargar en mi blog.

Saludos y gracias de antemano.
  #2 (permalink)  
Antiguo 20/02/2010, 16:16
 
Fecha de Ingreso: mayo-2009
Mensajes: 238
Antigüedad: 8 años, 7 meses
Puntos: 7
Respuesta: Fallo posición barra deslizante.

No te puedo ayudar pero tu diseño esta genial.
Lo probe en opera 10.10 y se ve bien solo hay un problema con el footer te dejo una imagen en opera haber si te sirve.

Ahora por ejemplo en tu.tv he visto que utilizan diferentes archivos css para cada navegador, supongo que es mas facil así.

Código:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie7.css" />
<![endif]--> 

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/css/ie8.css" />
<![endif]-->
saludos
  #3 (permalink)  
Antiguo 20/02/2010, 16:49
 
Fecha de Ingreso: octubre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Fallo posición barra deslizante.

Otro explorador más no... !auch!

En breves me lo instalare, pero vamos es evidente que tengo varios fallos, porque tengo todavía también alguna sección inconclusa.

Gracias la verdad que me estoy esmerando mucho por hacer las cosas bien y si algún día termino, (ironía) iré publicando en mi blog las demos y os pasare los links con los ejemplos para compartirlo con vosotros.

Aunque no quiero desviarme del tema te dejo la CSS que atañe en concreto al esqueleto básico del website por si ves tú ya de paso el error.

Código:
/* slider specific CSS */

#cuerpo {
	margin:0px;
	padding:0px; /* arriba - derecha - abajo - izquierda */
	width:922px;
	height:auto;
	min-height:550px;
	float:left;
	/* BUG FONDO DESPLAZADO */
		position:absolute;
		top:203px;
	}  
#mainmenu {
	padding:5px 2px 5px 2px; /* arriba - derecha - abajo - izquierda */
	width:106px;
	height:auto;
	min-height:500px;
	float:left;
	}
#container {
	padding:0px;
	margin:0px;
	width:810px;
	height:auto;
	float:left;	
	}
#pag_n_up {
	background: url(../img/pag_n_up.png) no-repeat;
	padding:0px;
	margin:0px;	
	width:810px;
	height:5px;
	}
#pag_n_mid {
	background: url(../img/pag_n_mid.png) repeat-y;
	padding:0px;
	margin:0px;	
	width:810px; 
	height:auto;
	overflow:hidden; /* ULTRA IMPORTANTE: hace que la altura sea variable, es decir, hace que Height funcione correctamente con auto */
	}
#pag_n_down {
	background: url(../img/pag_n_down.png) no-repeat;
	padding:0px;
	margin:0px;	
	width:810px;
	height:5px;
	}	

#mainnews {
	padding:0px;
	margin:0px;
	width:550px;
	height:100%;
	float:left;
	}
#mainright {
	background: #666666;
	padding:0px;
	margin:0px;
	width:255px;
	height:auto;
	float:left;
	} 
#footer {
	background:#CCCCCC;
	margin:0px;
	padding:0px; /* arriba - derecha - abajo - izquierda */
	width:922px;
	height:24px;
	float:left; 
	}



Sin ir más lejos la sección de videos tengo un fallo asíncrono (AJAX) y no se al final como lo solucionare. Me da que tendré que morir con Flash :P. (Tengo por ahí publicado el tema y sigue sin solución y va ser todo un reto solucionarlo me da a mí).

Grax. Fallo anotado.
  #4 (permalink)  
Antiguo 15/03/2010, 07:49
 
Fecha de Ingreso: octubre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Fallo posición barra deslizante.

Hola pues al final por mucho que me fastidie tuve que cambiar el diseño. Sinceramente me gustaba más tener la barra encima, pero no conseguía que se viera bien. Así que decidí bajar la barra y subir arriba las celdas.

Este es el resultado:


IE6 / IE7 / Safari / FireFox 3.6 / Google Crome: Aprobados.
Opera: Sigue mostrando fallos.

Lo que hace en el Opera es muy parecido a lo que me hacía anteriormente. El fallo debe de ser algo del CSS supongo, pero no dí con las solución. Lo que sí creo que esta relacionado, es que, el "texto" de alguna manera tiene mayor "jerarquía" sobre la "barra".Luego revise las herencias del css sin ver nada en concreto y lo cierto es que probé con z-index sin mucha suerte. Pensaba que podría ser cosa de capas o algo relacionado con alguna propiedad de la etiqueta "a" por aquello de que son enlaces.

Mi duda es, si existe algún tipo de orden jerárquico o primario del texto sobre una imagen en estos casos que se tenga que definir en el CSS y a mí se me pasara.

Saludos.
  #5 (permalink)  
Antiguo 15/03/2010, 07:59
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola Mexman

Muevo tu tema al foro de CSS desde Web general.

Saludos,

Etiquetas: barra, deslizante, fallo
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 21:11.