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 :
Funko POP! Jumbo One Piece Kaido Dragon Form : où l’acheter ?
Voir le deal

    Codage pour une image de forum.

    Drysfer
    Drysfer
    MasculinAge : 34Messages : 71

    Sam 5 Nov 2011 - 13:09

    Bonjour
    Commande

    Elément à coder : Image de forum

    Adresse du forum : http://fairy-tail-world-rpg.forumsactifs.net/forum

    Description du résultat voulu :
    Spoiler:


    Ce que je voudrais faire c'est que cette image glisse sur la gauche ou la droite n'importe pour qu'au lieu d'avoir le texte en infobulle, il apparaisse à la place de l'image quand cette dernière part. Je l'appliquerais sur toute les images de forum.

    Couleurs ou tons : Je vous donne carte blanches pour la couleur et la police aussi.

    Images : Les taille d'images sont de 350/100 pixels.

    Autres précisions : [si vous avez quelque chose de plus à indiquer...]


    Merci d'avance
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 5 Nov 2011 - 13:39

    Si ta commande est toujours là à mon retour j'essaierai de te le faire en CSS3 Wink (enfin c'est même pas j'essaierai puisque je sais comment procéder). Je suis en plein taff pour la MàJ par contre donc sois patient ^^



    sign
    • Revenir en haut
    Drysfer
    Drysfer
    MasculinAge : 34Messages : 71

    Sam 5 Nov 2011 - 13:48

    Ok ok pas de souci et merci encore ^^



    Codage pour une image de forum. Gc001
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 6 Nov 2011 - 15:39

    Et voilà !

    LE HTML (à mettre dans ta description de catégorie) :

    Code:
    <div class="cate"><div class="cate_img"><img src="http://i166.photobucket.com/albums/u106/chidori-chan_01/onakiri.png" /></div><div class="cate_description">Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.</div></div>
    <div style="clear: both;"></div>


    Le CSS :

    Code:
    .cate
    {
      width: 400px;
      height: 120px;
      overflow: hidden;
      border: 2px solid #000000;
      background-color: #ffffff;
    }
    .cate_img
    {
      position: relative;
      z-index: 2;
      width: 400px;
      height: 120px;
      margin-left: 0px;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .cate:hover .cate_img
    {
    margin-left: 400px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .cate_description
    {
      position: relative;
      z-index: 1;
      width: 400px;
      height: 120px;
      margin-top: -120px;
      text-align: justify;
      font-size: 11px;
      color: #8c8c8c;
      padding: 2px;
    overflow: auto;
    }


    Aperçu : lien



    sign
    • Revenir en haut
    Drysfer
    Drysfer
    MasculinAge : 34Messages : 71

    Lun 7 Nov 2011 - 4:46

    Merci beaucoup c'est exactement ce que je voulais.



    Codage pour une image de forum. Gc001
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Lun 7 Nov 2011 - 9:23

    Avec plaisir^^

    J'archive Wink



    sign
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Sam 27 Avr 2024 - 0:54