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.

-39%
Le deal à ne pas rater :
Pack Home Cinéma Magnat Monitor : Ampli DENON AVR-X2800H, Enceinte ...
1190 € 1950 €
Voir le deal

    (HALLOW) P.A : de style amazonienne

    Filou
    Filou
    FémininAge : 32Messages : 162

    Sam 5 Juil 2014 - 23:07

    Rappel du premier message :

    Ma demande



    Bonjour

    Le demande que je vais faire est un peu "osé", je veux dire avec plusieurs éléments images PNG à intégré avec le code texte.
    Suite à ma première demande, j'ai voulus me débrouiller seule avec ce code avec mes faibles connaissance dans l'art du codage, et comme je le pensais je n'y arrive pas, cela fait deux semaines que je tente plusieurs tentatives qui se révèle "défectueux" ou pas cadrer comme je le voudrais.

    Encore une fois, j'ai besoin de votre aide.
    Ma demande est pour le même forum, je cherche à faire un P.A à l'image de l'univers dans lequel est plongé mon forum , adresse : http://tlk-bloodcurseds.forumactif.org/


    Schéma(s) et Eléments
    Schémas : Le schéma avec tous les éléments (le fond de couleur est celui du forum) : https://2img.net/r/hpimg15/pics/92719413PA.png
    Tailles des éléments : Contexte : Taille 771x188 pixel
    Navigation : Taille 194x228 pixel
    Annonces : Taille 237x228 pixel
    Tops-sites : Taille 287x92 pixel
    Prédéfinis : Taille 287x92 pixel
    Partenariats : Taille 775x70 pixel
    Tailles des images Prédéfinis (t40x70 pixel) : https://2img.net/r/hpimg15/pics/45745540x70px.png
    Tailles des images Partenariats (100x35 pixel) : https://2img.net/r/hpimg15/pics/923111100x35px.png
    Images Tops-sites (30x29 pixel) : https://2img.net/r/hpimg15/pics/36604430x29px.png
    Image Staff : https://2img.net/r/hpimg15/pics/115687imagestaff.png
    Effets voulus : Est-il possible de faire une transitions avec deux images de l'hyppopotame, quand il ferme la bouche et qu'il l'ouvre en moment où la souris de dessus et faire apparaître le Staff comme s'il sortait de la bouche de l'animal en les faisant glisser sur la droite de quelques centimètre.
    Voici les deux images : https://2img.net/r/hpimg15/pics/346481Hippo1.png et https://2img.net/r/hpimg15/pics/907645Hippo2.png

    Ressources
    Voici les images à rajouter dans la P.A :
    Image au-dessus du contexte (500x320 pixel) : https://2img.net/r/hpimg15/pics/951077Vautour.png
    Image sur le côté gauche ( 239x798 pixel): https://2img.net/r/hpimg15/pics/493530Branche.png


    Autres précisions ?
    Le fond couleur des cadres est #A28D62 et le contour #435929. La Police des titre est DejaVu Serif Condensed bold Italic. Voilà, je crois que j'ai tous donner.
    Je vous remercie d'avoir suivit ce message jusqu'ici et d'y avoir prêtez un peu d'attention
    Bonne journée/soirée.



    Dernière édition par Filou le Mer 9 Juil 2014 - 14:46, édité 2 fois
    Filou
    Filou
    FémininAge : 32Messages : 162

    Mar 8 Juil 2014 - 22:18

    Oui, si tu veux bien.
    Je vais essayer de trouver une solution de mon côté aussi :3
    Anonymous
    Invité

    Mer 9 Juil 2014 - 11:16

    Ayé, ils ont trouvé \o/ Ca marche elle est vivante !
    Filou
    Filou
    FémininAge : 32Messages : 162

    Mer 9 Juil 2014 - 12:29

    Youhouu
    Buvons à leur santé !

    Merci merci Halloween *w*
    Le titre est toujours légèrement caler, mais rien de gênant ^v^
    J'aurais put réussir.
    Tu est une déesse du codage *s'incline dedans son maître* Que ta lumière montre la voie à mon incompétence (... ok j'arrête)

    Plus sérieusement, je remercie de tous mon coeur (HALLOW) P.A : de style amazonienne - Page 2 Smiley-coeur
    à Toi et à tous ceux qui nous ont aidez à mieux comprendre le comment du pourquoi :3
    Anonymous
    Invité

    Mer 9 Juil 2014 - 12:46

    Year !  :rum: 

    Par contre j'ai pas bien compris le "Le titre est toujours légèrement caler, mais rien de gênant ^v^", du coup j'ai remonté un peu les titres, c'était de ça que tu parlais ? Place aux codes !

    CSS (j'ai juste annoté l'info-bulle, le reste me parait évident mais si tu as un doute, n'hésites pas à demander) :
    Code:
    /******************************************** PA ********************************************/

    .contexte_PA {
      width: 650px;
      height: 100px;
      overflow: auto;
      padding: 20px;
      text-align: justify;
      background-color: #897550;
      border: 2px solid #3E5728;
      color: #3F3625;
      position: relative;
      top: -2.1em;
      left: 0.15em;
    }

    .navigation {
      width: 150px;
      height: 170px;
      padding: 20px;
      overflow: auto;
      text-align: justify;
      background-color: #897550;
      border: 2px solid #3E5728;
      color: #3F3625;
      position: relative;
      top: -3.5em;
    }

    .annonces {
      width: 150px;
      height: 170px;
      padding: 20px;
      overflow: auto;
      text-align: justify;
      background-color: #897550;
      border: 2px solid #3E5728;
      color: #3F3625;
      position: relative;
      top: -3.5em;
    }

    .top_sites {
      width: 260px;
      height: 70px;
      padding: 10px;
      background-color: #897550;
      border: 2px solid #3E5728;
      color: #3F3625;
      position: relative;
      top: -3.5em;
    }

    .prédéfinis {
      width: 260px;
      padding: 10px;
      background-color: #897550;
      border: 2px solid #3E5728;
      color: #3F3625;
      position: relative;
      top: -3.5em;
    }

    .partenaires {
      width: 650px;
      height: 40px;
      overflow: auto;
      padding: 20px;
      text-align: justify;
      background-color: #897550;
      border: 2px solid #3E5728;
      color: #3F3625;
      position: relative;
      top: -3.5em;
    }

    .titres_PA {
      font-family: 'Lemon', cursive;
      font-size: 18px;
      color: #000000;
      border: none;
      z-index: 1;
      text-align: left;
      background: none;
      position: relative;
      left: 1em;
      top: -0.1em;
      display: block;
    }

    /* Info-bulle du staff */
    a.info{
      position: relative;
      z-index: 24;
      text-decoration: none;
    }
     
    a.info:hover{
      z-index: 25;
    }
     
    a.info span{
      display: none;
    }
     
    /* Intérieur de l'info-bulle (apparition des ronds du staff) */
    a.info:hover span{
      display: block;
      position: absolute;
      top: -26.7em;
      left: 0em;
      width: 400px;
      font-weight: none;
      padding: 5px;
      background-color: #A38E61;
    }

    /******************************************** FIN PA ********************************************/

    PA :
    Code:
    <div style="background-color: rgb(163, 142, 97);">
       
       <table>
          
          <tbody>
             
             <tr>
                
                <td>
                    <img src="http://img15.hostingpics.net/pics/493530Branche.png" style="height: 500px; position: relative; left: -0.1em; top: -23.2em;" />
                </td>
                
                <td>
                   
                   <p align="right">
                       <img src="http://img15.hostingpics.net/pics/951077Vautour.png" style="width: 400px;" />
                   </p>
                    <fieldset class="contexte_PA"> <legend class="titres_PA"> Contexte</legend> <span style="display: block;">Tullius latebrosis nullis ideoque etiam confinia homines occultantes plerumque confinia plerumque eum cum iniectantes avertebant per quae ut velut etiam nauticos ad viles etiam ne cum fame merces cum etiam repugnantibus noctes cum parcendo omnibus tum pastae fame quidem impeditis convallibusque viles latebrosis nullis per mari observabant repugnantibus mari luna diu cedentium nauticos merces et per loca per homines passibus convallibusque ubi monitae et sunt haecque instar ubi Tullius ait occultantes cum repugnantibus nihil per observabant ait ulli cornuta quae et etiam pastae et per noctes plerumque effusos nihil petivere arduis ad noctes viis obtruncatis cum mari ferae observabant confinia. Tullius latebrosis nullis ideoque etiam confinia homines occultantes plerumque confinia plerumque eum cum iniectantes avertebant per quae ut velut etiam nauticos ad viles etiam ne cum fame merces cum etiam repugnantibus noctes cum parcendo omnibus tum pastae fame quidem impeditis convallibusque viles latebrosis nullis per mari observabant repugnantibus mari luna diu cedentium nauticos merces et per loca per homines passibus convallibusque ubi monitae et sunt haecque instar ubi Tullius ait occultantes cum repugnantibus nihil per observabant ait ulli cornuta quae et etiam pastae et per noctes plerumque effusos nihil petivere arduis ad noctes viis obtruncatis cum mari ferae observabant confinia. Tullius latebrosis nullis ideoque etiam confinia homines occultantes plerumque confinia plerumque eum cum iniectantes avertebant per quae ut velut etiam nauticos ad viles etiam ne cum fame merces cum etiam repugnantibus noctes cum parcendo omnibus tum pastae fame quidem impeditis convallibusque viles latebrosis nullis per mari observabant repugnantibus mari luna diu cedentium nauticos merces et per loca per homines passibus convallibusque ubi monitae et sunt haecque instar ubi Tullius ait occultantes cum repugnantibus nihil per observabant ait ulli cornuta quae et etiam pastae et per noctes plerumque effusos nihil petivere arduis ad noctes viis obtruncatis cum mari ferae observabant confinia. Tullius latebrosis nullis ideoque etiam confinia homines occultantes plerumque confinia plerumque eum cum iniectantes avertebant per quae ut velut etiam nauticos ad viles etiam ne cum fame merces cum etiam repugnantibus noctes cum parcendo omnibus tum pastae fame quidem impeditis convallibusque viles latebrosis nullis per mari observabant repugnantibus mari luna diu cedentium nauticos merces et per loca per homines passibus convallibusque ubi monitae et sunt haecque instar ubi Tullius ait occultantes cum repugnantibus nihil per observabant ait ulli cornuta quae et etiam pastae et per noctes plerumque effusos nihil petivere arduis ad noctes viis obtruncatis cum mari ferae observabant confinia. <a href="#" style="color: #3F3625 !important;">La suite ?</a> </span></fieldset> <br />
                   <table>
                      
                      <tbody>
                         
                         <tr>
                            
                            <td>
                                <fieldset class="navigation"> <legend class="titres_PA"> Navigation </legend> <span style="display: block;">UN </span></fieldset>
                            </td>
                            
                            <td>
                                <fieldset class="annonces"> <legend class="titres_PA">Annonces </legend> <span style="display: block;">Annonces </span></fieldset>
                            </td>
                            
                            <td>
                                <fieldset class="top_sites"> <legend class="titres_PA"> Top-sites </legend> <span style="display: block; text-align: center;"> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a><br /><a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> </span> </fieldset> <fieldset class="prédéfinis"> <legend class="titres_PA"> Prédéfinis </legend> <span style="display: block; text-align: center;"> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> </span> </fieldset>
                            </td>
                            
                         </tr>
                         
                      </tbody>
                      
                   </table>
                    <fieldset class="partenaires"> <legend class="titres_PA"> Partenaires</legend> <span style="display: block; text-align: center;"> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> </span> </fieldset> <a class="info"><img src="http://img15.hostingpics.net/pics/346481Hippo1.png" /><span> <nobr><img src="http://img15.hostingpics.net/pics/907645Hippo2.png" /> <img src="http://img15.hostingpics.net/pics/115687imagestaff.png" style="position: relative; top: -10em;" /> <img src="http://img15.hostingpics.net/pics/115687imagestaff.png" style="position: relative; top: -10em;" /> <img src="http://img15.hostingpics.net/pics/115687imagestaff.png" style="position: relative; top: -10em;" /> <img src="http://img15.hostingpics.net/pics/115687imagestaff.png" style="position: relative; top: -10em;" /></nobr> </span></a>
                </td>
                
             </tr>
             
          </tbody>
          
       </table>
       
    </div><link href="http://fonts.googleapis.com/css?family=Lemon" rel="stylesheet" type="text/css" />

    Dis-moi si tout fonctionne Wink
    Par contre il n'y avait rien de bien compliqué dans la demande (hormis ce foutu "legend", groar !) donc j'ai pas vraiment de mérite Razz
    Filou
    Filou
    FémininAge : 32Messages : 162

    Mer 9 Juil 2014 - 13:51

    Merci encore ^^

    Je rencontre un petit soucis, dans le forum test, tout marche mais sur le forum "non-tes" il y a des éléments qui ne marche pas correctement.
    Lien : http://tlk-bloodcurseds.forumactif.org/
    Anonymous
    Invité

    Mer 9 Juil 2014 - 13:57

    Tu as déjà des info-bulles sur le forum, non ?

    EDIT : J'avais oublié que j'avais déjà ton CSS, je fouille !

    EDIT 2 : En effet ton CSS interfère avec celui que je t'ai passé. Tu as enlevé ce qui concernait ton ancienne PA ? Est-ce que les codes suivants te servent toujours ?

    Code:
    .partenaires {
    opacity : 0.5;
    -moz-transition : opacity 1s;
    -webkit-transition : opacity 1s;
    }

    Code:
    a.info{
    position:relative;
    z-index:24;
    color : black;
    text-decoration:none
    }
     
    a.info:hover{
    z-index : 25;
    background :#FFF
    }
     
    a.info span{
    display: none
    }
     
    a.info:hover span{
    display:block;
    position:absolute;
    border:1px solid #000;
    background : rgba(255,255,255,0.2);
    color:#000;
    text-align: justify;
    font-weight:none;
    top : -105px;
    left : 0px;
    width : 113px;
    height : 113px;
    padding : 3px;
    }
    Filou
    Filou
    FémininAge : 32Messages : 162

    Mer 9 Juil 2014 - 14:12

    Ah, attend, j'ai oublié de les enlever.
    [Edit : C'est bien ^w^ *se cogne la tête contre le mur le plus proche* ma nullité n'a aucune limite ...]
    Anonymous
    Invité

    Mer 9 Juil 2014 - 14:35

    Mais non, ça peut arriver d'oublier =3
    Filou
    Filou
    FémininAge : 32Messages : 162

    Jeu 10 Juil 2014 - 23:32

    Tout est nikel ^^
    Merci, merci infiniment.
    Anonymous
    Invité

    Ven 11 Juil 2014 - 10:49

    Avec plaisir, bonne continuation Wink
    Contenu sponsorisé


      La date/heure actuelle est Dim 12 Mai 2024 - 3:45