Slider accordeon

Documentations et Dossiers [Réglé] Slider accordeon Redimensionnement texte

EDN Curieux(se)

Rang

Inscrit le : 01/01/2012 à 17h21

Le 12/01/2012 à 11h57

Bonjour à tous, j'ai redimmesionner tout le slider pour le faire plus petit.
Le seul problème que j'ai actuellement, c'est que le texte contenu dans les slides ne revient pas à la ligne automatiquement, donc le bout des news ou du texte est mangé.
Je vous présente mon CSS si quelqu'un a une idée....
Merci à tous.

Code CSS :

 
.horizontalaccordion{
margin:10px;
background: url("images/accordeon/accordion.png") no-repeat scroll 0 0 transparent;
border:1px solid #000000;
height: 230px;
width:398px;
-moz-box-shadow: 2px 2px 3px #343434;
-webkit-box-shadow: 2px 2px 3px #343434;
-o-box-shadow: 2px 2px 3px #343434;
box-shadow: 2px 2px 3px #343434;
}
 
.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
   height: 230px;
}
 
.horizontalaccordion>ul>li {
background: url("images/accordeon/slide.jpg") no-repeat scroll 0 0 transparent;
    display:block;
overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
width:42px;
height: 230px;
 
 
    /* CSS3 Transitions */
    transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}
 
.horizontalaccordion>ul>li>h3 {
    /*background: none repeat scroll 0 0 #CCCCCC;
    border-left: 1px solid #F0F0F0;*/
    color: #000000;
    display: block;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    height: 19px;
    margin: 0px;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
    width: 230px;
}
 
.horizontalaccordion>ul>li>div {
    text-shadow: 0 0 0.2em #000000;
background: url("images/accordeon/div.png") no-repeat scroll 0 0 transparent;
    display: none;
    float: left;
color:#FFFFFF;
    height: 230px;
    left: 42px;
    list-style: none outside none;
    margin: 0;
    overflow: auto;
    padding: 8px;
    position: relative;
    top: -40px;
    width: 247px;
overflow: auto;
    *+html top:0px;       /* IE7 Hack */
    *+html left:0px;      /* IE7 Hack */
    *+html background-color:#000000;      /* IE7 Hack */
*+html height: 230px;
}
 
div#imgaccordion {
    margin-left: -10px;
    margin-top: -10px;
}
.horizontalaccordion>ul>li:hover {
    overflow: hidden;
width: 230px;
}
 
.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
}
 
.horizontalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS 
    color:#fff;
    background:#000000;*/
}
 
.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
}
.horizontalaccordion>ul>li>div a{
 text-shadow: 0 0 0.2em #000000;
color:#FFFFFF;
}
.horizontalaccordion>ul>li>div a:hover{
 text-shadow: 0 0 0.2em #FFFFFF;
color:#000000;
}

Sloboda: Liberté en Tchèques.

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 12/01/2012 à 12h57

Bonjour,

Tu as une url de site, ou le slider est visible ??

swan_signature

Site web

Sloboda

EDN Curieux(se)

Rang

Inscrit le : 01/01/2012 à 17h21

Messages: 34

Le 12/01/2012 à 13h05

Malheureusement non, c'est du web local et je suis au boulot, je ne peux pas uploader en ftp. Voici une capture:
Il devrait y avoir: un titre de news vachement long

Edité par Sloboda Le 12/01/2012 à 13h47

Sloboda: Liberté en Tchèques.

Site web

Sloboda

EDN Curieux(se)

Rang

Inscrit le : 01/01/2012 à 17h21

Messages: 34

Le 12/01/2012 à 13h53

Désolé de vous avoir fait chercher, j'ai trouvé... Voici la correction : modification du left et width dans .horizontalaccordion>ul>li>div

Code CSS :

 
.horizontalaccordion{
margin:10px;
background: url("images/accordeon/accordion.png") no-repeat scroll 0 0 transparent;
border:1px solid #000000;
height: 230px;
width:398px;
-moz-box-shadow: 2px 2px 3px #343434;
-webkit-box-shadow: 2px 2px 3px #343434;
-o-box-shadow: 2px 2px 3px #343434;
box-shadow: 2px 2px 3px #343434;
}
 
.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
   height: 230px;
}
 
.horizontalaccordion>ul>li {
background: url("images/accordeon/slide.jpg") no-repeat scroll 0 0 transparent;
    display:block;
overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
width:42px;
height: 230px;
 
 
    /* CSS3 Transitions */
    transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}
 
.horizontalaccordion>ul>li>h3 {
    /*background: none repeat scroll 0 0 #CCCCCC;
    border-left: 1px solid #F0F0F0;*/
    color: #000000;
    display: block;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    height: 19px;
    margin: 0px;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
    width: 230px;
}
 
.horizontalaccordion>ul>li>div {
    text-shadow: 0 0 0.2em #000000;
background: url("images/accordeon/div.png") no-repeat scroll 0 0 transparent;
    display: none;
    float: left;
color:#FFFFFF;
    height: 230px;
    left: 0px;
    list-style: none outside none;
    margin: 0;
    overflow: auto;
    padding: 8px;
    position: relative;
    top: -40px;
    width: 230px;
overflow: auto;
    *+html top:0px;       /* IE7 Hack */
    *+html left:0px;      /* IE7 Hack */
    *+html background-color:#000000;      /* IE7 Hack */
*+html height: 230px;
}
 
div#imgaccordion {
    margin-left: -10px;
    margin-top: -10px;
}
.horizontalaccordion>ul>li:hover {
    overflow: hidden;
width: 230px;
}
 
.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
}
 
.horizontalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS 
    color:#fff;
    background:#000000;*/
}
 
.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
}
.horizontalaccordion>ul>li>div a{
 text-shadow: 0 0 0.2em #000000;
color:#FFFFFF;
}
.horizontalaccordion>ul>li>div a:hover{
 text-shadow: 0 0 0.2em #FFFFFF;
color:#000000;
}

Edité par Sloboda Le 12/01/2012 à 13h53

Sloboda: Liberté en Tchèques.

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 12/01/2012 à 14h56

Haa bah Okay ^^ Merci de nous avoir mis ta correction

swan_signature

Site web

babsolune

EDN Intéressé(e)

Rang

Inscrit le : 23/01/2012 à 01h32

Messages: 69

Le 10/02/2012 à 13h46

hop un petit up suite a des soucis ici

alors

le css

Citation:

Les images

Vous allez maintenant télécharger l'archive suivante, la dézipper, et placer le dossier accordeon dans le dossier "/templates/VOTRE-THEME/theme/images/".

du coup, il faut modifier l'url d'appel des images dans le css
images/imagedefond.png => images/acordeon/imagedefond.png
ou mettre les images dans /images ^^

ça c'etait simple

le TPL

alors perso, l'expression ./ on me la fait utiliser en shell pour lancer un serveur ou autre, mais pas en html, du coup j'ai trouvé ça suspect ^^
En tant que padawan-noob-debutant-qui-apprend-a-l'emporte-piece, je ne doute pas que cela puisse fonctionner et serai bien incapable d'expliquer pourquoi, mais j'ai eu en local un bug qui ne permettait pas d'afficher les images malgré les modif necessaires:

Code HTML :

<h3><div id="imgaccordion"><img src="./templates/soccerbooster/theme/images/accordeon/slide-news.png" height="300px" width="55px" alt="News"></div></h3>

ne fonctionne pas alors que les images sont dans le bon répertoire

j'ai remplacé ./ par ../ et ça marche

du coup j'ai carrément remplacé par

Code HTML :

<h3><div id="imgaccordion"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/accordeon/slide-news.png" height="300px" width="55px" alt="News"></div></h3>