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 du moment : -25%
-25% Samsung Odyssey G9 G95C – Ecran PC Gamer ...
Voir le deal
599 €

    Page d'accueil : des liens qui ne fonctionnent pas

    Anonymous
    Invité

    Lun 17 Oct 2016 - 10:56

    Bonjour ! :)

    Sur mon forum j'ai installé la PA suivante : https://www.never-utopia.com/t53531-pa-sobre-noire
    Lorsque je clique sur un lien, n'importe lequel, il ne s'ouvre pas dans un nouvel onglet. Une nouvelle page du forum (avec la bannière, la PA, les catégories etc) s'ouvre à la place. Cette nouvelle page se trouve dans l'encadré de la PA et la remplace.

    Comment faire pour arranger ce problème et que les liens s'ouvrent correctement dans un nouvel onglet ?

    Je remercie d'avance la personne qui prendra le temps de lire ce sujet. :lovebomb:


    Dernière édition par Minzy le Lun 17 Oct 2016 - 16:05, édité 1 fois
    • Revenir en haut
    Applauze
    Applauze
    MasculinAge : 28Messages : 167

    Lun 17 Oct 2016 - 11:05

    Bonjour :3

    Pourrais-tu nous donner le lien de ton site, ainsi que le CSS, car nous n'avons pas de support pour chercher la solution malheureusement. Tu pourras les poster sous hide, si tu veux les garder confidentielles ou autre choses de ce genre. J'essaierais de résoudre ton problème, mais je ne suis pas l'un des meilleurs codeurs du forum.. Je ferais tout pour trouver la solution, mais je suis sûr que si je trouve pas, quelqu'un de plus expériementé que moi, viendra.
    • Revenir en haut
    Anonymous
    Invité

    Lun 17 Oct 2016 - 11:15

    Je te remercie de venir m'aider ! :)

    Alors oui, la grosse quiche. Ça va être difficile de faire quoique ce soit si je ne poste pas les codes... XD

    http://losttimememory.forumactif.org/

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="UTF-8">
      <title>Pa-Lisou</title>
      <style>
      /* ajustements personnels */

          /* stylisation paragraphe contexte + choses à savoir : */
          #pa {
            font-family: sans-serif;
            font-size: 11px;
            position: relative;
          }

          /* stylisation titres */
          #pa h2 {
            font-family: sans-serif;
            font-size: 14px;

            text-transform: uppercase;
            text-align: center;
            font-style: italic;

            margin-bottom: 10px !important; /* = espace sous les titres */
          }

          /* stylisation liens de toute la PA */

          #pa a{
            text-decoration: none;
            color: gray;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
          }

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

          /* stylisation format date des news */

          .date {
            font-weight: bold;
            color: #022E4F;
            font-size: 11px;
            text-transform: uppercase;
          }

          /* stylisation liens menu */
          ul#menu a {
            text-decoration: none;
            color: #B6B4B4;
            letter-spacing: 0px;
            font-size: 16px;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
          }

          ul#menu a:hover {
            letter-spacing: 2px;
            font-weight: bold;
          }

          /* stylisation pseudo "staff" */

          .pseudo {
            margin: 5px 0px;
            font-weight: bold;
            font-size: 110%;
          }

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

      /* GÉNÉRAL */

      #pa {
          width: 800px; margin: 0 auto;
          background-color: #100e0f;
          box-shadow: 0px 0px 10px #022E4F;
          color: #b6b4b4;
          font-family: Trebuchet MS;
          font-size: 11px;   
      }

      #pa h1 {
          width: 100%;
          height: 50px; line-height: 50px;
          text-align: center;
      }

      #container {
          width: 780px; margin: 20px auto 10px;
          overflow: hidden;
      }

      .left {
          width: 620px;
          float: left; margin-right: 10px;
          min-height: 150px;
      }

      .right {
          width: 126px; height: 421px;
          box-shadow: 2px 2px 2px black;
          float: left;
          padding: 10px;
      }

      /* MENU */

      ul#menu {
          width: 100%;
          padding: 5px 0px;
          list-style-type: none;
          text-align: center;
          text-transform: uppercase;
      }

      ul#menu li{
          display: inline-block;
          margin: 0;
          padding: 0 !important;
      }

      ul#menu li:after {
          content: "—";
          padding: 0 15px;
      }

      ul#menu li:last-child:after {
          content: "";
          padding: 0px;
      }

      /* contexte */
      #contexte {
          width: 596px; max-width: 596px;
          height: 136px; max-height:136px;
          padding: 10px; margin-bottom: 10px;     
          box-shadow: 2px 2px 2px black;
      }

      img.contexteimg {
          width: 160px; height: 140px;
          margin: 0 10px 0 0;
          float: left;
      }

      .texte-contexte {
          width: 410px; height: 140px;
          padding-right: 15px; /* espace pour scrollbar */
          float: left; text-align: justify;
          overflow-y: auto; /* scrolling */
      }

      .texte-contexte p{  margin-bottom: 20px;}
      .texte-contexte p:last-child{  margin-bottom: 0px;}

      /* NEWS & CHOSES SE PASSANT */
      .twocols {
          float: left;
          width: 281px; height: 81px;
          margin-right: 10px;
          padding: 10px;
          position: relative;
          overflow: hidden;
          text-align: justify;
      }

      .twocols:nth-child(even) {
          margin-right: 0px;
      }

      .news img { width: 100%; height: auto;}

      .choses img {
          position: absolute;
          top: 0; left: 0;
          width: 100%; height: 105px;
          -webkit-transition: all 1s linear;
          -moz-transition: all 1s linear;
          -ms-transition: all 1s linear;
          -o-transition: all 1s linear;
          transition: all 1s linear;
          z-index: 1;
      }

      .choses:hover img {
          /* Pour faire disparaitre l'image au survol */
          position: absolute;
          width: 100%; height: 0px;
          top: 52.5px; left: 0;
      }

      .choses p {
          /* Positionnement du texte sous l'image + scroll */
          position: absolute; top: 0; left: 0;
          padding: 10px;
          width: 280px; height: 85px;
          overflow-y: auto;
          z-index: 0;
      }

      /* MEMBRES + NEWS + RECHERCHES */
      .threecols {
          float: left;
          width: 156px; height: 136px;
          margin-right: 10px;
          padding: 10px;
          position: relative;
      }

      .threecols:nth-child(2) {
          width: 216px;
      }

      .threecols:last-child {
          margin-right: 0px;
      }

      .memberofthemonth {
          width: 156px; height: 115px;
      }
     
      .mom {
          float: left;
          width: 75px;
          margin-right: 6px;
          text-align: center;
      }

      .mom .pseudo { font-weight: bold;}

      .mom:nth-child(2), .research a:nth-child(odd) {
          margin-right: 0px;
      }

      .mom img {
          width: 100%; height: auto;
      }

      .newscontent {
          height: 110px;
          overflow-y: auto;
      }

      .nouvelle {
          margin: 5px 0px;
          border-bottom: 1px dotted #000;
          padding-bottom: 5px;
      }
      .research {text-align: center;}

      .research a {
          display: inline-block;
          width: 50px;
          height: 50px;
          background: orange;
          margin-right: 5px;
          margin-bottom: 10px;
          text-align: center;
      }

      .research a img{
          width: 50px; height: 50px;
      }

      /* STAFFS */

      .contentstaff {
          width: 100%;
          text-align: center;
          margin-bottom: 30px;
      }

      .contentstaff img {
          width: 100%; height: auto;
      }

      /* PARTENAIRES */

      #footer {
          clear: both;
          width: 100%;
          padding-top: 10px !important;
      }

      #footer img {
          width: 40px; height: 40px;
          -webkit-transition: all .3s ease;
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -o-transition: all .3s ease;
          transition: all .3s ease;
      }

      #footer img:hover {
          -webkit-animation-origin: center center;
          -moz-animation-origin: center center;
          -ms-animation-origin: center center;
          -o-animation-origin: center center;
          animation-origin: center center;
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -ms-transform: scale(1.2);
          -o-transform: scale(1.2);
          transform: scale(1.2);
      }

      #credits {
          position: absolute;
          bottom: -20px; right: 0;
      }

      </style>
    </head>
    <body>
      <div id="pa">
          <br />
          <ul id="menu">
            <li><a href="http://losttimememory.forumactif.org/t1-le-reglement">Règlement</a></li>
            <li><a href="http://losttimememory.forumactif.org/t5-contexte-du-forum">Contexte</a></li>
            <li><a href="http://losttimememory.forumactif.org/f15-registres">Registres</a></li>
            <li><a href="http://losttimememory.forumactif.org/f2-predefinis-et-scenarios">Scénarios</a></li>
            <li><a href="http://losttimememory.forumactif.org/f14-partenariats">Partenariats</a></li>
            <li><a href="http://losttimememory.forumactif.org/f3-espace-invites">Invités</a></li>
          </ul>

          <div id="container">
            <div class="left">

                <!-- ESPACE CONTEXTE -->

                <div id="contexte">
                  <img src="http://img15.hostingpics.net/pics/996016tumblrnus5ph89xY1ufry9vo1500.jpg" alt="" class="contexteimg">
                  <div class="texte-contexte">
                      <p>Imaginez-vous, le monde parfait. Le lieu idéal, l’endroit que vous ne voyez que dans vos rêves. Oui, un monde normalement humainement impossible à atteindre. Cependant, vos rêves deviennent réalité. Un jour, à votre ordinaire, vous rentrez chez vous, sans même vous douter qu'aujourd'hui sera votre dernier jour normal. Poussant la porte de votre maison, vous serez submergé par une lumière aveuglante et puissante. Vous vous évanouirez, la dernière chose que vous aurez vue sera un large sourire se dessinant sur un visage diabolique. Vous vous réveillez dans un monde fantastique, éblouissant de beauté. Inconnu, à vos yeux. Perdus, oui, c’est l’unique mot pour vous décrire. Devant vous, un homme, rayonnant. Un sourire s’étire le long de ses lèvres. Vous vous interrogez, sur son identité. Il vous paraît bienveillant, sage. Il vous indique que vous allez commencer une toute nouvelle vie à Utopia, débutant avec un don. Qu’il est votre Dieu, et qu’il vous guidera.</p>
                      <p>Vous êtes ensuite relâché dans ce vaste monde. Vous remarquez, que, les autres gens sont souriants, à l’aise et habitués. Ils usent de leurs pouvoirs avec simplicité, possédant des dons absolument fabuleux, comme parfois inutiles. Cependant, tout ceci vous paraît légèrement trop beau. Une si belle entente vous choque : les êtres humains n’ont jamais cohabité normalement. Tout cela vous parait alors très étrange.
    Libre à vous de croire cet être mystérieux se disant être votre Dieu, de suivre sa voix, son conseil, non, ses ordres. Choisissez si vous resterez aveugles face aux mystères d'Utopia, ou bien, de ressortir du lot, de vous rebeller.</p>
                  </div>
                </div>

                <!-- ESPACE NEWS ET CHOSES SE PASSANT -->

                <div style="overflow: hidden; margin-bottom: 10px;">
                  <div class="twocols news">
                      Le Journaliste est prêt à écouter tous vos potins, envoyez-lui un <a href="http://losttimememory.forumactif.org/privmsg?mode=post&u=55">MP</a> !
                    <br /><br />
                      N'oubliez pas de voter toutes les deux heures pour le forum grâce aux deux tops sites <a href="http://losttimememory.forumactif.org/t887-les-tops-sites-et-page-facebook">ici</a> !
                  </div>
                  <div class="twocols choses">
                      <img src="http://img15.hostingpics.net/pics/351489NEWS.gif" alt="Image Choses se passant" />
                      <p>L'identité du chef des Dissidents a été révélée alors même que ce camp n'a pas cessé d’enchaîner les attentats. Jusqu'où cette guerre ira-t-elle et qui en sortira vainqueur ?</p>
                  </div>
                </div>

                <!-- ESPACE MEMBRES + NEWS + RECHERCHONS -->

                <div style="overflow: hidden;">
                  <div class="threecols">
                      <h2>Membres du mois</h2>
                      <div class="memberofthemonth">
                        <p class="mom">
                            <img src="http://img15.hostingpics.net/pics/774232tumblrm6ttutP1Mf1qi24fko11280.jpg" alt="">
                            <span class="pseudo">Sarah</span><br>
                            Rang
                        </p>

                        <p class="mom">
                            <img src="http://img15.hostingpics.net/pics/923057tokibyfuyumine87d4v310o.jpg" alt="">
                            <span class="pseudo">Lukha</span><br>
                            Rang
                        </p>
                      </div>
                  </div>
                  <div class="threecols">
                      <h2>Nouveautés</h2>
                      <div class="newscontent">
                        <div class="nouvelle">
                            <div class="date">16-10-2016 :</div>
                            Nouvelles bannières et nouvelle page d'accueil, histoire de changer un peu le design !
                        </div>
                        <div class="nouvelle">
                            <div class="date">12-10-2016 :</div>
                            Vous avez besoin de parler de vos problèmes ? Ouverture du <a href="http://losttimememory.forumactif.org/f68-cabinet-de-psychologie">cabinet de psychologie</a> à l'hôpital.
                        </div>
                       
                      </div>
                  </div>
                  <div class="threecols research">
                      <h2>Nous recherchons</h2>
                      <a href="http://losttimememory.forumactif.org/t606-william-white-le-tisseur-de-reves">
                        <img src="http://img15.hostingpics.net/pics/455594highresloganlerman467444daniel.jpg" alt=""></a>
                      <a href="http://losttimememory.forumactif.org/t673-june-song-pouvoir-au-choix">
                        <img src="http://img15.hostingpics.net/pics/888119large.jpg" alt=""></a>
                      <a href="http://losttimememory.forumactif.org/t643-angela-charms-pouvoir-au-choix">
                        <img src="http://img15.hostingpics.net/pics/292052tumblrnmej59Bw4G1tc5wz1o1500.jpg" alt=""></a>
                      <a href="http://losttimememory.forumactif.org/t545-nikolas-nielsen-pouvoir-et-camp-au-choix">
                        <img src="http://img15.hostingpics.net/pics/197628daa0d9656ff163169afe3d5ebf5a14e7d527lw4.jpg" alt=""></a>
                  </div>
                </div>
            </div> <!-- END COLONNE "LEFT" -->
            <div class="right">
                <h2>Staff</h2>

                <div class="contentstaff"><br /><br />
                  <img src="http://img4.hostingpics.net/pics/441054Mal.gif" alt="">
                  <div class="pseudo">Maël Andersen</div>
                  <a href="http://losttimememory.forumactif.org/privmsg?mode=post&u=4">MP</a> -
                  <a href="http://losttimememory.forumactif.org/u4">PROFIL</a>
                </div>
                <div class="contentstaff">
                  <img src="http://img4.hostingpics.net/pics/278877Noah.gif" alt="">
                  <div class="pseudo">Noah D. Hawkins</div>
                  <a href="http://losttimememory.forumactif.org/privmsg?mode=post&u=2">MP</a> -
                  <a href="http://losttimememory.forumactif.org/u2">PROFIL</a>
                </div>
               
            </div> <!-- END COLONNE "RIGHT" -->

            <div id="footer" style="text-align: center;">
                <!-- <marquee behavior="" direction="right" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="1"> -->
                  <a href="http://origin-s.creer-forum.com/" target="_blank">
                      <img src="http://i39.servimg.com/u/f39/17/95/44/51/ico110.jpg" alt="Nom Partenaire"></a>
                  <a href="http://quederla.forumactif.fr/" target="_blank">
                      <img src="http://zupimages.net/up/15/43/d41s.jpg" alt="Nom Partenaire"></a>
                  <a href="http://neverneverland.forumactif.org/" target="_blank">
                      <img src="http://zupimages.net/up/16/13/lix4.jpg" alt="Nom Partenaire"></a>
                  <a href="http://fantasmagorie.forumactif.org/" target="_blank">
                      <img src="http://img4.hostingpics.net/pics/433031bouton1.png" alt="Nom Partenaire"></a>
                  <a href="http://valoransbattlefront.forumactif.org/" target="_blank">
                      <img src="http://img11.hostingpics.net/pics/801275partkjhkjh.png" alt="Nom Partenaire"></a>
                  <a href="http://hssup.forumactif.org/" target="_blank">
                      <img src="http://www.hostingpics.net/thumbs/99/58/09/mini_995809bouton5050.png" alt="Nom Partenaire"></a>
                  <a href="http://rpg-noren.forumactif.org/" target="_blank">
                      <img src="http://zupimages.net/up/16/30/jwsi.jpg" alt="Nom Partenaire"></a>
                  <a href="http://losttimememory.forumactif.org/" target="_blank">
                      <img src="http://img15.hostingpics.net/pics/70287650x50.png" alt="Nom Partenaire"></a>
                  <a href="http://losttimememory.forumactif.org/" target="_blank">
                      <img src="http://img15.hostingpics.net/pics/70287650x50.png" alt="Nom Partenaire"></a>
                                <!-- marquee -->
            </div><br />
      <div id="credits">
          PA réalisée sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
      </div>
      </div>
    </body>
    </html>
    • Revenir en haut
    Applauze
    Applauze
    MasculinAge : 28Messages : 167

    Lun 17 Oct 2016 - 13:25

    J'ai cherché pendant longtemps une incohérence au niveau du code, et je n'ai rien trouvé.. à moins que je vois mal . Ton code est idéalement bien, et automatiquement placé. Et donc, j'en reviens à une même astuce qui doit sûrement marché dans ce genre de problème.

    En codage, HTML, nous utilisons à un codage spécifique pour ouvrir un lien dans un nouvel onglet. c'est très util dans ce cas là, et très facile à utiliser. Il n'y a rien de plus compliqué par rapport à ce rajout de code. C'est vrai que lorsqu'on créait un site du genre, WordPress, Blogger, ect.. On a juste à cocher la case ' ouvrir dans un nouvel onglet', mais lorsque l'on utilise le HTML c'est autre chose. Le rajout d'un code.

    Code:
    <a href="www.never-utopia.com" target="_blank">Never-Utopia</a>

    Explication: Entre guillemets, après href= écrivez le lien de la page que vous souhaitez ouvrir dans un nouvel onglet.

    Code:
     target="_blank"


    Explication: ce bout de code permet tout simplement de dire « ouvre ce lien dans un nouvel onglet » / Et entre > et écrivez le texte que vous voulez voir apparaître à la place du lien.
    Ce code est construit de la même façon qu’un lien normal, à la différence près qu’il faut rajouter le petit target= »_blank », alors pour ceux qui savaient déjà faire un lien en HTML, vous n’avez plus qu’à apprendre ces deux petits mots, surtout que cette fonction est très pratique et très répandue, ce serait donc un peu bête de ne pas la maîtriser ! 😉
    • Revenir en haut
    Anonymous
    Invité

    Lun 17 Oct 2016 - 16:05

    C'est parfait ! Je te remercie pour ton aide et je signale que le Staff d'Utopia pourra archiver ce sujet ! Wink
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 16:59