Codage pour une image de forum.

Sam 5 Nov 2011 - 13:09

Drysfer

Age : 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

Sam 5 Nov 2011 - 13:39

Sparrow-style

Age : 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 ^^

Sam 5 Nov 2011 - 13:48

Drysfer

Age : 34Messages : 71

Sam 5 Nov 2011 - 13:48

Ok ok pas de souci et merci encore ^^

Dim 6 Nov 2011 - 15:39

Sparrow-style

Age : 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

Lun 7 Nov 2011 - 4:46

Drysfer

Age : 34Messages : 71

Lun 7 Nov 2011 - 4:46

Merci beaucoup c'est exactement ce que je voulais.

Lun 7 Nov 2011 - 9:23

Sparrow-style

Age : 39Messages : 32055

Lun 7 Nov 2011 - 9:23

Avec plaisir^^

J'archive Wink

Contenu sponsorisé

Codage pour une image de forum.

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée