Boutique: problème de couleur de l'état AJAX + déplacement de l'état AJAX

[Ishtar]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://risenfromthedead.forum-canada.com/#top

Description du problème

Bonjour!

En suivant le tuto pour créer une boutique, j'ai réussi à obtenir le résultat souhaité. Sauf pour une chose. Il y a un truc appelé "AJAX" dans le CSS et un autre appelé "état AJAX" à même le code pour créer la boutique. En bidouillant mon CSS, le truc état AJAX s'est déplacé vers la gauche. Idéalement, j'aimerais le changer de couleur et le ramener vers la droite (comme l'indique la flèche rouge sur le screen) et je n'y arrive pas.

S'il y a quelqu'un qui peut m'aider à corriger ça..! ^^


CSS de la boutique:

Code:

/* BOUTIQUE - SYSTÈME DE POINTS POUR DÉBLOQUER POUVOIRS &/OU CAPACITÉS */
.ma_boutique{
position:relative;
background:#212121;
color: #8C8C89;
border-radius:5px;
text-align: center;
font-size: 12px;
width: 750px;}

.ma_boutique *{
color:#212121;
margin:0px;
padding:0px;}

.ma_boutique [data-var][data-sans_contenu]:before{
content:attr(data-var)}

.ma_boutique .titre_article_template_articles[data-var][data-sans_contenu]:before{
content:'(x' attr(data-var) ')'}

.ma_boutique .titre_article_template_articles[data-var="0"]{
visibility:hidden;}


/* NOM DE LA BOUTIQUE */
.ma_boutique h2{
font-size: 35px !important;
color: #8C8C89;
padding: 10px;
font-family: 'Yellowtail', cursive;}

.ma_boutique h3{
padding:0.3em;
color:#8C8C89;}

.ma_boutique h4{
font-size:13px;
color:#212121;
border-bottom:1px solid #212121;}

.ma_boutique h5{
font-size: 14px;
color: #8C8C89 !important;}

.ma_boutique h6{
border-bottom:1px solid #212121;
padding:0.3em;
color:#212121;}


.ma_boutique .AJAX_erreur,.ma_boutique .AJAX_en_cours,.ma_boutique .AJAX_termine{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
border: 1px outset #212121;
color: #8C8C89 !important;}

.ma_boutique .AJAX_erreur{
background:#FF0000;
color: #8C8C89 !important;}

.ma_boutique .AJAX_en_cours{
background:#EAB956;
color: #8C8C89 !important;}

.ma_boutique .AJAX_termine{
background:#25E100;
color: #8C8C89 !important;}

.ma_boutique .articles{
border-bottom: 2px solid #8C8C89;
max-height: 15000px;
overflow:auto;}

/* BLOC CONTENANT LES ITEMS ET LEURS DESCRIPTIONS */
.ma_boutique .articles>div{
overflow: 130px;
float:left;
text-align:center;
box-sizing:border-box;
border:2px #212121 solid;
border-radius:5px;
background:#8C8C89;
padding:2px;
width:50%;
height: 350px}

.ma_boutique .articles>div>button{
display:block;
margin:auto
padding: 2px;}

.ma_boutique .articles>div .proprietes{
height: 130px;
overflow: auto;
text-align: justify !important;
font-size: 11px !important;
padding: 10px !important;}

.ma_boutique .articles>div .proprietes>p[title]:before{
content:attr(title)': ';
font-weight: bold !important;}

.ma_boutique .articles>div .proprietes>p:empty{
visibility:hidden}

.ma_boutique .img_article{
max-height: 100px;
max-width: 100px}

.ma_boutique .alerte{
background:#FFF8F7;
padding:2px;
border-radius:3px;
border:solid 1px #FF0000;}

.ma_boutique .alerte,.ma_boutique .alerte *{
color:red !important}

.ma_boutique .bouton{
cursor:pointer;
display:inline-block;
width:1.1em;
height:1.1em;
font-size:1.1em;
line-height:1em;
text-align:center;
color:#FFFFFF;
border-radius:50%;
border:1px solid #DDDDDD}

.ma_boutique .bouton_moins,.ma_boutique .bouton_plus{
background:#F8F8F8;
color:#212121;
border-radius:15% !important}

.ma_boutique .bouton_sup{
background:#C50000}

.ma_boutique .barre_options_panier{
height:24px;}

.ma_boutique .ordre_panier,.ma_boutique .sup_panier {
height: 25px;
font-size: 12px;
float:right;
padding: 5px !important;
cursor:pointer;
background:#8C8C89;
border:1px solid #212121;
border-radius:3px}

.ma_boutique .ordre_panier:hover,.ma_boutique .sup_panier:hover{
height: 25px;
font-size: 12px;
float:right;
padding: 5px !important;
cursor:pointer;
background: #212121;
border:1px solid #8C8C89;
color: #8C8C89;
border-radius:3px}

/* APPARENCE BOUTON ACHETER */
.clic_achat_art {
height: 25px;
font-size: 12px;
float:center;
padding: 5px !important;
cursor:pointer;
background: #212121;
border:1px solid #8C8C89;
color: #8C8C89;
border-radius:3px}

.clic_achat_art:hover {
height: 25px;
font-size: 12px;
float:center;
padding: 5px !important;
cursor:pointer;
background:#8C8C89;
border:1px solid #212121;
color: #212121;
border-radius:3px}

.ma_boutique input.champ_qte_art{
max-width:4em}

.ma_boutique .ellipsis{
white-space:pre;
overflow:hidden;
text-overflow:ellipsis;}

.ma_boutique .erreursCont,.ma_boutique .panierCont{
background:#8C8C89;
text-align:left;
overflow:auto;
min-height:32px;
max-height:96px;
margin:5px;
padding:5px;
border-radius:5px}

.ma_boutique .panier{
border-spacing:0px}

.ma_boutique .panier tr>td:first-child{
padding-right:1em}

.ma_boutique .panier tr>td:last-child{
padding-left:1em;
width:100%}

.ma_boutique .panier tr>td{
vertical-align:middle}

.ma_boutique .panier tr:hover{
background:#8C8C89}

.ma_boutique .achat_panier{
border: 1px solid #212121;
border-radius: 3px;
padding: 5px;
font-size: 12px;}

.ma_boutique {
padding-right:5px;
float:right
color: #8C8C89;}

.ma_boutique .infoCont{
padding-left:5px;
float:left;
color: #8C8C89 !important;}

.var_nom_points, .var_points, .var_cout_total, .couleur_points_dispo{
color: #8C8C89 !important;}

CODE DE LA BOUTIQUE:

Code:

<div id="conteneur_boutique" class="ma_boutique">
<form action="#aucune_pour_le_moment">
<h2>BOUTIQUE DE RFTD</h2><div class="articles">
<!-- DEBUT TEMPLATE ARTICLE --><div data-id="article-%_{ID_ARTICLE}">
<h4 class="titre_article ellipsis" title="%_{NOM}">%_{NOM}</h4><h6 class="var_quantite_art titre_article_template_articles" data-sans_contenu="" data-id_article="%_{ID_ARTICLE}" style="border:none"></h6>
<img src="%_{IMAGE}" class="img_article" alt="image de %_{NOM}" title="%_{NOM}" /><div class="proprietes">
<p title="COÛT">%_{PRIX}</p>
<p title="DESCRIPTIF">%_{DESCRIPTION}</p>
</div><br>
<button class="clic_achat_art" data-id_article="%_{ID_ARTICLE}" type="button">ACHETER</button><br>
</div>
<!-- FIN TEMPLATE ARTICLE -->
</div><div><div class='infoCont'><p><span class="var_points"></span> <span class="var_nom_points"></span> <span class="couleur_points_dispo">disponibles.</span></p></div><div class='progressionCont'><em>Etat AJAX:</em><em class="progression"></em></div>
</div>
<h5 style="clear:both">Panier</h5><div class="barre_options_panier">
<button type="button" class="sup_panier" title="Supprimer le panier">VIDER LE PANIER</button>
<button type="button" class="ordre_panier" title="change l'ordre d'affichage du panier"><img alt="ordre du panier" src="http://codexo.org/img/ordre_panier.png"></button>
</div><div class="panierCont" style="clear:both" title="Cette zone est votre panier">
<table class="panier">
<!-- DEBUT TEMPLATE ARTICLE PANIER -->
<tr title="%_{NOM}"><td><span class="bouton bouton_sup sup_art" data-id_article="%_{ID_ARTICLE}" title="Supprimer cette ligne">?</span></td><td><span class="bouton bouton_moins clic_retrait_art" data-id_article="%_{ID_ARTICLE}" title="Retirer une unité de %_{NOM}">-</span></td><td><input class="champ_qte_art" data-id_article="%_{ID_ARTICLE}" type="text" value="%_{QUANTITE}"></td><td><span class="bouton bouton_plus clic_achat_art" data-id_article="%_{ID_ARTICLE}" title="Ajouter une unité de %_{NOM}">+</span></td><td><span class="ellipsis" style="display:inline-block;width:200px">%_{NOM}</span></td></tr>
<!-- FIN TEMPLATE ARTICLE PANIER -->
</table>
</div>
<h5>Coût total: <em class="var_cout_total"></em></h5>
<h5>Erreurs</h5><div class="erreursCont" title="En cas d'erreur(s), cette zone sera enrichie d'informations concernant l'/les erreur(s)."><div class="erreurs"></div>
</div><br>
<input class="achat_panier" type="submit" value="TERMINER LA TRANSACTION"><br><br>
</form>
</div>
 
 
 
 
 
<!-- DÉBUT NOMS DES ITEMS, PRIX ET DESCRIPTIONS --> 
<script type="text/javascript" src="http://fa.codexo.org/boutique_v1.js"></script>
<script type="text/javascript">
var mes_articles={

"HUMAIN STADE #1":{"prix": 0,"image":"http://codexo.org/img/chopin_ex.jpg","description":"L'humain ne peut pas résister au contrôle du vampire. La personne se sent engourdie et se demande ce qui lui arrive. Elle est dans l'incapacité totale de se rappeller ce qui s'est passé. La personne est devenue amnésique et ne comprend pas trop ce qui lui arrive."},

"MÉTAMORPHE STADE #1":{"prix": 0,"image":"http://codexo.org/img/chopin_ex.jpg","description":"DESCRIPTION ICI."},
 
"VAMPIRE STADE #1":{"prix": 0,"image":"http://codexo.org/img/chopin_ex.jpg","description":"DESCRIPTION ICI."},
 
 
 
"HUMAIN STADE #2":{"prix": 1000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},

"MÉTAMORPHE STADE #2":{"prix": 1000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
 
"VAMPIRE STADE #2":{"prix": 1000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
 
 
 
"HUMAIN STADE #3":{"prix": 2000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},

"MÉTAMORPHE STADE #3":{"prix": 2000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},

"VAMPIRE STADE #3":{"prix": 2000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
 
 
 
"HUMAIN STADE #4":{"prix": 3000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
 
"MÉTAMORPHE STADE #4":{"prix": 3000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
 
"VAMPIRE STADE #4":{"prix": 3000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
 
 
 
"HUMAIN STADE #5":{"prix": 5000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},

"MÉTAMORPHE STADE #5":{"prix": 5000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
 
"VAMPIRE STADE #5":{"prix": 5000,"image":"http://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},

 
   
 
"article "3", Dvorak":{"prix": 450,"image":"http://codexo.org/img/dvorak_ex.jpg","description":"Interprétation par Philippe Herreweghe et le Royal Flemish Philharmonic"}
};

 
 
 
 
var ma_boutique=new boutique(mes_articles,{"nom_points":"Points","admin":"Mackenzie Wright"}); 
ma_boutique.demarrer();
</script>
<!-- FIN NOMS DES ITEMS, PRIX ET DESCRIPTIONS --> 

Je crois n'avoir rien oublié, mais si c'est le cas, il suffit de le demander!
Merci d'avance! ^^

[Ishtar]

up ^^

[Ishtar]

up ^^

[Ishtar]

personne? ^^

[Ishtar]

up

[Ishtar]

up

[no_way]

Bonsoir, pourriez-vous fournir l'adresse de votre boutique afin qu'il soit possible de voir comment régler votre souci ?

[Ishtar]

Bonsoir,

Voici le lien: http://risenfromthedead.forum-canada.com/h3-boutique

Merci d'avance ^^

[no_way]

Très bien, ajoutez le code CSS suivant:

Code:

.progressionCont{
float:right;
}
.progressionCont>em{
color:#8C8C89 !important;
}


[Ishtar]

C'est fait. Il est bien revenu sur la droite, comme prévu, mais la couleur ne change toujours pas. J'avais pensé ajouter le !important, mais il est déjà présent...

[no_way]

Je vous laisse reprendre le code, je l'ai édité

[Ishtar]

Génial, ça fonctionne!
Merci beaucoup pour le coup de pouce! ^^

[no_way]

Je vous en prie, bonne continuation