Image qui chevauche l'avatar dans les messages

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

Résolu Image qui chevauche l'avatar dans les messages

Message par thaom melcrudak le Mer 28 Mai 2014 - 23:05

Bonjour! Fondatrice/phpbb2/opera/css et templates modifiés/ www.ildir.purforum.com

J'aimerais savoir s'il est possible d'ajouter une ou deux images ''par-dessus'', qui chevauche ma section avatar et profil dans les messages, comme des ailes de chaque côté qui viendraient se refermer un peu sur la zone avatar.

merci d'avance

Kim

EDIT: J'ai trouvé où ajouter une image dans mon Template mais il reste un petit problème: Mon avatar passe par-dessus mais pas lorsqu'il est en hover à cause du passage de ma souris(voir partie du css concernée ci-dessous)
css:
 
       .profil_mess
   {
     position: relative;
     z-index: 9;
     width: 186px;
     margin-left: 2px;
     margin-right: 2px;
     margin-top: 2px;
     background-color: #1f222e;
     padding: 1px;
     text-align: center;

     border-radius: 13px;
     -moz-border-radius: 13px;
     -htm-border-radius: 13px;
     -o-border-radius: 13px;
     -webkit-border-radius: 13px;
     border: 1px solid #29292b;
     box-shadow: 0px 0px 5px #000000;
     -moz-box-shadow: 0px 0px 5px #000000;
     -htm-box-shadow: 0px 0px 5px #000000;
     -o-box-shadow: 0px 0px 5px #000000;
     -webkit-box-shadow: 0px 0px 5px #000000;
   }

   .name
   {
     display: block;
     text-transform: capitalize;
     margin-top: -13px;
     margin-bottom: -2px;
     font-size: 16px;
     font-family:Delius Swash Caps;
     text-shadow: 1px 1px 0px #000000;
     padding-bottom: 1px;
     border-bottom: 1px dashed #29292b;
   }

   .avatar_mess
   {

     display: block;
     width: 178px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 2px;
     height: 356px;
     overflow: hidden;
     border: 2px solid #29292b;
     opacity: 0.75;
     -moz-opacity: 0.75;
     -khtml-opacity: 0.75;
     filter: alpha(opacity=75);
     transition: 1s;
     -moz-transition: 1s;
     -o-transition: 1s;
     -htm-transition: 1s;
     -webkit-transition: 1s;
      border-radius: 13px;
     -moz-border-radius: 13px;
     -htm-border-radius: 13px;
     -o-border-radius: 13px;
     -webkit-border-radius: 13px;
 
   }
   .avatar_mess:hover
   {
     opacity: 100;
     -moz-opacity: 100;
     -khtml-opacity: 100;
     filter: alpha(opacity=100);
     transition: 1s;
     -moz-transition: 1s;
     -o-transition: 1s;
     -htm-transition: 1s;
     -webkit-transition: 1s;
   }

   .profil2_mess
   {
     position: relative;
   
     width: 170px;
     margin-left: auto;
     margin-right: auto;
     margin-top: -194px;
     background-color: #161821;
     padding-left: 5px;
     padding-right: 1px;
     text-align: left;

     border-radius: 16px;
     -moz-border-radius: 16px;
     -htm-border-radius: 16px;
     -o-border-radius: 16px;
     -webkit-border-radius: 16px;
     border: 1px solid #29292b;
     
     
     transform: rotate(-180deg);
     -moz-transform: rotate(-180deg);
     -o-transform: rotate(-180deg);
     -htm-transform: rotate(-180deg);
     -webkit-transform: rotate(-180deg);
     transition: 1s;
     -moz-transition: 1s;
     -o-transition: 1s;
     -htm-transition: 1s;
     -webkit-transition: 1s;
   }
   .profil2_mess:hover
   {
     margin-top: -42px;
     transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -htm-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transition: 1s;
     -moz-transition: 1s;
     -o-transition: 1s;
     -htm-transition: 1s;
     -webkit-transition: 1s;
   }
   .profil2_content
   {
     display: block;
     width: 170px;
     height: 185px;
     max-height: 185px;
     overflow: auto;
   }

   

Voici une capture d'écran:

Spoiler:

Est-ce qu'il partage l'opacité réduite de l'avatar ou est-il simplement situé derrière?


Dernière édition par thaom melcrudak le Ven 30 Mai 2014 - 17:39, édité 1 fois

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui chevauche l'avatar dans les messages

Message par [Nihil] le Jeu 29 Mai 2014 - 11:48

Si ton image apparait derrière l'avatar, as tu essayé en lui ajoutant un z-index dans le CSS Smile?

En regardant sur le lien du forum fourni, je ne vois pas du tout les images...
Par contre il y a une div avec la class "sp" avec une image sans source dedans XD. C'est ceci ?

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui chevauche l'avatar dans les messages

Message par thaom melcrudak le Jeu 29 Mai 2014 - 13:49

Oui oui j'ai retiré l'image ce n'était qu'une façon de vous démontrer ce dont je parlais! Oui j'ai essayé z-index, mais quel chiffre devrais-je y placer?

merci ^^

Edit: J'ai trouvé , ça fonctionne avec z-index, merciii ! Je laisse le sujet ouvert quelques heures juste au cas ^^

Edit2: Et si je souhaite ajouter deux images, que dois-je faire? Ajouter une class et tout mais j'ai essayé et mon template à buggué -_-' Sad

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui chevauche l'avatar dans les messages

Message par thaom melcrudak le Ven 30 Mai 2014 - 14:23

up ^^ Toujours d'actualité Smile

Edit: Résolu de mon côté, merci de vos conseils, j'ai pu trouvé grâce à eux!

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak 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