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 :
ETB Pokémon Fable Nébuleuse : où acheter le coffret dresseur ...
Voir le deal

    Codage récalcitrant & introuvable.

    Zillouh
    Zillouh
    FémininAge : 32Messages : 43

    Mer 23 Nov 2011 - 15:38

    Voilà voilà, j'essais de faire une mise en page sympa de mon forum, et ce matin je me suis dis que j'allais faire des infobulles pour mon staff. Problème, j'ai beau chercher, il y a toujours quelque chose qui ne va pas. J'ai finis par abandonner l'idée des infobulles, et je ne trouve pas le code que je veux, c'est à dire celui-ci :

    Codage récalcitrant & introuvable. Inobulles

    En appuyant sur les petites bestioles blanches, l'image, les liens et le nom changent, sans qu'il y ai 35 000 changements.
    Serait-il possible de m'aider s'il vous plait ?
    Sachant que je patauge avec ma feuille CSS aussi, je n'en peux plus x...x.

    J'ai réussis à faire ça (après pas mal de recherches ><) :

    Code:
    <table cellspacing="4">
    <tr>
    <th colspan="3">Le staff</th>
    </tr>
    <tr>
    <td colspan="3">
      <table>
      <tr>
      <td><div class="infobulle"><img src="http://img269.imageshack.us/img269/1153/emmabb.jpg" /><span>Enora ♦ Modo'</span></td>
      <td><div class="infobulle"><img src="http://img710.imageshack.us/img710/8420/xavierl.jpg" /> <span>GusGus ♦ Modo'</span></td>
      <td><div class="infobulle"><img src="lien image ou apparait l'infobulle 3" /> staff3<span>Contenu de la bulle 3</span></td><br>
    <td><div class="infobulle"><img src="http://img269.imageshack.us/img269/1153/emmabb.jpg" /><span>Enora ♦ Modo'</span></td>


      </tr>
      </table>
    </td>
    <td colspan="3"> Votre texte ici</td>
    </tr>
    <tr>
    <th colspan="2">Nos partenaires</th><th colspan="2"> Bienvenue {USERNAME}</th><th colspan="2"> Description du forum</th>
    </tr>
    <tr>
    <td colspan="2">
      <a href="adresse partenaire1"><img src=" adresse bannière partenaire1" />partenaire 1</a>
      <a href="adresse partenaire2"><img src=" adresse bannière partenaire2" /> partenaire 2</a>
      <a href="adresse partenaire3"><img src=" adresse bannière partenaire3" /> partenaire 3</a>
      <a href="adresse partenaire4"><img src=" adresse bannière partenaire4" /> partenaire 4</a>
    </td>
    <td colspan="2">Message de bienvenue</td>
    <td colspan="2"> Message de description du forum</td>
    </tr>
    </table>

    Mais ça ne convient pas du tout T...T.

    Merci beaucoup !



    Dernière édition par Zillouh le Sam 26 Nov 2011 - 13:02, édité 1 fois
    Anonymous
    Invité

    Mer 23 Nov 2011 - 16:34

      Ohayo =)

      Tu dois insérer ceci dans ta partie page d'accueil (à dupliquer selon le nombre de personne) :

      Code:
      <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="AVATAR STAFF"></a></td></tr><tr><td style="text-align: center;"><font size="1">PSEUDO - Rang<br><url="lien mp"="">Messagerie - <url="lien profil"="">Profil<br></url="lien></url="lien></font></td></tr><tr align="center"></tr></tbody></table></span></a>

      Ensuite pour le CSS, je vais essayer de t'expliquer pour que tu puisses l'adapter toi-même.

      Code:
      /*INFOS BULLES*/

      a.imginfo {
        position: relative;
        color: #7d7d7d; /* couleur du texte sous ton image, hors bulle (si tu en mets)*/
        text-decoration: none; /* pour choisir gras, italique etc ...*/
        border-bottom: 0px #7d7d7d solid; /* on souligne le texte, ici la valeur de l'épaisseur étant 0, il n'y a pas de bordure */
      }

      a.imginfo span {
        display: none; /* on masque l'infobulle */
      }
      a.imginfo:hover {
        background: none; /* correction d'un bug IE */
        z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
        cursor: help; /* Lorsque ta souris survolera l'info-bulle, le curseur d'aide apparaîtra (voir 1) */
      }
      a.imginfo:hover span {
        display: inline; /* on affiche l'infobulle */
        position: absolute;
        white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
        top: 30px; /* on positionne notre infobulle, ici elle sera décalée de 30px vers le bas de ton image */
        left: 20px; /* Pareil, ici elle sera décalée de 20px vers la gauche de ton image (fonctionne aussi avec rigth et bottom */
        background: white; /* Le fond de ton info-bulle*/
        color: 7d7d7d; /* Couleur du texte de ton info-bulle*/
        padding: 3px; /* il y aura un espace de 3px entre le texte de ta bulle et le cadre de ce dernier*/
        border: 0px solid grey; /*Comme plus haut*/
        border-left: 5px solid #b6b6b6; /*pour préciser la bordure de ton info-bulle, ici à gauche (left), son épaisseur (5 pixels), en coin (solid) et la couleur*/
        border-right: 3px solid #b6b6b6; /* Comme en haut*/
        border-top: 3px solid #b6b6b6; /* Comme en haut*/
        border-bottom: 5px solid #b6b6b6; /* Comme en haut*/
      }

      1 : liste des curseurs trouvables ici

      En espérant avoir été utile Wink

      Code trouvé ici.
    Zillouh
    Zillouh
    FémininAge : 32Messages : 43

    Mer 23 Nov 2011 - 17:40

    Hm, là le soucis c'est que c'est pas aligné mais les uns au dessus des autres, sans donner l'effet où l'ont doit cliquer sur la petite image pour changer d'image. De plus, les liens vers le MP et la fiche ne fonctionnent pas o.o.
    Anonymous
    Invité

    Mer 23 Nov 2011 - 18:03

      Pourrait-on voir le forum ? =) Sur le mien c'est aligné =/

      Pour le clic, pardon j'avais oublié, actuellement il doit changer au passage de la souris. Je ne sais pas faire apparaître au clic, désolée, quelqu'un viendra peut-être t'aider =/ En attendant je continue de chercher.

      Enfin pour les liens, une erreur de ma part. Remplace le code précédent par celui-ci :

      Code:
      <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="AVATAR STAFF"></a></td></tr><tr><td style="text-align: center;"><font size="1">PSEUDO - Rang<br><a href="LIEN MP">Messagerie</a> - <a href="LIEN PROFIL">Profil</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a>

      Si tu veux des explications, j'ai mélangé de le BBcode et le HTML, la honte sur moi, soit les balises :

      Code:
      [url=LIEN]Texte[/url]

      Et

      Code:
      <a href="LIEN">Texte</a>

      Le dernier étant à utiliser en HTML =)

      Ça donnera quelque chose de mieux normalement xD

    Zillouh
    Zillouh
    FémininAge : 32Messages : 43

    Mer 23 Nov 2011 - 18:08

    Hm, oui les liens marchent, mais j'obtiens ça quand je met 6 fois le code (6 membres du staff) :

    https://2img.net/r/ihimizer/img3/3659/fofoh.jpg

    C'est normal ?
    Anonymous
    Invité

    Mer 23 Nov 2011 - 18:13

      Pour le retour à la ligne, oui c'est normal, ta largeur de ton bloc "Staff" est trop petite pour tout aligner.

      Cela dit il doit y avoir un soucis dans ton code. Puis-je le voir ?
    Zillouh
    Zillouh
    FémininAge : 32Messages : 43

    Mer 23 Nov 2011 - 18:23

    Que ce soit dans le bloc ou non ça me le fait =/ Et j'aurais préféré comme dans la photo et non alignées, mais ça doit pas être simple x...x Pour le code :

    Code:
    <div id="accueil">
      <div class="news">
          <h2 class="accueilh2">News</h2>
            <div class="accueiltexte">Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.</div>
        </div>
      <div class="bienvenue">
          <h2 class="accueilh2">Bienvenue chez nous</h2>
            <div class="accueiltexte">Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.</div>
        </div>
        <div class="staff">
          <h2 class="accueilh2">Staff</h2>
            <div class="accueiltexte">
    <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="AVATAR STAFF"></a></td></tr><tr><td style="text-align: center;"><font size="1">PSEUDO - Rang<br><a href="LIEN MP">Messagerie</a> - <a href="LIEN PROFIL">Profil</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a>
    <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="AVATAR STAFF"></a></td></tr><tr><td style="text-align: center;"><font size="1">PSEUDO - Rang<br><a href="LIEN MP">Messagerie</a> - <a href="LIEN PROFIL">Profil</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a>
    <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="AVATAR STAFF"></a></td></tr><tr><td style="text-align: center;"><font size="1">PSEUDO - Rang<br><a href="LIEN MP">Messagerie</a> - <a href="LIEN PROFIL">Profil</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a>
    <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="AVATAR STAFF"></a></td></tr><tr><td style="text-align: center;"><font size="1">PSEUDO - Rang<br><a href="LIEN MP">Messagerie</a> - <a href="LIEN PROFIL">Profil</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a>
    <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="AVATAR STAFF"></a></td></tr><tr><td style="text-align: center;"><font size="1">PSEUDO - Rang<br><a href="LIEN MP">Messagerie</a> - <a href="LIEN PROFIL">Profil</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a>
    <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE"></font><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="AVATAR STAFF"></a></td></tr><tr><td style="text-align: center;"><font size="1">PSEUDO - Rang<br><a href="LIEN MP">Messagerie</a> - <a href="LIEN PROFIL">Profil</a><br></font></td></tr><tr align="center"></tr></tbody></table></span></a>
    </div>
        </div>
        <div class="creation">
          <h2 class="accueilh2">Les Minis Annonces.</h2>
            <div class="accueiltexte">Les postes d'adultes présentent beaucoup de possibilités, voir plus que ceux des enfants et adolescents, n'hésitez donc pas à en jouer !</div>
        </div>
        <div class="partenaires">
          <h2 class="accueilh2">Partenaires</h2>
            <div class="accueiltexte">Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.</div>
        </div>
    </div>
    Anonymous
    Invité

    Mer 23 Nov 2011 - 18:25

      Étant donné que tu n'as pas mis les liens des images, je comprends qu'elles ne s'affichent pas =\
      C'est quoi que tu appelles mettre ailleurs ? =3
    Zillouh
    Zillouh
    FémininAge : 32Messages : 43

    Mer 23 Nov 2011 - 18:46

    Mon soucis n'est pas l'affichage des images, tiens :

    https://2img.net/r/ihimizer/img696/5130/fofo2dr.jpg

    mais le positionnement. Je te donne le lien du forum où il y a ce que je veux :
    http://v-knight-rpg.forumgratuit.org/

    Hop, dans la partie staff.
    Anonymous
    Invité

    Mer 23 Nov 2011 - 18:56

      Oui oui, j'ai bien compris ce que tu voulais ^^ Ce que je ne comprends pas en revanche, c'est que sur le mien ça s'affiche correctement ><
      Je ne vois pas =/ Un peu d'aide ne serait pas de refus =\
    Zillouh
    Zillouh
    FémininAge : 32Messages : 43

    Mer 23 Nov 2011 - 19:02

    Que ce soit sur Chrome ou Firefix, ça donne toujours pareil ... Peut-être un soucis dans la feuille de CSS ?
    Bang
    Bang
    MasculinAge : 28Messages : 2434

    Mer 23 Nov 2011 - 20:46

    Bonsoir ^^
    Alors, pour ton petit problème, ce n'est pas une infobulle mais des onglets (enfin, je pense) !
    Donc, tu trouveras tout ce dont tu as besoin ici > https://www.never-utopia.com/t29238-html-css-page-d-accueil-en-onglet il suffit juste d'adapter en fait !







    OHANA
    Zillouh
    Zillouh
    FémininAge : 32Messages : 43

    Mer 23 Nov 2011 - 20:53

    Je t'avouerai que là, tu m'as perdue. XD
    J'ai regardé mais je vois pas comment faire avec ça pour mettre mes images comme je veux 8/


    EDIT :
    J'ai trouvé une autre solution, merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Dim 19 Mai 2024 - 5:38