Un fondu sur les descriptions de forums

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Un fondu sur les descriptions de forums

Message par Eljie le Lun 30 Juin 2014 - 16:13

Bonjour Smile

J'aurais besoin de l'aide de quelqu'un pour me guider dans la personnalisation de notre forum. J'ai tenté de suivre des conseils donnés dans plusieurs sujets qui avaient l'air identiques au mien, sauf qu'au bout d'un moment j'étais un peu perdue dans mes tentatives de codes x)

Voilà, afin de faire ressortir les différentes parties de notre forums, j'ai réalisé une image, que je voudrais placer sur la description. Et je voudrais que cette image coulisse pour laisser apparaître le texte de description lorsque l'on passe la souris dessus Smile


Spoiler:

J'ai obtenu ce résultat, avec le description en dessous, en mettant un code CSS et avec un code dans la description du forum en question et cela m'a donné ce que l'on voit dans l'image.

Merci d'avance pour votre aide Smile


Dernière édition par Eljie le Mer 2 Juil 2014 - 16:47, édité 1 fois

Eljie
Nouveau membre

Messages : 19
Inscrit(e) le : 21/01/2014

http://forum-de-la-cg.forumactif.org/forum
Eljie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un fondu sur les descriptions de forums

Message par Eljie le Mar 1 Juil 2014 - 22:53

Up

Eljie
Nouveau membre

Messages : 19
Inscrit(e) le : 21/01/2014

http://forum-de-la-cg.forumactif.org/forum
Eljie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un fondu sur les descriptions de forums

Message par demeter1 le Mer 2 Juil 2014 - 14:24

@MlleAlys a écrit:Bonjour ^^

Pour une image qui coulisse et lasse apparaitre le texte, si c'était ce qui était demandé, sinon je suis comme demeter1, je suis désolée je n'ai pas compris la demande ^^" :

code html à coller dans la description du forum :
Code:
<div class="contenant">
    <div class="contenu">TEXTE DERRIÈRE L'IMAGE</div>
    <img src="URL DE L'IMAGE"/>
</div>
Remplacer URL DE L'IMAGE par celle de l'image souhaitée.

et le code css à coller dans couleurs > onglet feuille de style css (ici décalage de l'image à droite au survol de la souris) :
Code:
div.contenant {
    width:$$$px;  /*largeur du contenant, la meme que celle de l image*/
    height:$$$px; /*hauteur du contenant, la meme que celle de l image*/
    position:relative;
    overflow: hidden;
}
 div.contenu {
    width: $$$px;  /*largeur du contenu, la meme que celle de l image*/
    height: $$$px; /*hauteur du contenu, la meme que celle de l image*/
    overflow: auto;  /*pour apparition d une barre de defilement si le texte est trop long*/
 }
.contenant img {
    width:$$$px; /*largeur de l image*/
    height:$$$px;  /*hauteur de l image*/
    position: absolute; 
    top: 0;
    left:0;
    transition: 0.5s;  /*pour l effet de transition duree en seconde*/
}
.contenant:hover img {  /*au survol de la souris sur le bloc*/
    left: $$$px; /*ici mettre la largeur de l image*/
}
remplacer les $$$px par les tailles correspondantes, et modifier si besoin la durée de l'effet de transition ^^

Sujet d'origine : http://forum.forumactif.com/t369323-categories

demeter1
+ Hyperactif +

Masculin
Messages : 8231
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un fondu sur les descriptions de forums

Message par Eljie le Mer 2 Juil 2014 - 16:33

Ah super merci beaucoup ! Cette fois c'est parfait (il me reste que quelques détails à faire sur l'image)

Encore merci et bonne journée Smile

Eljie
Nouveau membre

Messages : 19
Inscrit(e) le : 21/01/2014

http://forum-de-la-cg.forumactif.org/forum
Eljie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un fondu sur les descriptions de forums

Message par demeter1 le Mer 2 Juil 2014 - 16:35

De rien Eljie, tout le mérite revient à MlleAlys

demeter1
+ Hyperactif +

Masculin
Messages : 8231
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum