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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Ishtar le Mer 4 Mai 2016 - 7:39

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! ^^


Dernière édition par Ishtar le Mer 18 Mai 2016 - 2:36, édité 7 fois (Raison : modification du CSS)

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par Ishtar le Ven 6 Mai 2016 - 6:05

up ^^

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par Ishtar le Dim 8 Mai 2016 - 22:09

up ^^

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par Ishtar le Mer 11 Mai 2016 - 6:15

personne? ^^

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par Ishtar le Ven 13 Mai 2016 - 20:53

up

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par Ishtar le Mar 17 Mai 2016 - 0:44

up Wink

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par no_way le Mar 17 Mai 2016 - 23:18

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



no_way
Aidactif
Aidactif

Messages : 1782
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

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

Message par Ishtar le Mer 18 Mai 2016 - 2:11

Bonsoir,

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

Merci d'avance ^^

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par no_way le Mer 18 Mai 2016 - 2:21

Très bien, ajoutez le code CSS suivant:
Code:
.progressionCont{
float:right;
}
.progressionCont>em{
color:#8C8C89 !important;
}



no_way
Aidactif
Aidactif

Messages : 1782
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

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

Message par Ishtar le Mer 18 Mai 2016 - 2:27

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... scratch

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par no_way le Mer 18 Mai 2016 - 2:32

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



no_way
Aidactif
Aidactif

Messages : 1782
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

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

Message par Ishtar le Mer 18 Mai 2016 - 2:36

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

Ishtar
****

Féminin
Messages : 242
Inscrit(e) le : 15/08/2007

http://risenfromthedead.forum-canada.com/#top
Ishtar a été remercié(e) par l'auteur de ce sujet.

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

Message par no_way le Mer 18 Mai 2016 - 2:37

Je vous en prie, bonne continuation Wink



no_way
Aidactif
Aidactif

Messages : 1782
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum