Centrar div ...

MARIAYOYA · #1 (**permalink**) 30/01/2012, 17:16

Hola a tod@s los miembr@s de este magnifico foro.
Hace ya bastante tiempo que no entro en el foro,
Un Saludo a tod@s.
Necesito de vuestra valiosa ayuda, a ver si me podeis hechar un cable por favor.
Tengo este HTML:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> 
<HEAD> 
<script type='text/javascript'> 
function inhabilitar(){return false; }  
document.oncontextmenu=inhabilitar; 
</script> 
 <TITLE>SLIDESHOWFULL</TITLE> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script src="responsiveslides.min.js"></script> 
<script> 
    jQuery(function() { 
      $("#slides").responsiveSlides(); 
  }); 
</script> 
<style type="text/css"> 
#Image1 { 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height:100%; 
} 
</style> 
</HEAD> 
<body> 
<div id="slides">  
   <img src="1.jpg" /> 
   <img src="2.jpg" /> 
   <img src="3.jpg" /> 
</div> 
<img src="fondo-11.jpg " alt="BLUE" id="Image1"  /> 
</body> 
</html>

El cual le he puesto una imagen de fondo que se adapta a cualquier tamaño de resolucion de pantalla " al menos eso creo yo".
buscando como hacer un slideshow encontre esta pagina :

http://responsive-slides.viljamis.com/

El slide funciona a la perfeccion.
Pero tengo un problema y una pregunta.
El problema es que no se me centra como sale en la pagina web del autor,
este es el css que tengo:

Código PHP:

  /*! ResponsiveSlides.js v1.04. (c) 2011-2012 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */ 
(function(a){a.fn.responsiveSlides=function(d){var c={speed:4E3,fade:1E3,auto:!0,maxwidth:"none",namespace:"rs"};return this.each(function(){var b=a(this);d&&a.extend(c,d);var g=function(){var a=parseFloat(c.maxwidth);d&&d.maxwidth&&"undefined"===typeof document.body.style.maxHeight&&b.each(function(){b.css("width","100%");b.width()>a?b.css("width",a):b.width()<a&&b.css("width","100%")})};(function(){var f=b.find("img"),e=c.namespace,d=e+"_here",h=e+"_on",i=e+"_s",k=e+"_tabs",e=a('<ul class="'+k+ 
'" />'),j=parseFloat(c.fade),l={position:"relative","float":"left"},g={position:"absolute","float":"none"};1<b.find(f).length&&(f.each(function(a){this.id=i+a}),f.css({top:0,left:0,width:"100%",height:"inherit",position:"absolute"}),b.css({"max-width":parseFloat(c.maxwidth),width:"100%",overflow:"hidden",position:"relative"}).find(":first-child").css(l).end().find(f+":gt(0)").hide(),!0===c.auto?setInterval(function(){b.find(":first-child").fadeOut(j,function(){a(this).css(g)}).next(f).fadeIn(j,function(){a(this).css(l)}).end().appendTo(b)}, 
parseFloat(c.speed)):(t="",f.each(function(a){a+=1;t+='<li><a href="#'+i+a+'"class="'+i+a+'">'+a+"</a></li>"}),e.append(t),b.after(e).find(":first-child").addClass(h),a("."+i+"1").parent().addClass(d),a("."+k+" a").each(function(b){var c=a(this);c.click(function(e){e.preventDefault();if(a("."+h+":animated").length)return!1;c.parent().hasClass(d)||(a("."+k+" li").removeClass(d),a("."+h).stop().fadeOut(j,function(){a(this).removeClass(h).css(g)}).end(),a("#"+i+b).stop().fadeIn(j,function(){a(this).addClass(h).css(l)}).end(), 
c.parent().addClass(d))})})))})();g();a(window).resize(function(){g()})})}})(jQuery);

No se si me falta, o tengo que añadir algo.

Y la pregunta es que si se puede poner un link distinto a cada fotografia que sale, en el slide.
Poner un solo link para todas la fotografias igual lo he conseguido, pero me interesaria que en cada una de las fotos me fuera a un siti diferente.

Muchisimas gracias por adelantado

emprear · #2 (**permalink**) 31/01/2012, 17:19

usa esto

Código Javascript:

Ver original<script> 
    jQuery(function() { 
      $("#slides").responsiveSlides(
      {
        maxwidth: 400
      }
      
      
      
      ); 
  }); 
</script>

Código CSS:

Ver original<style type="text/css"> 
#Image1 { 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height:100%; 
} 
 
#slides {
width: 400px;
margin: 0 auto;
}
 
 
</style>

lo primero es darle un ancho, en el javascript del plugin con maxwidth y repetir el valor en el css con width, y para centrarlo, margin: 0 auto;

SAludos

MARIAYOYA · #3 (**permalink**) 01/02/2012, 09:50

Muchisimas gracias emprear, es justo lo que necesitaba.

Se podria poner que el tamaño del div fuera fijo?
Fijo me refiero que si le doy control + + el div no aumentara ni disminuyese.

Y la otra pregunta
como lo hago para que cada imagen del slide me lleve a un sitio diferente?

Muchisimas gracias por tu ayuda te estoy muy agradecida.

Un Saludo

emprear · #4 (**permalink**) 01/02/2012, 10:33

A lo primero, No
y a lo segundo, con javascript. en tus imágenes
<img src="1.jpg" alt="" onclick="location.href='http://emprear.com'" /></a>

y a tu css agregar

Código CSS:

Ver original#slides img{
cursor: pointer;
}

para generar la mano del cursor

SAludos

MARIAYOYA · #5 (**permalink**) 01/02/2012, 12:54

Hola de nuevo emprear, muchisimas gracias, eres muy amable , me funciona a la perfeccion.
Le pongo el target, para que me abra en una ventana nueva y me la abre en la misma, lo he puesto bien o le falta algo al css?

<img src="1.jpg" alt="" onclick="location.href='http://emprear.com'" target="_blank"/>

Un Saludo

emprear · #6 (**permalink**) 01/02/2012, 13:19

Entonces usa esto

Código HTML:

Ver original<img src="1.jpg" alt="" onclick="window.open('http://emprear.com','nuevaventana','width=800,height=600')"/>

ó esto

Código HTML:

Ver original<img src="1.jpg" alt="" onclick="window.open('http://emprear.com','nuevaventana')"/>

Saludos

MARIAYOYA · #7 (**permalink**) 02/02/2012, 07:04

Hola emprar, cuanta sabiduria, muchisimas gracias.
Dado que viendo las posibilidades que me ofrece este div, he hecho unas modificaciones para mejorarlo y como es normal no doy pie con bola.
Le he colocado <pre> </pre> para poder colocar el div donde quiera, pero no me funciona.
Si fueras tan amable de decirme como lo hago para colocarlos tanto en vertical como horizontal?, no se como quedara mejor.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> 
<HEAD> 
<script type='text/javascript'> 
function inhabilitar(){return false; }  
document.oncontextmenu=inhabilitar; 
</script> 
 <TITLE>SLIDESHOWFULL</TITLE> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script src="responsiveslides.min.js"></script> 
<script> 
    jQuery(function() { 
      $("#slides1").responsiveSlides( 
      { 
        maxwidth: 400 
     }   
    
     
      ); 
  });  
   jQuery(function() { 
      $("#slides2").responsiveSlides( 
      { 
        maxwidth: 400 
     }   
    
     
      ); 
  });  
  jQuery(function() { 
      $("#slides3").responsiveSlides( 
      { 
        maxwidth: 400 
     }   
    
     
      ); 
  });  
</script> 
<style type="text/css"> 
#Image1 { 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height:100%; 
}   
#slides1 { 
width: 400px; 
margin: 0 auto; 
} 
#slides2 { 
width: 400px; 
margin: 0 auto; 
} 
#slides3 { 
width: 400px; 
margin: 0 auto; 
} 
    #slides1 img{ 
    cursor: pointer; 
    }   
    #slides2 img{ 
    cursor: pointer; 
    }  
    #slides3 img{ 
    cursor: pointer; 
    }  
    </style> 
    </HEAD> 
<body> 
<pre> 
<div id="slides1">  
   <img src="1.jpg" title=""onclick="window.open('https://www.google.com/','nuevaventana')"/> 
   <img src="2.jpg" title=""onclick="window.open('http://www.facebook.com//','nuevaventana')"/> 
   <img src="5.jpg" title=""/> 
   </div> 
 
 
<div id="slides2">  
   <img src="1.jpg" title=""onclick="window.open('https://www.google.com/','nuevaventana')"/> 
   <img src="2.jpg" title=""onclick="window.open('http://www.facebook.com//','nuevaventana')"/> 
   <img src="5.jpg" title=""/> 
   </div> 
 
 
<div id="slides3">  
  <img src="1.jpg" title=""onclick="window.open('https://www.google.com/','nuevaventana')"/> 
   <img src="2.jpg" title=""onclick="window.open('http://www.facebook.com//','nuevaventana')"/> 
   <img src="5.jpg" title=""/> 
   </div> 
</pre> 
<img src="fondo-11.jpg " alt="BLUE" id="Image1"  /> 
</body> 
</html>

Muy atentamente y siempre agradecida.

Un Saludo

emprear · #8 (**permalink**) 04/02/2012, 06:24

@MARIAYOYA

La etiqueta <pre> no tiene absolutamente nada que ver con el posicionamiento.

Podrías utilizar position, o aplicar margin

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>slideshowfull</title>
<style type="text/css"> 
#Image1 { 
position: fixed; 
z-index: -1; 
top: 0; 
left: 0; 
width: 100%; 
height:100%; 
} 
 
#slides1 {
width: 400px;
margin: 0 auto;
}
#slides2 {
width: 400px;
position: absolute;
left: 10px;
top: 300px;
}
#slides3 {
width: 400px;
margin-left: 250px;
margin-top: -300px;
}
 
 
#slides img, #slides2 img,#slides3 img{
cursor: pointer;
}
</style>
<script type='text/javascript'> 
function inhabilitar(){return false; }  
document.oncontextmenu=inhabilitar; 
</script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type='text/javascript'></script>
<script src="responsiveslides.min.js" type='text/javascript'></script> 
<script type='text/javascript'> 
    jQuery(function() { 
      $("#slides1").responsiveSlides({
        maxwidth: 400
      }
      ); 
      
      
      $("#slides2").responsiveSlides({
        maxwidth: 400
      }
      );
      
      
      $("#slides3").responsiveSlides({
        maxwidth: 400
      }
      );
      
  }); 
</script> 
 
</head> 
<body> 
<div id="slides1">  
   <img src="1.jpg" alt="" onclick="window.open('http://emprear.com','nuevaventana','width=800,height=600')"/>
   <img src="2.jpg" alt="" /> 
   <img src="3.jpg" alt="" /> 
</div> 
 
<div id="slides2">  
   <img src="1.jpg" alt="" onclick="window.open('http://emprear.com','nuevaventana','width=800,height=600')"/>
   <img src="2.jpg" alt="" /> 
   <img src="3.jpg" alt="" /> 
</div> 
 
<div id="slides3">  
   <img src="1.jpg" alt="" onclick="window.open('http://emprear.com','nuevaventana','width=800,height=600')"/>
   <img src="2.jpg" alt="" /> 
   <img src="3.jpg" alt="" /> 
</div> 
<img src="steel.jpg" alt="" id="Image1" /> 
</body> 
</html>

Saludos

alex_dh · #9 (**permalink**) 05/02/2012, 23:51

creo que ya algun compañero habrá dicho.

necesitas ponerle un tamaño, principalmente el ancho. luego de eso vas al css y le agregas margin

Código HTML:

Ver original<div id="hola">hola</div>

Código CSS:

Ver original#hola {
width: 300px;
margin: 0 auto;
}

espero esto os sirva de mucha ayuda...