Foros del Web » Creando para Internet » HTML »

Nivo slider descolocado

 Estas en el tema de Nivo slider descolocado en el foro de HTML en Foros del Web. Hola amigos. Recientemente e utilizado un nivo slider en mi web http://www.marudelatorre.com/ El slider está dentro de una tabla de 900x500 px y las fotos ...
  #1 (permalink)  
Antiguo 05/12/2013, 12:24
 
Fecha de Ingreso: diciembre-2013
Mensajes: 3
Antigüedad: 10 años, 5 meses
Puntos: 0
Nivo slider descolocado
Hola amigos.
Recientemente e utilizado un nivo slider en mi web http://www.marudelatorre.com/
El slider está dentro de una tabla de 900x500 px y las fotos son del mismo tamaño.
Mi problema es que existe un espacio entre la parte inferior del slider y los iconos de mail y facebook sin saber porqué ni cómo quitarlo.
Les agradecería ayuda. no duden en pedir la información que les falte.
Gracias de antemano.
  #2 (permalink)  
Antiguo 05/12/2013, 12:58
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 2 meses
Puntos: 36
Respuesta: Nivo slider descolocado
en el div wrapper tienes un p el cual esta vacio eliminalo creo que ahi te dara resultado

y lo otro es que deberias de usar unicamente div
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
Última edición por herzbazi; 05/12/2013 a las 13:02 Razón: modificaion de tema
  #3 (permalink)  
Antiguo 05/12/2013, 14:37
 
Fecha de Ingreso: diciembre-2013
Mensajes: 3
Antigüedad: 10 años, 5 meses
Puntos: 0
Respuesta: Nivo slider descolocado
Gracias por tu respuesta herzbazi pero soy novato y no te sigo... he quitado una etiqueta p que he visto pero visualmente no ha cambiado nada.
  #4 (permalink)  
Antiguo 05/12/2013, 17:10
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 2 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..
  #5 (permalink)  
Antiguo 06/12/2013, 03:55
 
Fecha de Ingreso: diciembre-2013
Mensajes: 3
Antigüedad: 10 años, 5 meses
Puntos: 0
Respuesta: Nivo slider descolocado
Hola Herzbazi he escrito el código que te mando a continuación pero sale todo descolocado.
Gracias de nuevo

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="js/jquery-1.9.1.min.js" type="text/javascript"></script> <!-- carga jQuery -->
  8.     <script src="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="styles/nivo-slider.css" type="text/css" media="screen" /> <!-- carga estilo nivo-slider.css -->
  41.     <link rel="stylesheet" href="styles/default.css" type="text/css" media="screen" />
  42.     <!-- css de nivoslider-->
  43.     <style>
  44.     body{
  45.         background-image: url(images/fondo1600.gif);
  46.         color:#fff;
  47.     }
  48.     .container{
  49.         width: 900px;
  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="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="images/900x500-01.jpg" alt="" title="maru de la torre - yoga" data-transition="slideInLeft" />
  118.                       <img src="images/900x500-02.jpg" alt="" title="master en yogas modernos" data-transition="slideInLeft" /> 
  119.                       <img src="images/900x500-03.jpg" alt="" title="formación de profesores" data-transition="slideInLeft" />
  120.                       <img src="images/900x500-04.jpg" alt="" title="inmersión en el yoga 2013-2014" data-transition="slideInLeft" />
  121.                       <img src="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="images/social/50x50%20mail2.png" alt="contacto"></a>
  131.                 <a href=""><img src="images/social/50x50%20fb2.png" alt="facebook"></a>
  132.             </div>
  133.         </div>
  134.     </div>
  135. </body>
  136. </html>
Última edición por pzin; 06/12/2013 a las 04:12 Razón: formato código
  #6 (permalink)  
Antiguo 06/12/2013, 09:13
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 2 meses
Puntos: 36
lo colocaste todo
tal como te dije
eliminaste todo el codigo que tenias?

no deberia de salir desfasado

puedes subir el archivo tal como te lo di para ver cual es el problema

<<!doctype html> lo tienes mal tienes un < de mas quitalo
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..

Etiquetas: espacio, nivo, slider
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:18.