Foros del Web » Creando para Internet » HTML »

Problema con slider, al insertarlo

Estas en el tema de Problema con slider, al insertarlo en el foro de HTML en Foros del Web. Gente, vuelvo de nuevo, mi problema es que quiero poner el slider de imagenes entre el menu y la 1era linea de texto " noticias ...
  #1 (permalink)  
Antiguo 23/10/2012, 07:38
 
Fecha de Ingreso: septiembre-2012
Ubicación: Cordoba
Mensajes: 17
Antigüedad: 11 años, 7 meses
Puntos: 0
Pregunta Problema con slider, al insertarlo

Gente, vuelvo de nuevo, mi problema es que quiero poner el slider de imagenes entre el menu y la 1era linea de texto " noticias " , " agenda de recitales ". Y no hay forma que pueda hacerlo!!

Yo al codigo lo puse dentro del Div: cajadesplazamiento...

el slider es:





y a mi me queda asi:





les dejo el codigo a ver si se dan cuenta.


Código:
<head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>PAGINA IVAN CONIGLIO</title>

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

    <script src="image-slider.js" type="text/javascript"></script>

    <link href="estilos.css" rel="stylesheet" type="text/css"/>

  
    
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#slider').slider({ speed: 500 });

        });       
        
    </script>



</head>

<body>



        <ul id="navigation">
          <li class="facebook"><a href="https://www.facebook.com/ivanconiglio" target="_blank" title="Facebook"></a></li>
           <li class="twitter"><a href="http://twitter.com/ivanconiglio" target="_blank" title="Twitter"></a></li>
           <li class="youtube"><a href="http://www.youtube.com/user/IvanConiglio?feature=watch" target="_blank" title="YouTube"></a></li>
            
        </ul>

   
        
    <!--comienza javascript-->   
     
        <script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>
       

<!--fin javascript-->


    
    
 <div id="todo"> 
         
         <div id="encabezado">
            
            <div id="logo">
               <h1>Ivanlogo</h1>
            </div>
           
            <div id="menu"> 
            <ul> 
               <li class="estiloinicio"><a href="">Inicio</a></li>
                <li><a href="">Biografia</a></li>
                <li><a href="">Discografia</a></li>
                <li><a href="">Fotos</a></li>
                <li><a href="">Videos</a></li>
                <li><a href="">Contacto</a></li>
            </ul>                          
            </div>   
         
         </div> 
              
         <div id="cajadesplazamiento">
           
            
    <div id="container">
        <div id="slider">
            <div>
                <img alt="Ivan 1" src="imagenes/1.png" />
                <a href="" target="_blank">Tapa CD: Lo que Soy</a>
            </div>
            <div>
                <img alt="Ivan 2" src="imagenes/2.png" />
                <a href="" target="_blank">Jesús María</a></div>
            <div>
                <img alt="Ivan 3" src="imagenes/3.png" />
                <a href="" target="_blank">Mis Pagos...</a></div>
            <div>
                <img alt="Ivan 4" src="imagenes/4.png" />
                <a href="" target="_blank">La Copla Bar</a></div>
            <div>
                <img alt="Ivan 5" src="imagenes/1.png" />
                <a href="" target="_blank">Otra para prueba</a></div>
            
               
        </div>
    </div>
         
         </div> 
                      
                      
         <div id="contenido"> 
            
            <h2> Noticias </h2>
            
                <? 
              include("conexion.php");
                include($pagina); 
               mysql_close($conexion);
        
                  ?>
         
         </div> 

         <div id="barraderecha">
           
           <h3> Agenda de Recitales </h3>
         
         </div> 
    
         <div id="pie"> 
         
          
           <p>Todos los Derechos Reservados | <a href="http://www.ivanconiglio.com.ar" target="_blank">Ivan Coniglio &copy; 2012.</a>
           
         </div> 
      </div> 
   </body> 
</html>
  #2 (permalink)  
Antiguo 23/10/2012, 07:38
 
Fecha de Ingreso: septiembre-2012
Ubicación: Cordoba
Mensajes: 17
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Problema con slider, al insertarlo


Estilos



Código:
body {
   
   margin: 0;
    padding: 0;
    background: url(imagenes/fondos/dark_Tire.png)repeat;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 16px; 
    color: #8A8985;
   
}

#todo {
   width: 1000px;
   margin: 0 auto;
   
}

#encabezado {
   height: 300px;
   background:  url(imagenes/fondos/dark_Tire.png);
  
}

#logo {
   float: left;
   height: 60px;
   width: 80px;
   margin: 30px;
   color:#FFF;
   
}


/* Menu */

#menu {
    float: right;
    width: 650px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
}

#menu ul {
    float: right;
    margin: 50;
    padding: 85px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
}

#menu a {
    display: block;
    margin-right: 1px;
    padding: 10px 0px 15px 30px;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    color: #0C0;                  /*color vinculos " biografia ", etc */
    border: none;
}

#menu a:hover, #menu .estiloinicio a {
    text-decoration: none;
    color: #FFFFFF;           /*color blanco vinculo inicio */
}

#cajadesplazamiento {
   
   width: 1000px;
   height: 150px;
   overflow: hidden;
    border-bottom: 1px dashed #0C0;   /*color y linea de barra de desplazamiento */
    font-size: 35px;
}



/* ESTILOS SLIDER DE IMAGENES */

#ubicacion{width:840px; margin:0 auto; text-align:center; margin-top:120px;}
#container
        {
            margin-top:20px;
            
        }
        #slider
        {
            margin: 0 auto;
            text-align:center;
        }

#slider div a{
    font-size: 12px;
    color: white;
    font-weight: bold;
    float:left;
    padding:10px;
    text-decoration:none;
}    

#slider div a:hover{color:#F1D5CA;}    
        
.image-slider
{
    width: 834px;
    height: 172px;
    background: url(imagenes/fondodes.png) no-repeat;
    padding: 14px 16px 0px 16px;
    position: relative; /*overflow: hidden;*/
    font-family:Helvetica, Arial, Tahoma, sans-serif;

}
.image-slider-back, .image-slider-forward
{
    float: left;
    width: 23px;
    height: 98px; /*background-color: #121212;*/
    color: White;
    position: relative;
    top:12px;
    cursor: pointer;
}
.image-slider-back
{
    background-image: url(imagenes/flechaizq.png);
    background-repeat: no-repeat;
    background-position: left;
}
.image-slider-forward
{
    background-image: url(imagenes/flechader.png);
    background-repeat: no-repeat;
    background-position: right;
}
.image-slider-contents
{
    width: 755px;
    height: 154px;
    float: left;
    position: relative;
    overflow: hidden;
}
/*.image-slider-contents .contents-wrapper > div*/
.image-slider-contents .contents-wrapper
{
    position: absolute;
    padding-top: 18px;
}
.image-slider-contents .outer
{
    background-color: White;
    float: left;
    width: 156px;
    height: 86px;
    margin:0px 15px;
    cursor:pointer;
}
.image-slider-contents .outer > div
{
    width: 156px;
    height: 86px;
}
.image-slider-contents .outer > div img
{
    width: 152px;
    height: 82px;
    margin: 2px;
    margin-top: -30px;
}
/*.image-slider-contents > div > div
{
    position: relative;
    float: left;
    width: 156px;
    height: 86px;
    margin-left: 6px;
    margin-right: 6px;
    padding: 2px;
    background-color: White;
}*/
.image-slider-contents img
{
    width: 156px;
    height: 86px;
}

.hidden
{
    display: none;
}
.visible
{
    display: block;
}
.thumbnail-active
{
    filter: alpha(opacity=100);
    opacity: 1.0;
    cursor: pointer;
}
.thumbnail-inactive
{
    filter: alpha(opacity=20);
    opacity: 0.2;
    cursor: pointer;
}

.preview
{
    position: absolute;
    width: 450px;
    height: 260px;
    background-color: White;
    padding: 2px;
    border: solid 1px black;
}
.preview .img-large
{
    width: 450px; /*height: 216px;*/
    z-index: 1000;
}
.preview .img-large .left
{
    position: absolute;
    left: 8px;
    top: 100px;
    width: 16px;
    height: 24px;
    z-index: 1000;
    background: url(imagenes/flechaizq.png);
    cursor:pointer;
}
.preview .img-large .right
{
    position: absolute;
    left: 428px;
    top: 100px;
    z-index: 1000;
    width: 16px;
    height: 24px;
    background: url(imagenes/flechader.png);
    cursor:pointer;
}
.preview .close
{
    position: absolute;
    left: 434px;
    top: -16px;
    width: 32px;
    height: 34px;
    background: url(imagenes/cerrar.png);
    float: right;
    cursor: pointer;
    z-index: 2000;
}
.preview .img-large img
{
    width: 450px;
    height: 260px;

}
.preview .label
{
    width: 434px;
    line-height: 30px;
    float: left;
    position: absolute;
    top: 216px;
    color: Black;
    padding: 8px;
    background-color: White;
    text-align:left;
    font-weight:bold;
    font-size:13px;
}
.outer
{
    border: solid 1px black;
}
.outer.active
{
    border: solid 1px #B56161;
    background-color: #F1D5CA;
}
.outer.active div span
{
    color: #F1D5CA;
}

#footer{width:100%; margin:0 auto; text-align:center; line-height:50px;}
#footer a{color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
#footer a:hover{color:#B56161;}

/* FIN DE ESTILOS SLIDER DE IMAGENES */


#contenido {
   
   float: left;
  text-align: justify;
  background-color:#FFF;
   width: 700px;
   height: 0 auto;
    margin-top: 30px;
   
    
}

#barraderecha {
   
   float: right;
   width: 300px;  
   height: 0 auto;
   margin-top: 30px;
   border-bottom: 1px dashed #0C0; 
   background-color:#FFF;
   
}

/* H de texto */

h1 {
   font-size: 60px;
}

h2 {
    padding: 0px 0px 30px 0px;
    letter-spacing: -1px;
    font-weight: normal;
    color: #7D7764;         /* color titulo " noticias " */ 
    font-size: 30px;
    text-align: center;
    
}

h3 {
    padding: 0px 0px 30px 0px;
    letter-spacing: -1px;
    font-weight: normal;
    color: #7D7764;         /* color titulo " agenda de recitales " */ 
    font-size: 30px;
    text-align: center;
    
}



h4 {
   font-size: 20px;
   text-align: center;
   color: #FFF;
   font-weight: normal;
   letter-spacing: 7px;
   
}



/* PIE */

#pie {
    height: 400px;
    margin: 0 auto;
    padding: 50px 0px 0px 0px;
    
    
}

#pie p {
    margin: 0;
    padding-top: 300px;
    line-height: normal;
    text-align: center;
    color: #0C0;
        
}



#pie a{
     
    color: #0C0;
    text-decoration:none;
    
}

#pie a:hover {
     
    color: #FFFFFF;     /* color blanco cuando se pone por encima el mouse */

}







/*comienza estilo barra en javascript*/


ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 100px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .facebook a{
    background-image: url(imagenes/fa.png);
}
ul#navigation .twitter a      {
    background-image: url(imagenes/tw.png);
}
ul#navigation .youtube a      {
    background-image: url(imagenes/yo.png);
}


/*fin estilo barra en javascript*/
  #3 (permalink)  
Antiguo 23/10/2012, 16:01
 
Fecha de Ingreso: septiembre-2012
Ubicación: Cordoba
Mensajes: 17
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Problema con slider, al insertarlo

Solucionado por mi :) gracias

Etiquetas: colocacion, slider, ubicacion
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 00:52.