Sujets similaires

Bonjour, bonjour ! [RESOLU] informations champs du profil derrière l'avatar, overflow ? 577704309

Je viens aujourd'hui vous poster une demande d'aide [RESOLU] informations champs du profil derrière l'avatar, overflow ? 1616978029

En effet, j'étais toute fière d'un petit code que j'ai "fait" moi-même, le résultat étant exactement ce que je désirais (mais si ça se trouve le code est complètement faux, bien qu'il marche

).

Cela se passe dans le profil, j'ai voulu mettre les champs d'informations juste derrière l'avatar, ainsi on a juste besoin de passer la souris sur l'avatar et celui-ci s'estompe pour laisser place au texte. Seulement, comme vous le remarquerez, pour peu que le membre écrive un peu trop d'informations, le texte ne rentre plus et l'overflow ne marche pas. Car lorsque l'on clique pour déplacer la scrollbar, on ne peut pas puisque théoriquement l'image est toujours affichée sauf qu'on ne la voit pas (opacité étant à 0).

Bref, me voilà dans une impasse et j'espère que vous arriverez à m'aider à trouver la solution. I love you

J'espère que je n'aurais pas à changer totalement et tout refaire le code

D'avance, merci à toute personne qui prendra un peu de son temps pour se pencher sur mon problème [RESOLU] informations champs du profil derrière l'avatar, overflow ? 577704309

L'adresse du forum ici sous hide :

La partie concernée html du profil :

Code:: <center><div class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div></center>
         <span class="postdetails poster-profile">

<div style="position:relative;width:200px; height:320px;">
<div style="position:absolute;z-index:1">
<div class="contenuprofil">
   <div class="champsprofil">
         
         ∞ {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
         
         {postrow.displayed.POSTER_RPG}
      <br />
</div>
<center><div class="contactspro">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} </div></center>
</div>
<div class="avatarfd"> {postrow.displayed.POSTER_AVATAR}</div>
</div></div>
</div>

Et le CSS :

Code:: .contactspro {
background-color:#ffffff;
}

.champsprofil {
height:285px;
}

.name{
font-size: 20px;
font-family: 'Shadows Into Light Two', Times New Roman;
text-shadow: 0px 0px 1px;
text-transform: lowercase;
position:relative; z-index:100; margin-bottom:-10px;
}
.name a{
text-decoration:none;
}

.contenuprofil {
padding:4px;
border: 1px solid #ffffff;
width:190px;
height:310px;
overflow:auto;
}

.avatarfd { position:absolute;
left: 0px;
top:0px;
width:200px;
height:320px;
z-index:2;
overflow:auto;
text-align:justify; }

.postdetails.poster-profile a img:hover {
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; }
.postdetails.poster-profile a img{
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}

Bonjour Eylika !

Je ne me suis pas encore penché sur ton problème en détail, mais de ce que j'ai pu en lire en diagonal je te conseille d'utiliser la propriété display: none conjointement à ton opacité pour que ton image disparaisse en tant qu'entité et non pas seulement visuellement.

Autrement dit, quelque chose du genre :

Code:: .postdetails.poster-profile a img:hover {
opacity: 0;
display: none;
...
}

.postdetails.poster-profile a img{
opacity: 1;
display: block;
...
}

Je ne sais pas si ça résout ton soucis, mais c'est déjà une première piste Wink

N.B : Pour aller plus loin, on pourrait également ajouter la propriété visible: none, mais ce n'est pas indispensable ici.

Salut !

Citation :: mais si ça se trouve le code est complètement faux, bien qu'il marche

Je vais pas te contredire Rolling Eyes

On pourrait mentionner par le fait que la balise center est obsolète et ne devrait donc pas être utilisée, qu'il ne faut jamais mettre d'élément block (div) dans un élément inline (span) (en en parlant de span, y'en a justement un qui a perdu sa balise fermante, et il y a également un /div qui a perdu son div ouvrant), et qu'il serait judicieux que tu sépares complètement le CSS du HTML (donc pas d'attribut style)

Bref, il te faudrait nettoyer un chouia ton code pour commencer histoire d'avoir un peu de lumière sur le problème.

Si j'ai bien suivi, le profil entier se cache sous l'avatar quelle que soit la "taille" dudit profil ? Dans ce cas, l'overflow devrait être sur la classe .champsprofil, c'est lui qui dépasse, pas l'avatar '_'

Déjà, merci pour votre aide à tous les deux !

Espeon, j'ai essayé de mettre les deux propriétés display: none & display: block; mais du coup je perdais tout l'effet. =/

'Christa, j'ai donc suivi ton conseil et nettoyé mon code. J'ai également déplacé l'overflow dans la bonne classe, en effet c'est beaucoup mieux. Laughing

Voici le nouveau :

Code:: <div class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div>
         <div class="postdetails poster-profile">

<div class="posava">
<div class="posavad">
<div class="contenuprofil">
   <div class="champsprofil">
         
         ∞ {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
         
         {postrow.displayed.POSTER_RPG}
      <br />
</div>
<div class="contactspro">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} </div>
</div>
<div class="avatarfd"> {postrow.displayed.POSTER_AVATAR}</div>
</div></div>
</div>

Ainsi que le CSS :

Code:: .contactspro {
background-color:#ffffff; text-align:center;
}

.champsprofil {
height:285px; overflow:auto;
}

.name{
font-size: 20px;
font-family: 'Shadows Into Light Two', Times New Roman;
text-shadow: 0px 0px 1px;
text-transform: lowercase;
position:relative; z-index:100; margin-bottom:-10px;
text-align:center;
}
.name a{
text-decoration:none;
}

.contenuprofil {
padding:4px;
border: 1px solid #ffffff;
width:190px;
height:310px;
}

.avatarfd { position:absolute;
left: 0px;
top:0px;
width:200px;
height:320px;
z-index:2;
overflow:auto;
text-align:justify; }

.postdetails.poster-profile a img:hover {
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; }
.postdetails.poster-profile a img{
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}

.posava {position:relative;width:200px; height:320px; }
.posavad {position:absolute;z-index:1}

Le seul souci désormais c'est que je ne peux pas déplacer la scrollbar en haut ou en bas pour faire défiler le texte. Car l'image est toujours "présente" bien que non visible.. De plus, je viens d'y penser, même si je pouvais cliquer, il me semble que cela me redirigerait directement sur le lien du profil du membre puisqu'il y a un lien sur l'avatar ?

Bonsoir,

Je me demandais, pourquoi ne déplacerais-tu pas le hover ? Tu pourrais cibler ton image et tes champs de texte et déclencherait l'animation lorsque le conteneur des deux divisions (à savoir .contenuprofil et .avatarfd ) sera survolé.

exemple en code:

Code:: .posavad:hover .contenuprofil { /* On cible donc la division contenuprofil dont le parent est survolé*/
position:relative;
z-index:100;/*il passe au premier plan*/

}

.posavad:hover .avatarfd { /* On cible donc la division avatarfd dont le parent est survolé*/
position:relative;
z-index:5;/*il passe à l'arrière plan*/
opacity:0;/*il s'efface*/
}

J'ai simplifié le tout, mais je veux exprimer l'idée.

Bonsoir Chinelle Very Happy

OMG ça marche ! [RESOLU] informations champs du profil derrière l'avatar, overflow ? 577704309

Merci beaucoup !
Pourrais-je abuser de vous en vous demandant comment remettre l'effet "disparition estompée" ? Laughing

Je n'avais absolument pas pensé à cette question mais le problème dans ce cas est que il ne peut pas y avoir de transition entre un changement de z-index (contrairement à l'opacité), du moins pas en CSS3. Donc dans ton cas, avec une transition sur l'opacité, tu n'auras un effet de transition que à la réapparition de l'image, mais pas à sa disparition. Je pense qu'il doit y avoir moyen en s'armant de jquery mais je ne m'y connais pas en la matière. Donc si quelqu'un a une autre solution, je m'incline :/

En en parlant avec une amie, elle m'a donné l'adresse d'un tutoriel sur Never utopia qui donne exactement le même effet que j'ai réussi (avec votre aide) à obtenir. Le scrollbar marche, l'effet disparition de l'avatar progressivement aussi. J'ai adapté leurs codes avec les miens, et c'est donc parfait o/
Problème résolu, merci beaucoup à toutes les personnes qui sont intervenues pour m'aider ! [RESOLU] informations champs du profil derrière l'avatar, overflow ? 577704309

Si ton problème est résolu, je déplace. Very Happy

Merci !

[RESOLU] informations champs du profil derrière l'avatar, overflow ?

[RESOLU] informations champs du profil derrière l'avatar, overflow ?

Sujets similaires

Sujets similaires

Partenaires Or