featured content slider 100%

j84625 · #1 (**permalink**) 19/06/2010, 15:08

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

Daniel Ulczyk · #2 (**permalink**) 19/06/2010, 15:46

Cita:

Iniciado por j84625

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!

j84625 · #3 (**permalink**) 19/06/2010, 16:02

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="wp-content/w3tc/min/indexd8bb.css?gg=default&amp;g=include&amp;t=css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="librerias/loopedslider.min.js"></script>
<script type="text/javascript" src="librerias/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="librerias/index806a.js?gg=default&amp;g=include-footer&amp;t=js"></script>
</head>
<body>
<div id="loopedSlider">
    <div class="container">
        <div class="slides">
            <div>1<br />1<br />1<br />1<br />1<br /></div>
            <div>2<br />2<br />2<br />2<br />2<br /></div>
            <div>3<br />3<br />3<br />3<br />3<br /></div>
            <div>4<br />4<br />4<br />4<br />4<br /></div>
            <div>5<br />5<br />5<br />5<br />5<br /></div>
        </div>
    </div>
    <a href="#" class="previous">previous</a> <a href="#" class="next">next</a>
    <ul class="pagination">
        <li><a href="#" style="background:url(img/posts/sm/1.png);" >1</a></li>
        <li><a href="#" style="background:url(img/posts/sm/2.png);" >2</a></li>
        <li><a href="#" style="background:url(img/posts/sm/3.png);" >3</a></li>
        <li><a href="#" style="background:url(img/posts/sm/4.png);" >4</a></li>
        <li><a href="#" style="background:url(img/posts/sm/5.png);" >5</a></li>
    </ul>
</div>
</body>
</html>

Código CSS:

Ver originalimg{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}

los ficheros js los voy a subir ahora

Ejemplo:http://koox.iespana.es/test/

JavierB · #4 (**permalink**) 20/06/2010, 02:42

Hola j84625

Muevo tu tema al foro de CSS desde Web general.

Saludos,