Categories

[Invité]

Bonjour,

Comment faire pour que quand on met une longue image dans une categorie, mettre la description dans l'image

Pour vous c'est pas possible mais pour qui y'ai le texte, soit l'image defile et ya le texte, ou alors l'image fait un effet fondu

Merci

[demeter1]

Bonjour MB_Eevee,

Bonjour,

Comment faire pour que quand on met une longue image dans une categorie, mettre la description dans l'image

Code

Code:

<div id="image">
<img src="LIEN IMAGE" />
<h1 class="textimg">TEXTE </h1>
</div>

Css

Code:

.textimg{
position:relative;
top: 00px;
left: 00px;}

Mettre les valeurs top et left pour déplacer le texte. Vous pouvez mettre une valeur négative pour monter, par exemple top:-90px;

Pour vous c'est pas possible mais pour qui y'ai le texte, soit l'image defile et ya le texte, ou alors l'image fait un effet fondu
Merci

C'est possible (voir code plus haut). Pour le reste, cela demande des précisions sur ce que vous voulez réellement.
Le défilement de l'image avec le texte dessus passe par du codage en utilisant la balise marquee.
Le fondu passe par un traitement de l'image.

[Invité]

Cela ne marche point
Et je n'ai pas compris la suite :'(

[demeter1]

Fonctionne. Merci d'aller sur ce forum pour voir le résultat : http://crevettes-passion.forumgratuit.org/

Le défilement que vous demandez dans votre premier sujet est faisable avec la balise marquee

Le fondu est une technique de traitement de l'image donc pour ce point, ce n'est plus du codage . Il faut passer par l'atelier graphique du forum pour obtenir ce que vous voulez et passer commande.

SI j'ai mal interprété votre demande, merci de préciser ce que vous souhaitez. je vous avouerai que la dernière phrase de votre premier message est incompréhensible.

[MlleAlys]

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:

/*IMAGE COULISSANTE DES DESCRIPTIONS*/
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*/
}
/*FIN IMAGE COULISSANTE DES DESCRIPTIONS*/

remplacer les $$$px par les tailles correspondantes, et modifier si besoin la durée de l'effet de transition ^^

[Invité]

Bonjour ! Je vais détailler:

Vous voyez sur ce forum: http://www.animal-crossing.org/ il y'a des catégories avec des longues images ? Quand on passe la souris sur ces images, la description apparaît.
J'aimerais avoir exactement pareil

Mais par contre un truc beaucoup mieux c'ets qu'au lieu que le texte apparaît comme dans l'exemple, j'aimerais si vous pouvais que l'image défile par la gauche et le texte apparaît

Mais bassez vous sur la première demande ^^'

[demeter1]

Dans ce cas, utilisez le code de Mlle Alyss

[Invité]

Malhereusement, il ne fonctionne pas ;(

[demeter1]

Vous avez mis les liens des images et modifié les $$$px ?????

Pensez à fournir les codes que vous avez installé en même temps que vous signalez que cela ne fonctionne pas.

La phrase en elle même ne fait que signaler mais ne fourni aucun élément qui puisse aider le codeur.

Si vous utilisez un forum test pour vos essais , n'oubliez pas de fournir le lien pour qu'une analyse via les outils du navigateur puisse être faite (veillez à ce que le forum ne soit pas en maintenance et qu'une section soit au moins visible en mode invité).

[Invité]

L'histoire c'est que je l'ai essayer puis rien. Le truc c'est que j'avais un ordi mais plus maintenant.

On verra demain. Au passage j'ai pas compris l'histoire des "$$$px"

[demeter1]

et vous faites les modifications avec quoi si vous n'avez plus d'ordi ? Ne me dites pas que vous les faites sur un portable tout de même !!!!!!

Pour les "$$$px" il faut mettre une valeur en pixel à la place: 14 px par exemple

MlleAlys vous a maché voir prédigéré le travail mais il va tout de même falloir travailler pour faire les modifs

[Invité]

J'avais fait les modifications sur mon ordi.

Nous verrons Ca demain

[Invité]

Bonjour,

Je vais vous expliquer ! Regarder une longue image normalement sans le code (PS: Image test)



Vous voyez l'image et le texte en dessous. Moi je veux qu'il y'a l'image et le texte qui apparaît lors d'une action.
J'ai essayé le code et le résultat et le suivant:


 La description a disparu et puis si on pase la souris il y'a rien (PS: C'est normal qu'il y'a deux fois car j'avais oublié d'enlever l'url dans la acse et donc faites comme çi il y'avait que 1 image) Sinon voici le code HTML et page CSS (sachant que je n'ai rien compris au système $$$ du coup j'ai remplacé ça par la taille de l'image:

HTML:

Code:

<div class="contenant">
   
   <div class="contenu">
       Parlez de la communauté (présentation, règles du forums..) Le coin idéal pour les membre c'est ici.
   </div>
    <img src="http://www.sxmsaintmartin.com/plages-saint-martin/photos/baie-longue.jpg" />
</div>

CSS: (vers la fin)

Code:

body {
background-repeat:
}



.mainmenu{
background: #FFFFFF;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
font-family: Georgia, Verdana, Arial, serif;
font-size: 11px;
text-align: center;
padding:0px;
}


.forumline {-moz-border-radius: 19px;
-webkit-border-radius: 19px;
border-radius: 19px;
padding: 7px;
}

a.imginfo {  /* INFOBULLES */
  position: relative;
  color: #000000; /* couleur de votre texte */
  text-decoration: none;
  border-bottom: 0px #000000 solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
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: 10px; /* on positionne notre infobulle */
  left: 20px;
  background: #FFFFFF;
  color: #000000;
  padding: 3px;
  border: 0px solid grey;
  border-left: 3px solid #000000; /* vos couleurs et taille de bordures */
  border-right: 3px solid #000000;
  border-top: 3px solid #000000;
  border-bottom: 3px solid #000000;
}



/* TITRE FORUMS */
        a.forumlink { font-family: georgia;
        font-size: 17px;
        letter-spacing:1px;
        font-weight: bold;
        font-style: italic;
        text-shadow: 1px 1px 1px #FFFFFF;
        border-bottom: solid #000000;
        display: block;
        padding-left: 75px; }



.postbody {padding-left:20px;}




/* ************* LIMITER LA TAILLE DES IMAGES DANS LES SIGNATURES *********** */

.signature_div img {

  max-height:180px;
}



*




.postdetails.poster-profile a img {
border: 8px solid #FFFFFF;
-moz-border-radius:8px;
background-color:#8C906B;
}




-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }



#i_logo {
margin-bottom : -20px;
}






       
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000000;
          background: #C6C6C6;
          border: 1px solid #000000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .mon_onglet:hover{
          background: #561925;
        }       
        .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000000;
          background: #561925;
          border-top: 1px solid #000000;
          border-right: 1px solid #000000;
          border-left: 1px solid #000000;
          border-bottom: 1px solid #000000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .mon_contenu{
          color: #000000;
          background: #C6C6C6;
          border: 1px solid #561925;
          padding: 10px;
          line-height: normal;
          font-size: 11px;}
        #mes_contenus, #mes_onglets{
          width: 530px;
          margin: auto;}



b {
text-shadow: 1px 1px 2px grey;
}

bold {
text-shadow: 1px 1px 2px grey;
}

strong {
text-shadow: 1px 1px 2px grey;
}
 
cadre {
  border-radius: 10px;
}

a { text-decoration: none; }

#nav_barr {
position: fixed; /*--- Cette ligne permet de toujours afficher la barre ---*/
width:900px; /*--- pour régler la largeur de la barre ---*/
background-color: #FFFFFF; /*--- On donne une couleur au fond ---*/
border:1px #FFFFC solid;  /*--- On ajoute une bordure ---*/
margin-left:-450px; /* pour centrer:  largeur divisée par -2 */
left:50%;
-moz-border-radius:0px 0px 10px 10px; /* pour mozilla */
-webkit-border-radius: 0px 0px 10px 10px; /* pour chrome et safari */
border-radius:0px 0px 10px 10px; /* réglage des arrondis */
}a.forumlink:hover {
font-size: 20px;
}
a.fofo1:hover {
font-size: 15px;
}
.mini_ava {
  float: left;
}
.mini_ava img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
 height: 80px;
}
.lastpost-avatar.hide{
        display:none;
}
.fa_avatar {
  width: 25px;
  height: 25px;
  position: relative;
  top: -3px;
  margin-right: 5px;
  border-radius: 3px;
  margin-bottom: -10px;
}
 
     
        .separation
        {
        border: solid 1px #000000;
        }
#av_quickreply img {
    left: 15px;
    position: relative;
    top: 35px;
}
 
#av_quickreply {
    float: left;
    position : absolute;
}
/* Icônes couleur dans la palette */
 
.color-option {
display: inline-block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
border: 2px solid #fff !important;  /* cadre blanc sur l'icône couleur */
margin: 3px !important;  /* espace entre chaque icône */
box-shadow: 0 0 2px #778899;  /* ombre */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
}
.color-option, .color-option span {
border-radius: 2px;  /* arrondi */ 
}
 
/* Palette complète - la largeur influence le nombre d'icônes affichées */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* largeur de la palette complète */
height: 100px !important;  /* hauteur de la palette complète */
padding: 5px !important;
border-radius: 5px !important;
}

/* Début - style pour vérification pseudo à l'inscription */
#username_reg {
  color: #a90c0c;
}
#username_reg.okusername {
  color: #2f9122;
}
/* Fin - style pour vérification pseudo à l'inscription */
.mainmenu {
background-color: transparent !important ;
}
.textimg{
position:relative;
top: 00px;
left: 00px;}
li.useravatar img{border-radius:10px;}
/*IMAGE COULISSANTE DES DESCRIPTIONS*/
div.contenant {
    width:680px;  /*largeur du contenant, la meme que celle de l image*/
    height:300px; /*hauteur du contenant, la meme que celle de l image*/
    position:relative;
    overflow: hidden;
}
 div.contenu {
    width: 680px;  /*largeur du contenu, la meme que celle de l image*/
    height: 300px; /*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*/
}
/*FIN IMAGE COULISSANTE DES DESCRIPTIONS*/

Et au passage voici le lien de l'image test:


Merci ^^'

[demeter1]

Vous avez tout bonnement laissé le css en brut dans une partie du css.

Code:

.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*/
}

Nota : vos images devront être obligatoirement de la même taille d'une image à l'autre.

[Invité]

Bonjour,

Je comprend pas tout du coup j'ai remplacé le code d'avant par celui que vous venait de proposer en changant:

Code:

.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*/
}

Par:

Code:

.contenant img {
    width:680px; /*largeur de l image*/
    height:300px;  /*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*/
}

Et ça fait ça:

[demeter1]

Vous avez encore oublié cette partie.

Code:

.contenant:hover img {  /*au survol de la souris sur le bloc*/
    left: $$$px; /*ici mettre la largeur de l image*/
}

Les instructions de MlleAllys sont pourtant claires.

[Invité]

Y'a marqué:

/*FIN IMAGE COULISSANTE DES DESCRIPTIONS*/

Mais ça fait quoi ? :'(

[demeter1]

Je viens de rééditer mon message précédent; merci d'en prendre connaissance

Pour /*FIN IMAGE COULISSANTE DES DESCRIPTIONS*/ c'est juste un commentaire permettant de signaler la fin de la modification. Cela vous permet de vous repérer dans votre feuille de style. Vous avez également /*IMAGE COULISSANTE DES DESCRIPTIONS*/ qui signale que le css qui va suivre correspond aux modifications désirées.

[Invité]

Je sais que je suis un peu chiant mais comment je peux savoir la largeur de l'image ?
Je suis quand même nouveau et je ne comprend pas tout :/

[demeter1]

Je sais que je suis un peu chiant mais comment je peux savoir la largeur de l'image ?
Je suis quand même nouveau et je ne comprend pas tout :/

C'est pas être chiant; vous ne suivez pas les instructions qu'a laissé Mlle Allys tout simplement.

Pour trouver la taille d'une image, on fait un clic droit sur l'image et on clique sur propriétés. Votre image fait 680px de large pour 300px de haut.

Un peu étrange tout de même que vous posiez cette question alors que vous avez déjà renseigné ces informations déjà plusieurs fois dans votre css.

Par exemple :

Code:

 div.contenu {
    width: 680px;  /*largeur du contenu, la meme que celle de l image*/
    height: 300px; /*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*/
 }

A titre perso, je ne sais ce qui vous arrive mais il va falloir vous concentrer un peu plus sur ce que vous faites.

[MlleAlys]

Bonjour, l'image que vous avez postée dans votre post un peu plus haut ( http://www.sxmsaintmartin.com/plages-saint-martin/photos/baie-longue.jpg ) fait 680px de large et 300px de haut.
Les codes sont donc :

- à copier/coller dans la description du forum :

Code:

<div class="contenant">
    <div class="contenu">VOTRE TEXTE DERRIÈRE L'IMAGE</div>
    <img src="http://www.sxmsaintmartin.com/plages-saint-martin/photos/baie-longue.jpg"/>
</div>

- à copier coller dans la feuille de style css :

Code:

/*IMAGE COULISSANTE DES DESCRIPTIONS*/
div.contenant {
    width:680px;  /*largeur du contenant, la meme que celle de l image*/
    height:300px; /*hauteur du contenant, la meme que celle de l image*/
    position:relative;
    overflow: hidden;
}
 div.contenu {
    width: 680px;  /*largeur du contenu, la meme que celle de l image*/
    height: 300px; /*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:680px; /*largeur de l image*/
    height:300px;  /*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: 680px; /*ici mettre la largeur de l image*/
}
/*FIN IMAGE COULISSANTE DES DESCRIPTIONS*/

et ça doit donner ça : http://jsfiddle.net/UUL62/

[Invité]

Ok et juste comment faire pour que le défilement soit un peu plus lent ?
PS: Appart ça cela marche

[demeter1]

La transition se règle dans cette partie du css

Code:

.contenant img {
    width:680px; /*largeur de l image*/
    height:300px;  /*hauteur de l image*/
    position: absolute;
    top: 0;
    left:0;
    transition: 0.5s;  /*pour l effet de transition duree en seconde*/
}

Il faut modifier la valeur de la transition en fonction de ce que vous désirez obtenir sur cette ligne

Code:

transition: 0.5s;  /*pour l effet de transition duree en seconde*/

[Invité]

Merci, j'annonce enfin ce topic résolu

[demeter1]

Ce fut épique. Pensez à lire les instructions pour la prochaine fois. On a plus de satisfaction de régler les soucis par soi même que de faire un simple copier/coller. Avec cette dernière méthode on apprend rien.

[Chacha]

Merci, j'annonce enfin ce topic résolu

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif

[Invité]

Excusez moi chacha j'avais oublié de cliquer sur le bouton
Merci