Boutique - titre de l'item tronqué et non centré

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

Résolu Boutique - titre de l'item tronqué et non centré

Message par Ishtar le Mar 4 Juil 2017 - 6:49

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://dontfeartheripper.forum-canada.com/

Description du problème

Bonjour!

J'ai un petit soucis avec le nom des items de la boutique mise en place sur mon forum. Comme l'image le montre, le nom des items est complètement sur la droite et tronqué alors qu'il devrait être centré et complet.

Lien vers la boutique ici.

Et voici le CSS et le HTML concerné:

CSS:
Code:
/* BOUTIQUE - UTILISÉE AVEC LE SYSTÈME DE POINTS DU FORUM */
.ma_boutique{
position:relative;
background: #161616;
color: #898A86 !important;
border-radius:5px;
text-align: center;
font-size: 12px;
width: 750px;}

.ma_boutique *{
color: #898A86;
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) ')'
visibility:hidden !important;}

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


/* NOM DE LA BOUTIQUE */
.ma_boutique h2{
font-size: 40pt !important;
font-weight: normal !important;
color: #898A86;
padding: 10px;
font-family: 'Aguafina Script', cursive;
text-shadow: 2px 2px 1px #000000 !important;}

.ma_boutique h3{
padding: 0.3em;
color: #898A86;}

.ma_boutique h4{
font-weight: bold !important;
font-size: 15px;
color: #898A86;
border-bottom: 1px solid #161616;
padding-top: 5px;
padding-bottom: 5px;
text-align: center !important;}

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

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


.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 #898A86;
color: #898A86 !important;}

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

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

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

.ma_boutique .articles{
border-bottom: 2px solid #060606;
max-height: 3500px;
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 #191919 solid;
border-radius: 5px;
background: #060606;
padding: 2px;
width: 50%;
height: 400px}

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

/* DESCRIPTION DES ITEMS + OVERFLOW */
.ma_boutique .articles>div .proprietes{
height: 130px;
overflow: auto;
text-align: justify !important;
font-size: 12px !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: #898A86;
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;
color: #898A86;
font-size: 12px;
float:right;
padding: 5px !important;
cursor:pointer;
background: #060606;
border:1px solid #898A86;
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: #898A86;
border:1px solid #060606;
color: #060606;
border-radius:3px}

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

.clic_achat_art:hover {
height: 25px;
font-size: 12px;
float:center;
padding: 5px !important;
cursor:pointer;
background: #060606;
border:1px solid #898A86;
color: #898A86;
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: #060606;
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: #060606}

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

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

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

.var_nom_points, .var_points, .var_cout_total, .couleur_points_dispo{
color: #898A86 !important;}

.progressionCont{
float:right;}

.progressionCont>em{
color: #898A86 !important;}

HTML de la boutique:
Code:
<div style="background-color: #060606; padding: 35px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
            
   <center>
            <br /><br />         
      <div style="font-family: 'Aguafina Script', cursive; font-size: 60pt !important; letter-spacing: 2px; text-align: center !important; text-transform: none;
  line-height: 23px; color: #898A86; text-shadow: 2px 2px 1px #000000 !important;; padding-bottom: 10px;">
               Bienvenue!     
      </div><br /><br />     
      <div style="font-family: Verdana; font-size: 13px; letter-spacing: 2px; text-align: center !important; text-transform: none;
  line-height: 23px; color: #898A86; text-shadow: 1px 1px 1px #COULEUR; padding-bottom: 10px;">
                   Ici, vous pourrez acheter des items... si votre nombre de kills vous le permet! Le choix là, à vous de faire le bon! Et surtout de l'utiliser à bon escient! <img longdesc="2" alt="" src="/users/1616/39/66/96/smiles/3607656696.gif" />          <br /><br />            Notez que le staff se garde le droit d'intervenir afin d'éviter que les choses ne dérapent. Nous garderons également une trace de qui achète quoi et l'utilise quand, histoire que personne ne fasse d'abus. Après tout, la modération a bien meilleur goût! <img longdesc="2" alt="" src="/users/1616/39/66/96/smiles/3607656696.gif" />              <br /><br />                  Pour un complément d'informations, nous vous invitons également à lire le sujet dédié à la <a href="http://dontfeartheripper.forum-canada.com/t249-la-boutique#4346">      <span style="font-weight: bold !important;">boutique</span>      </a>. <img longdesc="2" alt="" src="/users/1616/39/66/96/smiles/3607656696.gif" />              <br /><br />                  Sachez que les prix affichés peuvent être amenés à changer en cours de route. Et que des items pourront être ajoutés ou retirés de la liste si nécessaire!              <br /><br />                  Bon shopping!     
      </div>
                  <br /><br /><br />           
      <div class="ma_boutique" id="conteneur_boutique">
                  
         <form action="#aucune_pour_le_moment">
                     
            <h2>
                     Boutique de Don't fear the Ripper     
            </h2>
                     
            <div class="articles">
                        
               <!--        DEBUT TEMPLATE ARTICLE        -->     
               <div data-id="article-%_{ID_ARTICLE}">
                           
                  <h4 title="%_{NOM}" class="titre_article ellipsis">
                           %_{NOM}     
                  </h4>
                           
                  <h6 style="border:none" data-id_article="%_{ID_ARTICLE}" data-sans_contenu="" class="var_quantite_art titre_article_template_articles">
                              
                  </h6><img title="%_{NOM}" alt="image de %_{NOM}" class="img_article" src="%_{IMAGE}" />     
                  <div class="proprietes">
                              
                     <p title="COÛT">
                              %_{PRIX}     
                     </p>
                              
                     <p title="DESCRIPTIF">
                              %_{DESCRIPTION}     
                     </p>
                              
                  </div><br />     
                  <button type="button" data-id_article="%_{ID_ARTICLE}" class="clic_achat_art">
                           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 title="Supprimer le panier" class="sup_panier" type="button">
                        VIDER LE PANIER     
               </button>
                        
               <button title="change l'ordre d'affichage du panier" class="ordre_panier" type="button">
                        <img src="https://img4.hostingpics.net/pics/418149ordrepanier.png" alt="ordre du panier" />     
               </button>
                        
            </div>
                     
            <div title="Cette zone est votre panier" style="clear:both" class="panierCont">
                        
               <table class="panier">
                           
                  <!--        DEBUT TEMPLATE ARTICLE PANIER        -->     
                  <tbody>
                              
                     <tr title="%_{NOM}">
                                 
                        <td>
                                 <span title="Supprimer cette ligne" data-id_article="%_{ID_ARTICLE}" class="bouton bouton_sup sup_art">?</span>     
                        </td>
                                 
                        <td>
                                 <span title="Retirer une unité de %_{NOM}" data-id_article="%_{ID_ARTICLE}" class="bouton bouton_moins clic_retrait_art">-</span>     
                        </td>
                                 
                        <td>
                                 <input value="%_{QUANTITE}" type="text" data-id_article="%_{ID_ARTICLE}" class="champ_qte_art" />     
                        </td>
                                 
                        <td>
                                 <span title="Ajouter une unité de %_{NOM}" data-id_article="%_{ID_ARTICLE}" class="bouton bouton_plus clic_achat_art">+</span>     
                        </td>
                                 
                        <td>
                                 <span style="display:inline-block;width:200px" class="ellipsis">%_{NOM}</span>     
                        </td>
                                 
                     </tr>
                              
                     <!--        FIN TEMPLATE ARTICLE PANIER        -->     
                  </tbody>
                           
               </table>
                        
            </div>
                     
            <h5>
                     Coût total: <em class="var_cout_total"></em>     
            </h5>
                     
            <h5>
                     Erreurs     
            </h5>
                     
            <div title="En cas d'erreur(s), cette zone sera enrichie d'informations concernant l'/les erreur(s)." class="erreursCont">
                        
               <div class="erreurs">
                           
               </div>
                        
            </div><br /><input value="TERMINER LA TRANSACTION" type="submit" class="achat_panier" /><br /><br />     
         </form>
                  
      </div>
                               
      <!--        DÉBUT NOMS DES ITEMS, PRIX ET DESCRIPTIONS        -->  <script src="http://fa.codexo.org/boutique_v2.js" type="text/javascript"></script><script type="text/javascript">
var mes_articles={

         
         
         
"LA PROCHAINE VICTIME":{"prix": 1000,"image":"https://img4.hostingpics.net/pics/130404PROCHAINEVICTIME.png","description":"Parce que Jack est toujours à la recherche de sa prochaine victime (<em>un personnage non jouable (ou pnj)</em>), avec cette option, vous pouvez en choisir un qui est en lien avec vous. Est-ce qu'il s'agit de votre mère, de votre frère, un collègue de travail? Votre voisin? Quel impact cette mort aura sur vous, sur votre vie? Est-ce que c'est un soulagement de le voir mourir ou bien est-ce la fin du monde pour vous? Expliquez-nous en quelques phrases le lien désiré et l'impact sur votre personnage afin que le prochain meurtre puisse vous impliquer."},



"LANCER DE DÉ(S)":{"prix": 2000,"image":"https://img4.hostingpics.net/pics/862198LANCERDS.png","description":"Déterminer les options des dés, c'est à la portée de tous, on est bien d'accord. Mais qu'est-ce que ça donnerait si vous aviez l'opportunité d'en déterminer les options durant un sujet de groupe organisé par le staff ou par un autre joueur? Vous seriez donc la seule personne a pouvoir «décider» de la suite des événements... avec une petite part de hasard, bien sûr! Il va de soi que vous pouvez utiliser les deux dés ou ne déterminer les options que d'un seul, c'est laissé à votre discrétion."},
 


"MANIPULATION DE JOUEUR":{"prix": 3000,"image":"https://img4.hostingpics.net/pics/849192MANIPULERJOUEUR.png","description":"Qui n'a jamais eu envie de prendre le contrôle d'un personnage et d'en faire sa marionnette l'espace d'un instant? Histoire que ça soit plus concret pour vous, voici un exemple: <em>Kaleb et Mackenzie ont une conversation un peu houleuse et vous achetez l'option de manipulation. Vous pourriez obliger Kaleb a avouer qu'il a eu une aventure durant leur «séparation», juste histoire de voir comment Mackenzie régirait. Parce qu'évidemment, sans obligation de le lui avouer, Kaleb aurait tout intérêt à garder cette histoire pour lui! Parce qu'avouons-le, il serait bête de se mettre le pied dans les plats!</em>"},
 
 
 
"QUI JACK VA-T-IL EMBÊTER?":{"prix": 4500,"image":"https://img4.hostingpics.net/pics/695486EMBTERAVECJACK.png","description":"De temps à autres, il arrive que notre copain Jack décide d'aller embêter quelqu'un dans un sujet. Que ce soit pour l'obliger à faire quelque chose en lançant les dés, lui donner une situation que ladite personne devra intégrer dans sa réponse... Que diriez-vous si c'était à vous que revenaient ces décisions? A vous de choisir qui Jack va embêter et comment il va s'y prendre. Sky is the limit! ... enfin, tant que personne n'en meurt, hein!"},



"SUJET DE GROUPE":{"prix": 7000,"image":"https://img4.hostingpics.net/pics/766116SUJETGROUPE.png","description":"Parce qu'ici, on aime les sujets de groupe (ou de troupeau, comme on aime parfois les nommer). Parce qu'on est un peu fous, on est prêts à vous laisser acheter le droit d'en inventer un et de le proposer aux membres. Notez cependant que le staff se réserve le droit de remanier légèrement votre «mise en situation» afin que le tout reste cohérent avec le contexte... et seulement si c'est nécessaire!"},
 

 
"CONTRÔLER JACK":{"prix": 10000,"image":"https://img4.hostingpics.net/pics/550861CONTRLERJACK.png","description":"A la différence du contrôle des dés, ici vous pourrez contrôler Jack tout au long d'un sujet que vous aurez choisi. Si le sujet dure sur 10 pages, bah... vous contrôlerez Jack durant les 10 pages que le sujet durera! Voilà qui explique le prix si élevé de cet item. Vous pouvez faire tout ce qui vous plaît, du moment que personne ne meurt sans la permission du joueur et du staff. Notez qu'ici également, le staff se réserve le droit de remanier votre mise en situation s'il le juge nécessaire."},
 
   
 
 
 
 
 
};

 
 
 
 
var ma_boutique=new boutique(mes_articles,{"nom_points":"■ Kills","admin":"Mackenzie Wright"}); 
ma_boutique.demarrer();
</script>   
      <!--      FIN NOMS DES ITEMS, PRIX ET DESCRIPTIONS      -->                         
      <div style="font-family: Verdana; font-size: 9px; letter-spacing: 2px; text-align: center !important; text-transform: none;
  line-height: 23px; color: #898A86; text-shadow: 1px 1px 1px #COULEUR; padding-bottom: 10px;">
                 crédits icones: Athéna alias Mackenzie Wright ^^     
      </div>
                       
   </center>
</div>

Je crois n'avoir rien oublié, mais si c'est le cas, il suffit de me le dire pour que je corrige ça.

Et sinon, merci d'avance à quiconque prendra le temps de me donner un coup de pouce! Wink
avatar

Ishtar
****

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

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

Résolu Re: Boutique - titre de l'item tronqué et non centré

Message par Chacha le Lun 10 Juil 2017 - 9:32

Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 54830
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutique - titre de l'item tronqué et non centré

Message par Ishtar le Lun 10 Juil 2017 - 20:18

Oups! Je croyais que ça ne serait que demain. ^^
Donc oui, sujet toujours d'actualité.

Merci! ^^
avatar

Ishtar
****

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

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

Résolu Re: Boutique - titre de l'item tronqué et non centré

Message par Neptunia le Lun 10 Juil 2017 - 20:44

Bonjour ^^


Supprimez la ligne 202 de votre CSS

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

Neptunia
Membre actif

Féminin
Messages : 12418
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutique - titre de l'item tronqué et non centré

Message par Ishtar le Lun 10 Juil 2017 - 22:16

Bonjour!

Ça fonctionne, c'est génial! Merci beaucoup pour le coup de pouce! ^^
avatar

Ishtar
****

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

http://dontfeartheripper.forum-canada.com/
Ishtar 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