Tema: Nivo slider descolocado
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 05/12/2013, 17:10
Avatar de herzbazi
herzbazi
 
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 8 meses
Puntos: 36
Respuesta: Nivo slider descolocado
reemplaza el codigo de tu index todo por este , nota las rutas de imagenes , hojas de estilo, y jss tienes que cambiarlas por las que ya tienes tu ahi , yo las puse desde una http.

espero te sirva , asi es mucho mas facil de hacer usar divs

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Maru de la torre - Estudio de Yoga en Majadahonda - Madrid</title> 
  6.     <!--Iniciscript de nivoslider-->
  7.     <script src="http://www.marudelatorre.com/js/jquery-1.9.1.min.js" type="text/javascript"></script> <!-- carga jQuery -->
  8.     <script src="http://www.marudelatorre.com/js/jquery.nivo.slider.pack.js" type="text/javascript"></script> <!-- carga plugin jquery.nivo.slider.pack.js -->
  9.             <script type="text/javascript">
  10.             $(window).load(function() {
  11.                         $('#slider').nivoSlider({
  12.                             animSpeed: 1000,
  13.                             pauseTime: 8000,
  14.                             });
  15.                         });
  16.             function MM_preloadImages() { //v3.0
  17.               var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  18.                 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  19.                 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  20.             }
  21.             function MM_swapImgRestore() { //v3.0
  22.               var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  23.             }
  24.  
  25.             function MM_findObj(n, d) { //v4.01
  26.               var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  27.                 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  28.               if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  29.               for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  30.               if(!x && d.getElementById) x=d.getElementById(n); return x;
  31.             }
  32.  
  33.             function MM_swapImage() { //v3.0
  34.               var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  35.                if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  36.             }
  37.             </script>
  38.     <!-- Final script de nivoslider-->
  39.     <!-- css de nivoslider-->
  40.     <link rel="stylesheet" href="http://www.marudelatorre.com/styles/nivo-slider.css" type="text/css" media="screen" /> <!-- carga estilo nivo-slider.css -->
  41.     <link rel="stylesheet" href="http://www.marudelatorre.com/styles/default.css" type="text/css" media="screen" />
  42.     <!-- css de nivoslider-->
  43.     <style>
  44.     body{
  45.         background-image: url(http://www.marudelatorre.com/images/fondo1600.gif);
  46.         color:#fff;
  47.     }
  48.     .container{
  49.         width: 960px;
  50.         margin:0 auto;
  51.     }
  52.     .cont{
  53.         display: inline-table;
  54.         margin-left: 0px;
  55.     }
  56.     ul.menu{
  57.         list-style: none;
  58.         margin-top: -50px;
  59.     }
  60.     ul.menu li{
  61.         display: inline-table;
  62.         padding: 5px;
  63.     }
  64.     ul.menu li a{
  65.         text-decoration: none;
  66.         color:#fff;
  67.     }
  68.         ul.menu li a:hover{
  69.         color:#fae002;
  70.     }
  71.     .nivo-controlNav{
  72.         display: none!important;
  73.     }
  74.     .redes{
  75.         display: inline-table;
  76.         width: 400px;
  77.     }
  78.     .redes img{
  79.         display: inline-table;
  80.         padding: 5px;
  81.     }
  82.     #copy{
  83.         margin-top: -30px;
  84.     }
  85.     #red{
  86.         width:150px;
  87.         margin-left: 400px;
  88.     }
  89.     .redes a img:hover{
  90.         width: 55px;
  91.     }
  92.     </style>
  93. </head>
  94. <body>
  95.     <div class="container">
  96.         <div class="header">
  97.             <div class="cont">
  98.                 <img src="http://www.marudelatorre.com/images/social/335x100%20logo1.png" alt="logo">
  99.             </div>
  100.             <div class="cont">
  101.                 <ul class="menu">
  102.                     <li><a href="">yoga</a></li>
  103.                     <li><a href="">estilos</a></li>
  104.                     <li><a href="">talleres</a></li>
  105.                     <li><a href="">formación</a></li>
  106.                     <li><a href="">galeria</a></li>
  107.                     <li><a href="">profesores</a></li>
  108.                     <li><a href="">horarios</a></li>
  109.                     <li><a href="">tarifas</a></li>
  110.                     <li><a href="">dónde</a></li>
  111.                 </ul>
  112.             </div>                              
  113.         </div>
  114.         <div class="cuerpo">
  115.             <div class="banner">
  116.                 <div id="slider" class="nivoSlider">
  117.                       <img src="http://www.marudelatorre.com/images/900x500-01.jpg" alt="" title="maru de la torre - yoga" data-transition="slideInLeft" />
  118.                       <img src="http://www.marudelatorre.com/images/900x500-02.jpg" alt="" title="master en yogas modernos" data-transition="slideInLeft" /> 
  119.                       <img src="http://www.marudelatorre.com/images/900x500-03.jpg" alt="" title="formación de profesores" data-transition="slideInLeft" />
  120.                       <img src="http://www.marudelatorre.com/images/900x500-04.jpg" alt="" title="inmersión en el yoga 2013-2014" data-transition="slideInLeft" />
  121.                       <img src="http://www.marudelatorre.com/images/900x500-05.jpg" alt="" title="" data-transition="slideInLeft" />
  122.                  </div>
  123.             </div>
  124.         </div>
  125.         <div class="footer">
  126.             <div class="redes" id="copy">
  127.                 diseñado por <a href="http://www.vaquerizoarquitectos.com/" target="new">vaquerizoarquitectos</a>
  128.             </div>
  129.             <div class="redes" id="red">
  130.                 <a href=""><img src="http://www.marudelatorre.com/images/social/50x50%20mail2.png" alt="contacto"></a>
  131.                 <a href=""><img src="http://www.marudelatorre.com/images/social/50x50%20fb2.png" alt="facebook"></a>
  132.             </div>
  133.         </div>
  134.     </div>
  135. </body>
  136. </html>
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..