AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    PA gris/rose - petit problème de police/taille de texte/alignement

    P-Summers
    P-Summers
    FémininAge : 20Messages : 54

    le Sam 13 Juil 2019 - 17:49

    Bonjour bonjour !

    Alors alors, j'ai implémenté ce LS génial sur mon forum, puis j'ai essayé d'éditer la police et taille du texte principal mais...

    http://alternative-eleven.forumactif.com/

    Voilà ce qui se passe !

    En gros, le texte est trop grand. Je viens de réussir à changer le texte d'un sans-serif à un Roboto Condensed mais aucun moyen de toucher à la taille de la police.

    Voilà le code de la PA

    Code:
    <meta charset="UTF-8" />  <title>PA grise/rose + scrollbar personnalisée.</title>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alegreya|Euphoria+Script|Roboto+Condensed&display=swap" />  <style>

          body {
            background: #e4e1e2;
          }

          #pa h1, #pa h2, #pa h3, #pa h4, #pa h5, #pa h6, #pa p {
            margin: 0; padding: 0; font-weight: normal;
          }

          #pa {
            width: 800px;
            min-height: 400px;
            border-radius: 10px;
            background: #fff;
            margin: 75px auto 20px;
            position: relative;
            padding-top: 50px;
            font-family: 'Roboto Condensed'; !important
            font-size: 9px; !important
            letter-spacing: 1px;
            color: black;
          }

          #pa a {
            color: darkgray;
            text-decoration: none;
          }

          #pa a, #pa h2, .news p {
            -webkit-transition: all .2s ease;
            -moz-transition: all .2s ease;
            -ms-transition: all .2s ease;
            -o-transition: all .2s ease;
            transition: all .2s ease;
          }

          #pa a:hover {
            color: #d74e77;
          }
         
          #pa h1 {
            width: 347px;
            height: 70px;
            position: absolute;
            background: url("https://redcdn.net/hpimg15/pics/520024nuage.png") no-repeat;
            top: -70px;
            left: 50%;
            margin-left: -173.5px;
            text-align: center;
            padding-top: 40px;
            font-size: 40px;
            color: #DA3B73;
            display: block;
          padding-top: 15px;
          height: 60px;
          margin: 0px;
          font-family: "Euphoria Script", cursive;
          text-shadow: 1px 1px 3px #E198BA;
          font-size: 60px;
          letter-spacing: 1px;
          }

          ul#ticker01, ul#concours, ul.groupes, ul#staff
          {
            list-style-type: none;
            margin: 0;
            padding: 0;
          }

          #pa h2 img {
            position: absolute; top:0;
          }

          #pa table td {
            min-height: 50px;
            border-radius: 10px;
            position: relative;
            padding-top: 25px;
          }

          #pa table td.withbg {
            background: #e4e1e2;
          }

          #pa h2 {
            height: 34px;
            position: absolute;
            top: -12.5px;
            z-index: 3;
            font-size: 34px;
            color: #E49231;
            font-family: 'Euphoria Script', cursive;
          }

          #pa h2:hover {
            color: rgba(209,42,97,1);
          }

    /* CONCEPT */

          .concept {
            height: 192px; max-height: 192px;
            overflow-y: scroll;
            padding: 1px;
          }

          .concept p {
            margin-bottom: 20px !important;
            padding-right: 20px !important;
          }

          .concept p:last-child {
            margin-bottom: 0px !important;
          }

    /* GROUPES */

          .groupes {
            height: 60px; max-height: 60px;
            text-align: center;
          }

          .groupes li {
            display: inline-block;
            margin: 0 10px;
          }

    /* NEWS */

          .news {
            height: 87px; max-height: 87px;
            overflow-y: scroll;
          }

          .news strong {
            color: #d74e77;
            font-family: sans-serif;
            text-transform: uppercase;
            font-weight: normal;
          }

          .news p {
            border-bottom: 1px solid lightgray;
            padding: 2px 0 !important; margin: 2px 0 !important;
          }

          .news p:hover {
            border-bottom: 1px solid lightgray;
            padding: 2px 0 2px 20px !important; margin: 2px 0 !important;
          }

    /* CONCOURS */
         
          ul#concours {
            width: 280px;
            height: 114px; max-height: 114px;
            margin: 0px auto 0;
            text-align: center;
          }
         
          ul#concours li {
            width: 84px;
            margin: 0 5px;
            display: inline-block;
            position: relative;
            z-index: 4;
          }

          ul#concours li span {
            display: none;
            width: 150px;
            padding: 10px;
            position: absolute;
            bottom: 60px;  right: 50%; margin-right: -75px;
            background: #fff;
            color: #fff;
            z-index: 5;
            border-radius: 10px;
            border-bottom: 1px solid #d74e77;
          }

          ul#concours li:hover span {
            display: block;
          }

          ul#concours li span img {
            max-width: 150px;
            height: auto;
          }

          .fleche {
            width: 26px;
            height: 12px;
            background: url("https://i.servimg.com/u/f39/19/07/10/81/fleche11.png");
            position: absolute;
            bottom: -12px;
            left: 50%;
            margin-left: -13px;
          }

    /* STAFF */

          #staff img, ul#concours li img.mini {
            -webkit-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -moz-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -ms-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -o-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
          }

          #staff li {
            display: inline-block;
            width: 80px; max-width: 80px;
          }

          #staff li:hover {
            cursor: help;
          }

          .staff p {
            padding: 10px 0 10px !important;
          }

          .staff{
            text-align: center;
          }

          .staff .pseudo
          {
            display: inline-block;
            color: #d74e77;
          }

    /* PARTENAIRES */
         
          td.partenaires {
            padding-top: 15px !important;
          }

          .tickercontainer { /* the outer div with the black border */
            width: 750px;
            height: 31px;
            margin: 0 auto;
            padding: 0;
            overflow: hidden;
            position: relative;
            z-index: 2;
          }
          .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
            position: relative;
            left: 0px;
            top: 0px;
            width: 750px;
            overflow: hidden;
          }
          ul.newsticker { /* that's your list */
            position: relative;
            left: 750px;
          }
          ul.newsticker li {
            float: left; /* important: display inline gives incorrect results when you check for elem's width */
            width: 88px;
            margin: 0 2px;
            padding: 0;
          }

    /* CREDITS */

          #credits {
            position: absolute;
            padding: 0px 10px;
            bottom: -20px;
            right: 0px;
            height: 20px;
            line-height: 20px;
            font-size: 8px;
            color: gray;
            text-transform: uppercase;
            text-shadow: 1px 1px 0px #ffffff;
          }
         
    /* SCROLLBAR */

          ::-webkit-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-webkit-scrollbar-thumb{background:rgba(225,152,186,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-webkit-scrollbar-corner{background:none;}

          ::-moz-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-moz-scrollbar-thumb{background:rgba(225,152,186,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-moz-scrollbar-corner{background:none;}

          ::-ms-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-ms-scrollbar-thumb{background:rgba(225,152,186,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-ms-scrollbar-corner{background:none;}

          ::-o-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-o-scrollbar-thumb{background:rgba(225,152,186,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-o-scrollbar-corner{background:none;}

          ::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-scrollbar-thumb{background:rgba(225,152,186,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-scrollbar-corner{background:none;}
      </style>   
    <div id="pa">
                                
       <h1>
                    Shining Island         
       </h1>
                                
       <table style="width: 800px;" id="contenu-general" cellpadding="10px" cellspacing="15px">
                            <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
          <tr style="">
                                            
             <td style="width: 300px;" class="withbg" valign="top" rowspan="2">
                                                 
                <h2>
                             Le concept         
                </h2>
                                                 
                <div styme="font-family: 'Roboto Condensed', sans-serif;" class="concept">
                                                        
                   <p>
                                Bien le bonjour         
                   </p>
                                                        
                   <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, itaque, cum veniam vel sed dicta <a href="">quaerat modi</a> ab soluta molestias voluptas ipsam sit omnis. Nemo, natus facilis suscipit sequi ratione. Lorem ipsum dolor sit amet, consectetur adipisicing         
                   </p>
                                                        
                   <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, ab, voluptates, porro totam omnis eos hic mollitia beatae quia dolores corrupti delectus sequi recusandae molestiae sit. Magni saepe repellendus voluptas.         
                   </p>
                                                    
                </div>
                                               
             </td>
                                            
             <td style="width: 450px;" valign="top">
                                                 
                <ul class="groupes">
                                                        
                   <li>
                                <a style="color: red;" href="">Les Crocs du Carnage</a>         
                   </li>
                                                        
                   <li>
                                <a style="color: green;" href="">La Harde</a>         
                   </li>
                                                        
                   <li>
                                <a style="color: orange;" href="">La Chimérique</a>         
                   </li>
                                                        
                   <li>
                                <a style="color: blue;" href="">De Haut Vol</a>         
                   </li>
                                                        
                   <li>
                                <a style="color: magenta;" href="">Les PNJs</a>         
                   </li>
                                                    
                </ul>
                                               
             </td>
                                        
          </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody>        </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
          <tr style="">
                                            
             <!--            <td>lol</td> on supprime cette ligne, car rowspan            -->                     
             <td class="withbg" valign="top">
                                                 
                <h2>
                             Les nouveautés         
                </h2>
                                                 
                <div class="news">
                                                        
                   <p>
                                <strong>News 1 :</strong> <a href="">Les fourmis ont des pattes!</a>         
                   </p>
                                                        
                   <p>
                                <strong>News 2 :</strong> Quoi, une news sans lien ?         
                   </p>
                                                        
                   <p>
                                <strong>News 3 :</strong> <a href="">Pas touche la mouche</a>         
                   </p>
                                                        
                   <p>
                                <strong>News 4 :</strong> <a href="">T'as pas pris ta douche</a>         
                   </p>
                                                        
                   <p>
                                <strong>News 5 :</strong> The style for news         
                   </p>
                                                        
                   <p>
                                <strong>News 6 :</strong> The style for news         
                   </p>
                                                        
                   <p>
                                <strong>News 7 :</strong> The style for news         
                   </p>
                                                        
                   <p>
                                <strong>News 8 :</strong> The style for news         
                   </p>
                                                    
                </div>
                                               
             </td>
                                        
          </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody>        </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
          <tr style="">
                                            
             <td class="withbg" valign="top">
                                                 
                <h2>
                             Prédéfinis         
                </h2>
                                                 
                <ul id="concours">
                                                        
                   <li>
                                                    <img class="mini" alt="AOTM" src="https://i.servimg.com/u/f39/19/07/10/81/staff11.png" />         
                      <!--            miniature concours 84*37px            -->                             
                      <div class="titre-concours">
                                   AOTM         
                      </div>
                                         
                      <!--            titre concours            -->                    <span>                        <img alt="" src="https://7img.net/users/2915/57/91/98/avatars/17369-57.jpg" />         
                         <!--            infobulle            -->                        </span>         
                      <div style="" class="fleche">
                                          
                      </div><span>         
                         <!--            tite fleche            -->                    </span>                           
                   </li>
                                                        
                   <li>
                                                    <img class="mini" alt="AOTM" src="https://i.servimg.com/u/f39/19/07/10/81/staff11.png" />         
                      <!--            miniature concours 84*37px            -->                             
                      <div class="titre-concours">
                                   AOTM         
                      </div>
                                         
                      <!--            titre concours            -->                    <span>                        <img alt="" src="https://7img.net/users/2915/57/91/98/avatars/17369-57.jpg" />         
                         <!--            infobulle            -->                        </span>         
                      <div style="" class="fleche">
                                          
                      </div><span>         
                         <!--            tite fleche            -->                    </span>                           
                   </li>
                                                        
                   <!--           
                        BLOC A DUPLIQUER SI 3 OU 4 CONCOURS :
                      <li>
                        <img src="staff.png" alt="AOTM" class="mini">
                        <div class="titre-concours">AOTM</div>
                        <span>
                            <img src="https://7img.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="">
                            <div class="fleche"></div>
                        </span>
                      </li>            -->                       
                </ul>
                                               
             </td>
                                            
             <td class="withbg" valign="top">
                                                 
                <h2>
                             Le staff         
                </h2>
                                                     
                <ul id="staff">
                                                          
                   <li onmouseover="javascript:staff1()">
                                <img alt="" src="https://i.servimg.com/u/f39/19/07/10/81/staff11.png" />         
                   </li>
                                                          
                   <li onmouseover="javascript:staff2()">
                                <img alt="" src="https://i.servimg.com/u/f39/19/07/10/81/staff11.png" />         
                   </li>
                                                          
                   <li onmouseover="javascript:staff3()">
                                <img alt="" src="https://i.servimg.com/u/f39/19/07/10/81/staff11.png" />         
                   </li>
                                                          
                   <li onmouseover="javascript:staff4()">
                                <img alt="" src="https://i.servimg.com/u/f39/19/07/10/81/staff11.png" />         
                   </li>
                                                          
                   <li onmouseover="javascript:staff5()">
                                <img alt="" src="https://i.servimg.com/u/f39/19/07/10/81/staff11.png" />         
                   </li>
                                                        
                </ul>
                                                 
                <div class="staff">
                                                        
                   <div id="staff1">
                                                             
                      <p>
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, sapiente, quos, qui corporis soluta optio aspernatur harum minus asperiores ipsum repudiandae placeat ipsam.         
                      </p>
                                                             
                      <div class="pseudo">
                                   PSEUDO         
                      </div>
                                • <a href="">PROFIL</a> • <a href="">MP</a>                           
                   </div>
                                                        
                   <div style="display:none;" id="staff2">
                                                             
                      <p>
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aliquid, laudantium, neque eius nemo amet dolores velit esse voluptas dicta quisquam quos consequuntur provident         
                      </p>
                                                             
                      <div class="pseudo">
                                   PSEUDO         
                      </div>
                                • <a href="">PROFIL</a> • <a href="">MP</a>                           
                   </div>
                                                        
                   <div style="display:none;" id="staff3">
                                                             
                      <p>
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, illo, assumenda, pariatur reprehenderit nam vero tempore nostrum laboriosam molestiae maxime incidunt.         
                      </p>
                                                             
                      <div class="pseudo">
                                   PSEUDO         
                      </div>
                                • <a href="">PROFIL</a> • <a href="">MP</a>                           
                   </div>
                                                        
                   <div style="display:none;" id="staff4">
                                                             
                      <p>
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, dolor in quaerat quas quos pariatur iusto aliquid laudantium et ipsum nulla dignissimos.         
                      </p>
                                                             
                      <div class="pseudo">
                                   PSEUDO         
                      </div>
                                • <a href="">PROFIL</a> • <a href="">MP</a>                           
                   </div>
                                                        
                   <div style="display:none;" id="staff5">
                                                             
                      <p>
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, voluptate rerum ipsam incidunt magni temporibus voluptatibus voluptas labore praesentium nemo deserunt.         
                      </p>
                                                             
                      <div class="pseudo">
                                   PSEUDO         
                      </div>
                                • <a href="">PROFIL</a> • <a href="">MP</a>                           
                   </div>
                                                    
                </div>
                                               
             </td>
                                        
          </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody>        </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
          <tr style="">
                                            
             <td class="withbg partenaires" colspan="2" valign="top">
                                                 
                <h2>
                             Partenaires         
                </h2>
                                                 
                <ul id="ticker01">
                                                        
                   <li>
                                <a href=""><img alt="" src="https://i.servimg.com/u/f39/19/07/10/81/parten11.png" /></a>         
                   </li>
                                                        
                   <li>
                                <a href=""><img alt="" src="https://i.servimg.com/u/f39/19/07/10/81/parten11.png" /></a>         
                   </li>
                                                        
                   <li>
                                <a href=""><img alt="" src="https://i.servimg.com/u/f39/19/07/10/81/parten11.png" /></a>         
                   </li>
                                                        
                   <!--            eccetera            -->                       
                </ul>
                                               
             </td>
                                        
          </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody>      </tbody>         
       </table>
                            
       <div id="credits">
                          PA réalisée par Henrykiki sur <a target="_blank" href="http://www.never-utopia.com/t52871-henrykiki-pa-grise-rose-pale">Never-Utopia</a>           
       </div>
                            
    </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  <script type="text/javascript">
          /*!
     * liScroll 1.0
     * Examples and documentation at:
     * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
     * 2007-2010 Gian Carlo Mingati
     * Version: 1.0.2.1 (22-APRIL-2011)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     * Requires:
     * jQuery v1.2.x or later
     *
     */

    jQuery.fn.liScroll = function(settings) {
          settings = jQuery.extend({
          travelocity: 0.07
          }, settings);     
          return this.each(function(){
                var $strip = jQuery(this);
                $strip.addClass("newsticker")
                var stripWidth = 1;
                $strip.find("li").each(function(i){
                stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
                });
                var $mask = $strip.wrap("<div class='mask'></div>");
                var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");                       
                var containerWidth = $strip.parent().parent().width();  http://a.k.a. 'mask' width   
                $strip.width(stripWidth);       
                var totalTravel = stripWidth+containerWidth;
                var defTiming = totalTravel/settings.travelocity;  // thanks to Scott Waye     
                function scrollnews(spazio, tempo){
                $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
                }
                scrollnews(totalTravel, defTiming);           
                $strip.hover(function(){
                jQuery(this).stop();
                },
                function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace, residualTime);
                });       
          }); 
    };
      </script>  <script>
          $(function(){
          $("#ticker01").liScroll();
      });

      function staff1() {
            document.getElementById('staff1').style.display='block';
            document.getElementById('staff2').style.display='none';
            document.getElementById('staff3').style.display='none';
            document.getElementById('staff4').style.display='none';
            document.getElementById('staff5').style.display='none';}
          function staff2() {
            document.getElementById('staff1').style.display='none';
            document.getElementById('staff2').style.display='block';
            document.getElementById('staff3').style.display='none';
            document.getElementById('staff4').style.display='none';
            document.getElementById('staff5').style.display='none';}
          function staff3() {
            document.getElementById('staff1').style.display='none';
            document.getElementById('staff2').style.display='none';
            document.getElementById('staff3').style.display='block';
            document.getElementById('staff4').style.display='none';
            document.getElementById('staff5').style.display='none';}
          function staff4() {
            document.getElementById('staff1').style.display='none';
            document.getElementById('staff2').style.display='none';
            document.getElementById('staff3').style.display='none';
            document.getElementById('staff4').style.display='block';
            document.getElementById('staff5').style.display='none';}
          function staff5() {
            document.getElementById('staff1').style.display='none';
            document.getElementById('staff2').style.display='none';
            document.getElementById('staff3').style.display='none';
            document.getElementById('staff4').style.display='none';
            document.getElementById('staff5').style.display='block';}
      </script>

    Merci !

    EDIT: Bon, je crois que la police et la taille de texte sont résolus grâce à champi ! Mais du coup, la case 'Nouveautés" ne s'aligne toujours pas correctement (elle devrait être à gauche, comme dans le LS, mais elle est à droite). Comment résoudre ce problème ?

    Merci encore !


    Dernière édition par P-Summers le Jeu 18 Juil 2019 - 23:15, édité 2 fois
    Galad-El
    Galad-El
    FémininAge : 21Messages : 20

    le Sam 13 Juil 2019 - 20:08

    Bonjour !
    Je ne suis pas une pro du code, mais j'ai vu ceci dans le code à un certain endroit :
    " font-family: 'Roboto Condensed'; !important
    font-size: 9px; !important"
    Les balises !important sont après le point virgule.
    Tandis que plus tard, je vois que le !important sont marqués avant le point virgule.
    C'est peut-être cela qui fait buger le CSS au niveau de la taille ?
    P-Summers
    P-Summers
    FémininAge : 20Messages : 54

    le Sam 13 Juil 2019 - 22:23

    Hello !

    Merci beaucoup d'avoir répondu si rapidement ! Je viens d'arranger les !important mais résultat là, même la police marche plus :ptdr:
    Galad-El
    Galad-El
    FémininAge : 21Messages : 20

    le Dim 14 Juil 2019 - 13:36

    Du coup qu'est-ce qui ne marche pas à cet endroit ? J'ai testé sur un codepen en changeant juste les deux "!important" mentionnés, en écrivant :
    " font-family: 'Roboto Condensed' !important;
    font-size: 9px !important;"
    Et j'ai l'impression que la taille et la police marchent bien (mais j'ai testé rapidement, je me suis peut-être trompée ailleurs Razz). Mais ce n'est peut-être pas le résultat que tu souhaites ?
    P-Summers
    P-Summers
    FémininAge : 20Messages : 54

    le Dim 14 Juil 2019 - 16:38

    Honnêtement, je ne sais vraiment pas ! J'ai écrit la même chose que toi, mais rien n'y fait :/ Puis si, c'est bien le résultat que j'espère obtenir.
    Galad-El
    Galad-El
    FémininAge : 21Messages : 20

    le Lun 15 Juil 2019 - 9:20

    Je suis désolée du coup, je ne sais pas à quoi c'est dû Oo
    J'ai également de sacrées différences d'affichage entre Mozilla et Chrome (même sur CodePen, des margin très importantes apparaissent sur Mozilla). Quel navigateur utilises-tu ?
    De manière générale, j'ai l'impression que l'usage du "!important" est déconseillé ( https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity ) sauf cas particuliers parce que ça rend la cascade de style beaucoup moins claire. Du coup peut-être que ça vaudrait le coup de réécrire une partie du CSS pour éviter les !important et voir qu'est-ce qui ne marche pas précisément ? A moins bien sûr que le problème soit ailleurs !
    Désolée pour la réponse pas très utile, je sèche également. Du coup si tu trouves (ou si une âme charitable passant par là connaît) la solution, je veux bien l'entendre également Razz

    A tout hasard, le lien du codepen que j'ai utilisé pour bidouiller un peu le code : https://codepen.io/anon/pen/qzGeKa
    сhampi
    сhampi
    FémininAge : 21Messages : 150

    le Lun 15 Juil 2019 - 11:15

    Hello :love:

    Quand tu dis texte principal, c'est surtout tout ce qui est en noir en lorem ipsum ?
    Si oui, ajoute:

    Code:
    p {
            font-size: 9px;
    }

    dans ton css ! La valeur peut être modifié par le chiffre de ton choix !
    P-Summers
    P-Summers
    FémininAge : 20Messages : 54

    le Jeu 18 Juil 2019 - 17:25

    Galad-El | Welp, je crois bien que c'est un problème sur mon forum ! Je vois bien les modifs sur codepen. Merci !

    champi | mon Dieu mais pourquoi j'y ai pas pensé plus tôt. Merci beaucoup du coup ! Problème de police et taille résolus !

    Mais du coup j'ai un autre petit problème avec cette PA, c'est que la case "Nouveautés" est alignée à gauche à a place d'être à droite... Quelqu'un sait ce qui se passe ?

    P.S: J'édite aussi le sujet pour le garder à jour
    Iguolta
    Iguolta
    MasculinAge : 19Messages : 168

    le Jeu 18 Juil 2019 - 19:45

    Il est apparemment aligné à gauche car tes tr sont anormalement dans des tbody (il y en a même beaucoup des tbody apparemment). Si tu "nettoies" tout ça normalement tes éléments seront de nouveaux bien placés. Ca arrive assez souvent quand on utilise les tableaux avec les éditeurs de Forumactif, mais je t'avouerais que je ne sais pas trop pourquoi.
    P-Summers
    P-Summers
    FémininAge : 20Messages : 54

    le Jeu 18 Juil 2019 - 23:14

    EYYYYY CA MARCHE !

    Merci beaucoup pour votre aide à tous ♥
    Contenu sponsorisé


      La date/heure actuelle est Dim 21 Juil 2019 - 3:12