Foros del Web » Creando para Internet » CSS »

Problemas con CSS y JQuery (scroll de imágenes)

Estas en el tema de Problemas con CSS y JQuery (scroll de imágenes) en el foro de CSS en Foros del Web. Muy buenas :) Que tal todo ?? Bueno pues os comento, tengo un pequeño problema con el CSS y el Jquery (la verdad que no ...
  #1 (permalink)  
Antiguo 22/04/2010, 17:17
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
De acuerdo Problemas con CSS y JQuery (scroll de imágenes)

Muy buenas :)
Que tal todo ??

Bueno pues os comento, tengo un pequeño problema con el CSS y el Jquery (la verdad que no sabía donde poner el post xD )
Os explico. Tengo un scroll de 3 imágenes echo en Jquery. En Firefox y Chrome se ve de lujo (como no) pero en IE se ve mal, ya que se desfasa. Dejo la URL para que lo comprueben ustedes mismos:

http://pruebas.zemula.net/autoescuelaronda/

Y aquí dejo el código CSS, el HTML no lo puedo poner porque excedo el número de caractéres en el mensaje por lo que lo pondré abajo si puedo :).

CSS

Código:
* {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

body{
	background:url(images/bg.jpg);
	*text-align:center;
}
a {color:#cd2800}
a:hover{text-decoration:none;}

img {border:0px;}
br {line-height:0px;}

input {vertical-align:middle; padding:0px 0px 0px 4px;}

.dt {
	/*display:table; */
	width:766px;
	margin:0 auto;
	/* Hack para IE * */
	*margin:0 auto 0 auto;
	*width:390px; 
	*text-align:left;
/*	position: relative;
	left: 200px;*/
}
.dr {
	display:table-row; 
	width:100%; 
	height:100%;
}
.dc {
	display:table-cell;
	text-align:left;
	vertical-align:top; 
	/*width:100%; */
}
.main_text, input, textarea, body, select{
	font:normal 11px Arial, Helvetica, sans-serif;
	line-height:15px;
	color:#000;
}

font {
	font:normal 13px Tahoma, Arial;
	color:#D12C00;
}
.input, .ta {
	border:1px solid #999;
	width:211px;
}
.input {
	height:20px;
}
.ta {
	height:80px;
	overflow:auto;
	padding:2px 0px 0px 5px;
}
b {color:#d92b00; font-size:12px}
b a{color:#390}
b h1 {color:#d92b00;}
font {font:bold 11px Arial, Helvetica, sans-serif; color:#5486a9}
.nn a{text-decoration:none}
.nn a:hover{text-decoration:underline}
ul {list-style:none}

.main {
	width:100%;
	background:url(images/tal.jpg) top left repeat-x #FFF;
}
.main_t {
	background:#fafaf0;
}
.x {
	margin:0px 46px 0px 49px; 
	width:671px;
}
/*••••••••••••••HEADER•••••••••••••*/
.header {
	height:139px;
	background:url(images/hbg.jpg) 0 0 no-repeat;
}
.top_l {
	 background:url(images/top.jpg) 0 0 repeat-x;
}
.top {
	height:63px;
}
.menu {
	height:76px;
}
.umenu {	
	width:288px; 
	height:20px; 
	background:url(images/g.jpg) 0 0 no-repeat; 
	font:normal 10px Arial, Helvetica, sans-serif; 
	color:#FFF; 
	margin:0px 0px 0px 22px;
}
.umenu2 {	
	width:144px; 
	height:20px; 
	background:url(images/g2.jpg) 0 0 no-repeat; 
	font:normal 10px Arial, Helvetica, sans-serif; 
	color:#FFF; 
}
.mpct {
	width:766px;
	height:191px;
	background:url(images/mpct.jpg) 0 0 no-repeat
}
.block {
	margin:0px 0px 0px 521px; 
	width:200px;
}
.block b {
	color:#5486a9;
}

#pie{
	position:relative;
	left: -20px;
	*left: -20px;
}

.admin{
	margin:0 auto;
	width:750px;
	/* Hack para IE * */
	*margin:0 auto 0 auto;
	*width:750px; 
	*text-align:left;
	height: 200px;
}

.caja_admin{
	border:dotted 1px #7b7b75;
	text-align: center;
	background-color:#eeeee4; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:14px; 
	color:#e47760;
}

/*••••••••••••••CONTENT•••••••••••••*/
.mrg {
	margin:0px 0px 0px 8px; width:720px;
}
.cont {
	width:735px;
	margin:0px 0px 0px 14px;
	background:url(images/cont_bg.jpg) 0 0 repeat-x
}
.cb {
	margin:0px 0px 0px 20px; 
	width:200px;
}
li {
	list-style:none;
	line-height:10px;
	padding:5px 0px 3px 0px;
}
li a {
	padding:0px 0px 0px 17px;
	color:#000;
	background:url(images/0blt1.jpg) 0 0 no-repeat;
	font:bold 11px Arial, Helvetica, sans-serif;
}
.l {background:url(images/l.gif) top right repeat-y}
.r {background:url(images/l.gif) 0 0 repeat-y}
.rdmr {
	color:#cb2700;
	font:bold 10px Tahoma, Arial;
	background:url(images/0blt1.jpg) 0 0 no-repeat;
	padding:0px 0px 0px 10px;
	text-transform:uppercase;
}
.ftr {color:#c0c0c0;}
.ftr a{color:#c0c0c0;}

.ftr1 {color:#9a9a9a;}
.ftr1 a{color:#9a9a9a;}

/***** Javascript ****

div.demoElement {
	width: 200px;
	height: 150px;
	border: 1px solid black;
	background-color: #f9f9f9;
	font-size: 12px;
	color: #000000;
	padding: 5px;
	position:relative;
	top:13px;
	right:5px;
}*/

.container {
	width: 94px;
	padding: 0;
	margin: 0 auto;
}
.folio_block {
	position: relative;
	left: 0%; top: 0%;
	margin: 14px 0 0 10px;
}


/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:121px;	
	width: 222px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
	bottom: 5px;
	right: 80px;
}

.image_reel {
	position: absolute;
	top: 0; 
	left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: relative;
	bottom: 2px; 
	right: 22px;
	width: 178px; 
	height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(images/paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold; 
	background: #920000; 
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

/***** IE *******/

.window {
	*height:121px;	
	*width: 205px;
	*overflow: hidden; /*--Hides anything outside of the set width/height--*/
	*position: relative;
	*bottom: 5px;
	*right: 20px;
}

.image_reel {
	*position: relative;
	*top: 0; 
	*left: -20px;
}
.image_reel img {
	*float: left;
	*left: -20px;
	}

/*--Paging Styles--*/
.paging {
	*position: relative;
	*bottom: 2px; 
	*right: -40px;
	*width: 178px; 
	*height:47px;
	*z-index: 100; /*--Assures the paging stays on the top layer--*/
	*text-align: center;
	*line-height: 40px;
	*background: url(images/paging_bg2.png) no-repeat;
	*display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	*padding: 5px;
	*text-decoration: none;
	*color: #fff;
}
.paging a.active {
	*font-weight: bold; 
	*background: #920000; 
	*-moz-border-radius: 3px;
	*-khtml-border-radius: 3px;
	*-webkit-border-radius: 3px;
}
.paging a:hover {*font-weight: bold;}
A ver si entre todos podemos sacar una solución porque me está volviendo loco :S ! Es más, si agrando la celda del div que contiene las imágenes, aunque solo sea un píxel, se deforma y se pone en mitad de la página. Si tienen firebug prueben a aumentar un pixel en esta clase:

Código:
.window {
	*height:121px;	
	*width: 206px;
	*overflow: hidden; /*--Hides anything outside of the set width/height--*/
	*position: relative;
	*bottom: 5px;
	*right: 20px;
}
De 205 a 206 y verán...

Saludos y muchas gracias !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 22/04/2010, 17:20
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
Respuesta: Problemas con CSS y JQuery (scroll de imágenes)

Aquí dejo el HTML como bien dije arriba

Código HTML:
<title>Autoescuela Ronda</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css">
<![endif]-->

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
});
</script>


</head>
<body>

<div class="dt main_t">
			<div class="header top_l">
	           	<embed src="flash/header_v7.swf" width="766" height="139" quality="high"></embed>
			</div>
<div class="dt mpct">
		<div class="dr">
			<div class="dc" style="width:501px">
				<div style="margin:0px 0px 0px 21px;">
                	<embed src="flash/header2_v7.swf" width="480" height="191" quality="high"></embed>
				</div>
		  </div>
			<div class="dc" style="width:265px">
				<div style="margin:0px 30px 0px 20px;">
					
                    <div class="textos_jq">	
                    

                        <div class="container">
                            <div class="folio_block">
                                <div class="main_view">
                                    <div class="window">	
                                        <div class="image_reel">
                                            <a href="#"><img src="images/texto_publi_1.jpg" /></a>
                                            <a href="#"><img src="images/texto_publi_2.jpg" /></a>
                                            <a href="#"><img src="images/texto_publi_3.jpg" /></a>
                                   		</div>
                                	</div>
                                    
                                    <div class="paging">
                                        <a href="#" rel="1">1</a>
                                        <a href="#" rel="2">2</a>
                                        <a href="#" rel="3">3</a>
                                    </div>
                                    
                            	</div>
                        	</div>
                         </div>                     
                    
                       
					<?php /* include 'textopubli.php'; echo $texto[0]."<br>".$texto[1]."<br>".$texto[2];*/ ?> 
                    </div>
                    

				</div>
			</div>
		</div>
	</div>
	<div class="dr">
		<div class="dc">
			<div class="cont">
				<img src="images/spacer.gif" width="1" height="24" alt="" /><br />
				<div class="dt mrg">
					<div class="dr">
						<div class="dc" style="width:240px;">
							<div style="background:url(images/bm.jpg) 0 0 repeat-y">
								<div style="background:url(images/b1t.jpg) 0 0 no-repeat">
									<div style="background:url(images/bb.jpg) bottom left no-repeat">
										<div class="cb">
											<img src="images/spacer.gif" width="1" height="180" alt="" /><br />
										  <br />
											<img src="images/spacer.gif" width="1" height="35" alt="" /><br />
											<a href="#"><img src="images/btn.jpg" align="top" alt="" style="margin:0px 0px 0px 25px;" /></a>
											<br /><img src="images/spacer.gif" width="1" height="25" alt="" /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="dc" style="width:240px">
							<div style="background:url(images/bm.jpg) 0 0 repeat-y">
								<div style="background:url(images/b2t.jpg) 0 0 no-repeat">
									<div style="background:url(images/bb.jpg) bottom left no-repeat">
										<div class="cb">
											<img src="images/spacer.gif" width="1" height="180" alt="" /><br />
										  <br />
											<img src="images/spacer.gif" width="1" height="35" alt="" /><br />
											<a href="#"><img src="images/btn.jpg" align="top" alt="" style="margin:0px 0px 0px 25px;" /></a>
											<br /><img src="images/spacer.gif" width="1" height="25" alt="" /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="dc" style="width:240px">
							<div style="background:url(images/bm.jpg) 0 0 repeat-y">
								<div style="background:url(images/b3t.jpg) 0 0 no-repeat">
									<div style="background:url(images/bb.jpg) bottom left no-repeat">
										<div class="cb">
											<img src="images/spacer.gif" width="1" height="180" alt="" /><br />
										  <br />
											<img src="images/spacer.gif" width="1" height="35" alt="" /><br />
											<img src="images/btn.jpg" align="top" alt="" style="margin:0px 0px 0px 25px;" />
											<br /><img src="images/spacer.gif" width="1" height="25" alt="" /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="dt mrg">
					<div class="dr">
						<div class="dc" style="line-height:11px; border-bottom:1px solid #cacac0">&nbsp;</div>
					</div>
					<div class="dr">
						<div class="dc" style="line-height:10px;">&nbsp;</div>
					</div>
				</div>
				<div class="dt mrg">
					<div class="dr">
						<div class="dc l" style="width:240px">
							<div style="margin:8px 15px 0px 0px;">
							<img src="images/0t1.jpg" align="top" alt="" /><br />
							
							<img src="images/spacer.gif" width="1" height="4" alt="" /><br />
							<b>Noticias </b><br />
Phasellus porta. Fuscius mi magnparturient. montes, nascur ridic mus. Nulla dui. Fusce feugiat mesuada oi nunc odio, gravida.<br />
							<img src="images/spacer.gif" width="1" height="12" alt="" /><br />
							<div align="right">		
								
							</div>
							</div>
						</div>
						<div class="dc" style="width:239px">
							<div style="margin:8px 0px 0px 16px; width:185px">
								<img src="images/0t2.jpg" align="top" alt="" /><br />
								<img src="images/spacer.gif" width="1" height="13" alt="" /><br />
								<ul>
									<li><a href="#">Corporate Information</a></li>
									<li><a href="#">Investor Relations</a></li>
									<li><a href="#">Corporate Governance</a></li>
									<li><a href="#">Corporate Values</a></li>
									<li><a href="#">Motivating Employees</a></li>
									<li><a href="#">Internal Communication</a></li>
									<li><a href="#">Careers</a></li>
								</ul>
								<img src="images/spacer.gif" width="1" height="17" alt="" /><br />
								<div align="right">		
									<a href="#" class="rdmr">learn more</a>
								</div>
							</div>
						</div>
						<div class="dc" style="width:241px">
							<div style="background:url(images/b4m.jpg) 0 0 repeat-y">
								<div style="background:url(images/b4t.jpg) 0 0 no-repeat">
									<div style="background:url(images/b4b.jpg) bottom left no-repeat">
										<img src="images/spacer.gif" width="1" height="22" alt="" /><br />
										<img src="images/0t3.gif" align="top" alt="" style="margin:0px 0px 0px 15px;" /><br />
										<img src="images/spacer.gif" width="1" height="17" alt="" /><br />
										<div style="margin:0px 0px 0px 22px; width:200px">
										<strong>Aenean nonummy henrit mauris. </strong><br /><img src="images/spacer.gif" width="1" height="15" alt="" /><br />

Phasellus porta cipit varius mi. Cum sociis na pen dui. Fus ugiat male odiorbnc odio, gviarsus nuctu lorem enaqorci pemagna. Donec clesumetm onstetuer adscing elit. Mrisntum dicm magnareet aliqu am leo.<br /><img src="images/spacer.gif" width="1" height="17" alt="" /><br />
											<div align="right">
												<strong style="color:5486a9">Stella White, <a href="#" style="color:#5486a9">IT Industries.</a></strong>
											</div>
											<img src="images/spacer.gif" width="1" height="22" alt="" /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dr"><div class="dc"><img src="images/spacer.gif" width="1" height="15" alt="" /><br /></div></div>
	
</div>
	
</body>
</html> 
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?

Etiquetas: jquery, scroll
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 15:19.