Ver Mensaje Individual
  #2 (permalink)  
Antiguo 23/10/2012, 07:38
fedeclav
 
Fecha de Ingreso: septiembre-2012
Ubicación: Cordoba
Mensajes: 17
Antigüedad: 12 años, 2 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*/