Tweet
Bonjour à toutes et à tous,
Depuis plusieurs semaines j'essayais de modifier l'affichage de mon slider avec la vue iconic, afin d'obtenir un slider des mes derniers évènements, je suis presque arrivée au résultat que je souhaitais.
Pour ce faire, j'ai utilisé le slider easyslider disponible à cette adresse : http://cssglobe.com/easy-slider-17-n...jquery-slider/
Et j'ai effectuer les modifications que j'ai expliqué dans ce poste : http://forum.joomla.fr/showthread.ph...v%C3%A8nements
Malheuresement ce slider n'est pas responsive, et j'aurais voulu savoir comment faire pour le rendre responsible.
Voici le CSS que j'ai pour le moment :
Si quelqu'un à une idée à me soumettre, je suis prête à la tester.
Dans l'attente de vos réponses.
Cordialement,
Sa5m
Depuis plusieurs semaines j'essayais de modifier l'affichage de mon slider avec la vue iconic, afin d'obtenir un slider des mes derniers évènements, je suis presque arrivée au résultat que je souhaitais.
Pour ce faire, j'ai utilisé le slider easyslider disponible à cette adresse : http://cssglobe.com/easy-slider-17-n...jquery-slider/
Et j'ai effectuer les modifications que j'ai expliqué dans ce poste : http://forum.joomla.fr/showthread.ph...v%C3%A8nements
Malheuresement ce slider n'est pas responsive, et j'aurais voulu savoir comment faire pour le rendre responsible.
Voici le CSS que j'ai pour le moment :
Code:
body {
background:#fff url(../images/bg_body.gif) repeat-x;
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
line-height:180%;
margin:0;
padding:0;
text-align:center;
}
h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:0 20px;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:674px;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#container{
margin:0 auto;
position:relative;
text-align:left;
width:100%;/*348px;*//*696px;*/
background:#fff;
margin-bottom:2em;
border-color: #000;
}
#header{
height:80px;
line-height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li,{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width: 348px;/*550px;*//*100%;*//*696px;*/
height:241px;
overflow:hidden;
background-color: #d8d8d8;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:348px;/*696px;*/
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
Dans l'attente de vos réponses.
Cordialement,
Sa5m
Commentaire