Discussion :

[oceane751]

Hello!

Je croyais que mon problème venait de jquery mais en fait non.

Pour régler mon problème, j'ai testé pas mal de truc : le border-right, le background-image et là j'en suis au background-color pour ajouter un trait à droite des 4 premiers li
Et j'arrive pas à avoir ce que je veux

En gros, j'ai un caroussel, avec des indicators qui me permettent de savoir où j'en suis dans le défilement de mon caroussel

Et c'est là que ça coince, enfin au moment où je rajoute ces traits à droite de chaque li
A voir ici : http://vaurel.free.fr/shoes/index.html
Test uniquement sur FF pour l'instant

Et ce que je voudrais :

Pffu j'en ai marre de ce problème et je suis sur que le régler est un jeu d'enfant, mais je ne sais pas je bloque complètement!

Quelqu'un pourrait il m'aider?

Merci

[mathieu]

je vois la même chose que sur ta photo d'écran, à part les textes qui ne sont pas exactement alignés mais je pense que ce n'est pas ça la problème ?

[oceane751]

Bonjour!
Merci pour ta réponse

Alors en fait on m'a dit d'utiliser :before et :after
Donc du coup ça a arrangé un peu mon problème

Sauf qu'il y a comme une margin de trop (où sont les 2 flèches sur le premier imp ecran ci-dessous)
J'ai tenté de "jouer" avec mais rien

Voici un imp ecran de ce que j'ai sur mon site de test:




Et je ne sais pas comment dire à la classe "texte" (le texte en dessous des indicators) de se mettre en blanc quand l'indicator est vert

Voici l'imp écran de ce que je souhaiterai :




J'espère que tu comprends ce que je veux dire!

Merci encore!

[mathieu]

déjà il faudrait que tu rajoutes des identifiants différents pour les 5 libellés, pour pouvoir les sélectionner en Jquery
ensuite tu rajoutes un appel de fonction sur un des 2 évènement indiqué dans la documentation :
http://getbootstrap.com/2.3.2/javascript.html#carousel

[kakashi99]

hello,

dis moi, pourquoi le nom des marques/chaussures n'est pas dans le li ? perso moi tout est décalé...



et comme ça un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
color: #FFF;

fera l'affaire pour le texte, non ?

un truc un peu comme ça : http://jsfiddle.net/trnxtpvn/1/

[oceane751]

heu... je suis sous FF pour l'instant et rien n'est décalé
Tu es sous quoi toi?

Si je mets des li, dans ce cas je fais comme dans les indicators :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<li data-target="#myCarousel" data-slide-to="0" class="texte_blanc"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>

?

Merci encore!

[kakashi99]

j'ai testé avec firefox, chrome et ie et j'ai toujours le même comportement, mais c'est normal ta liste a une taille fixe, alors que ton texte est dans une "row" qui s'adapte à la taille de l'écran.

as-tu regardé le lien que j'ai mis dans mon message précédent ?

[oceane751]

ah oauis cool!!! je vais tester!
ça me parait pas mal logique

ps : moi aussi FF 35.0.1 (bon il a quand même quelques décalages mais pas autant que toi :/)

[oceane751]

humm ok
mais du coup ça défile pas :/

il manque pas du jquery?.

[kakashi99]

évidement...

j'ai seulement mis les style que tu voulais dans l'exemple... le carousel tu sais déjà le faire.

[oceane751]

oui ton code est très bien et je t'en remercie

j'ai tenté de copié pour adapter en fonction de ton code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ol class="carousel-indicators" >
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
</ol>

Mais ça ne fonctionne pas :/

[kakashi99]

hello,

essaye ça : http://jsfiddle.net/trnxtpvn/3/

j'ai pas trop le temps, j'ai fait ça vite fait, je te laisse faire le diff avec tes sources si le résultat te convient

[oceane751]

cool ça fonctionne

sauf qu'il manque des traits à chaque li et en plus ces traits ont une espèce de margin en haut et en bas

[kakashi99]

yop,

j'ai mis à jour le jsfiddle, ça devrait faire ce que tu veux.

ce que j'ai changé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.carousel-indicators li {
    border: 1px solid #000;
    border-radius: 0;
    float: left;
    margin:1px 1px 0 0;
    padding-right: 0 !important;  
}
...
li + li.carousel-indicators li:not(:last-child) {
    margin-left: -10px;
    border-right: 1px solid #595858 !important;
}
...
.bar{
    display: block;
    width: 100%;
    height: 9px;
    margin: auto;
    background-color: #000;
}

[oceane751]

Hey!

Merci !
regarde :: http://vaurel.free.fr/shoes/test_caroussel2.html

¨Par contre je vais devoir jouer avec les width pour que les indicators soient bien alignés avec les images du caroussel!

[kakashi99]

bah c'est pas mal tout ça !