Foros del Web » Creando para Internet » CSS »

featured content slider 100%

Estas en el tema de featured content slider 100% en el foro de CSS en Foros del Web. hola quisiera cambiar el tamaño de 800px a 100% Código: img{border:none} .container, .slides div,#loopedSlider,#newsSlider{width: 800px } .container{height:280px;overflow:hidden;position:relative;cursor:pointer} .slides{position:absolute;top:0;left:0}.slides div{position:absolute;top:0;display:none} #loopedSlider,#newsSlider{margin:0 auto;position:relative;clear:both} #loopedSlider .previous,#loopedSlider .previous:visited,#loopedSlider .next,#loopedSlider ...
  #1 (permalink)  
Antiguo 19/06/2010, 16:08
Avatar de j84625  
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 9 años, 6 meses
Puntos: 2
featured content slider 100%

hola quisiera cambiar el tamaño de 800px a 100%
Código:
img{border:none}
.container, .slides div,#loopedSlider,#newsSlider{width:800px}
.container{height:280px;overflow:hidden;position:relative;cursor:pointer}
.slides{position:absolute;top:0;left:0}.slides
div{position:absolute;top:0;display:none}
#loopedSlider,#newsSlider{margin:0
auto;position:relative;clear:both}
#loopedSlider .previous,#loopedSlider .previous:visited,#loopedSlider .next,#loopedSlider .next:visited{display:block;text-indent:-9999px;background:url(featured_arrows.png) no-repeat;width:40px;height:59px;position:absolute;top:0px}
#loopedSlider .previous:hover{background-position:bottom left}
#loopedSlider .next,#loopedSlider .next:visited{background-position:top right;right:0px;left:auto}
#loopedSlider .next:hover{background-position:bottom right}
ul.pagination{list-style:none; paddpadding-right:10px;margin:5px 
0;height:45px;position:absolute;top:auto;bottom:0px;left:auto;right:0px}
ul.pagination
li{float:left;height:44px;width:44px;margin:0
5px 0 0}ul.pagination li
a{width:40px;height:40px;background-position:center !important;background-repeat:no-repeat;text-indent:-9999px;display:block;border:2px
solid #444}ul.pagination li.active
a{border:2px solid #3fbbeb}
cuando lo edito el script no se como llamarlo deja de funcionar no se como explicarme
__________________
Pagina de sobre los animales
Los animales
  #2 (permalink)  
Antiguo 19/06/2010, 16:46
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Respuesta: featured content slider 100%

Cita:
Iniciado por j84625 Ver Mensaje
cuando lo edito el script no se como llamarlo deja de funcionar no se como explicarme
Cuando cualquiera mira CSS—que es lo que has publicado—resulta mucho muy difícil hacer la abstracción y ver la medida que los cambios afectan o no al diseño en ausencia del HTML correspondiente.

Podrías, aunque sea, publicar la URL donde un ejemplo sobre esto se encuentre en forma pública?

Saludos!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #3 (permalink)  
Antiguo 19/06/2010, 17:02
Avatar de j84625  
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: featured content slider 100%

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <link rel="stylesheet" type="text/css" href="wp-content/w3tc/min/indexd8bb.css?gg=default&amp;g=include&amp;t=css" media="all" />
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="librerias/loopedslider.min.js"></script>
  6. <script type="text/javascript" src="librerias/1.3.2/jquery.min.js"></script>
  7. <script type="text/javascript" src="librerias/index806a.js?gg=default&amp;g=include-footer&amp;t=js"></script>
  8. </head>
  9. <div id="loopedSlider">
  10.     <div class="container">
  11.         <div class="slides">
  12.             <div>1<br />1<br />1<br />1<br />1<br /></div>
  13.             <div>2<br />2<br />2<br />2<br />2<br /></div>
  14.             <div>3<br />3<br />3<br />3<br />3<br /></div>
  15.             <div>4<br />4<br />4<br />4<br />4<br /></div>
  16.             <div>5<br />5<br />5<br />5<br />5<br /></div>
  17.         </div>
  18.     </div>
  19.     <a href="#" class="previous">previous</a> <a href="#" class="next">next</a>
  20.     <ul class="pagination">
  21.         <li><a href="#" style="background:url(img/posts/sm/1.png);" >1</a></li>
  22.         <li><a href="#" style="background:url(img/posts/sm/2.png);" >2</a></li>
  23.         <li><a href="#" style="background:url(img/posts/sm/3.png);" >3</a></li>
  24.         <li><a href="#" style="background:url(img/posts/sm/4.png);" >4</a></li>
  25.         <li><a href="#" style="background:url(img/posts/sm/5.png);" >5</a></li>
  26.     </ul>
  27. </div>
  28. </body>
  29. </html>

Código CSS:
Ver original
  1. img{border:none}
  2. .container, .slides div,#loopedSlider,#newsSlider{width:800px}
  3. .container{height:280px;overflow:hidden;position:relative;cursor:pointer}
  4. .slides{position:absolute;top:0;left:0}.slides
  5. div{position:absolute;top:0;display:none}
  6. #loopedSlider,#newsSlider{margin:0
  7. auto;position:relative;clear:both}
  8. #loopedSlider .previous,#loopedSlider .previous:visited,#loopedSlider .next,#loopedSlider .next:visited{display:block;text-indent:-9999px;background:url(featured_arrows.png) no-repeat;width:40px;height:59px;position:absolute;top:0px}
  9. #loopedSlider .previous:hover{background-position:bottom left}
  10. #loopedSlider .next,#loopedSlider .next:visited{background-position:top right;right:0px;left:auto}
  11. #loopedSlider .next:hover{background-position:bottom right}
  12. ul.pagination{list-style:none; paddpadding-right:10px;margin:5px
  13. 0;height:45px;position:absolute;top:auto;bottom:0px;left:auto;right:0px}
  14. ul.pagination
  15. li{float:left;height:44px;width:44px;margin:0
  16. 5px 0 0}ul.pagination li
  17. a{width:40px;height:40px;background-position:center !important;background-repeat:no-repeat;text-indent:-9999px;display:block;border:2px
  18. solid #444}ul.pagination li.active
  19. a{border:2px solid #3fbbeb}

los ficheros js los voy a subir ahora

Ejemplo:http://koox.iespana.es/test/
__________________
Pagina de sobre los animales
Los animales

Última edición por j84625; 19/06/2010 a las 17:31
  #4 (permalink)  
Antiguo 20/06/2010, 03:42
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola j84625

Muevo tu tema al foro de CSS desde Web general.

Saludos,

Etiquetas: content, featured, 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




La zona horaria es GMT -6. Ahora son las 01:29.