AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Cdiscount : -30€ dès 300€ d’achat sur une sélection Apple
Voir le deal

    Petit problème avec une PA

    Myfanwi
    Myfanwi
    FémininAge : 26Messages : 97

    Sam 26 Sep 2015 - 15:28

    Bonjour !

    Voilà, j'ai un petit problème avec un PA d'HenryKiki (Celle-là) et je viens donc demander un peu d'aide.

    En fait, voilà, quand je poste la PA dans la partie HTML et en iframe ensuite, ça marche niquel. Cependant, dès que je modifie ne serait-ce qu'un bout de texte, la PA entière se déforme x) Le bloc partenaires part totalement en cacahuètes, le texte grossit sans raison particulière, bref, je suis perdue ^^'

    Les images parlent d'elles-même :

    Avant : https://www.zupimages.net/up/15/39/rndg.jpg
    Après : https://www.zupimages.net/up/15/39/n73u.jpg

    Et j'ai pas touché au CSS ou au code, j'ai juste changé le texte.

    C'est pour ce forum !

    Voici le code HTML, au cas où ^^

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
            <meta charset="UTF-8" />
      <title>PA grise/rose + scrollbar personnalisée.</title>
      <link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
      <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: "abeatbykai", sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            color: gray;
          }

          #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;
            background: url("http://i39.servimg.com/u/f39/19/07/10/81/titre-10.png") no-repeat;
            position: absolute;
            top: -55px;
            left: 50%;
            margin-left: -173.5px;
            text-indent: -9999px;
          }

          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;
            font-family: 'Covered By Your Grace', 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("http://i39.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(242,163,189,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(242,163,189,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(242,163,189,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(242,163,189,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(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-scrollbar-corner{background:none;}
      </style>
    </head>
    <body>
      <div id="pa">
          <h1>Bienvenue !</h1>
          <table width="800px" cellspacing="15px" cellpadding="10px" id="contenu-general">
            <tr>
                <td rowspan="2" valign="top" class="withbg" width="300px">
                  <h2>Le concept</h2>
                  <div 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 valign="top" width="450px">
                  <ul class="groupes">
                      <li><a href="" style="color: red;">groupe 1</a></li>
                      <li><a href="" style="color: green;">groupe 2</a></li>
                      <li><a href="" style="color: orange;">groupe 3</a></li>
                      <li><a href="" style="color: blue;">groupe 4</a></li>
                      <li><a href="" style="color: magenta;">groupe 5</a></li>
                  </ul>
                </td>
            </tr>
            <tr>
                <!-- <td>lol</td> on supprime cette ligne, car rowspan -->
                <td valign="top" class="withbg">
                  <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>
            <tr>
                <td valign="top" class="withbg">
                  <h2>Concours</h2>
                  <ul id="concours">
                      <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                      <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
                            <div class="fleche"></div> <!-- 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="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="">
                            <div class="fleche"></div>
                        </span>
                      </li> -->
                  </ul>
                </td>
                <td valign="top" class="withbg">
                  <h2>Le staff</h2>
                      <ul id="staff">
                        <li onMouseOver="javascript:staff1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                        <li onMouseOver="javascript:staff2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                        <li onMouseOver="javascript:staff3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                        <li onMouseOver="javascript:staff4()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                        <li onMouseOver="javascript:staff5()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></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 id="staff2" style="display:none;">
                        <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 id="staff3" style="display:none;">
                        <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 id="staff4" style="display:none;">
                        <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 id="staff5" style="display:none;">
                        <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>
            <tr>
                <td valign="top" colspan="2" class="withbg partenaires">
                  <h2>Partenaires</h2>
                  <ul id="ticker01">
                      <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                      <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                      <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                      <!-- eccetera -->
                  </ul>
                </td>
            </tr>
          </table>
      <div id="credits">
          PA réalisée par Henrykiki sur <a href="http://www.never-utopia.com/t52871-henrykiki-pa-grise-rose-pale" target="_blank">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>
    </body>
    </html>

    Et l'iframe :

    Code:
    <iframe style="width: 850px; height: 650px;" scrolling="no" frameborder="0" src="http://fanbase-aventures.forumactif.org/h1-pa"></iframe>


    Merci beaucoup à celui qui voudras bien m'aider Very Happy
    Bisouilles !
    • Revenir en haut
    Myfanwi
    Myfanwi
    FémininAge : 26Messages : 97

    Dim 27 Sep 2015 - 22:59

    J'ai trouvé d'où ça vient ^^ Le topic peut être archivé Very Happy
    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Lun 29 Avr 2024 - 13:35