Image qui chevauche l'avatar dans les messages
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Image qui chevauche l'avatar dans les messages
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)
Voici une capture d'écran:
Est-ce qu'il partage l'opacité réduite de l'avatar ou est-il simplement situé derrière?
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
Re: Image qui chevauche l'avatar dans les messages
Si ton image apparait derrière l'avatar, as tu essayé en lui ajoutant un z-index dans le CSS ?
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 ?
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 ?
Re: Image qui chevauche l'avatar dans les messages
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é -_-'
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é -_-'
Re: Image qui chevauche l'avatar dans les messages
up ^^ Toujours d'actualité
Edit: Résolu de mon côté, merci de vos conseils, j'ai pu trouvé grâce à eux!
Edit: Résolu de mon côté, merci de vos conseils, j'ai pu trouvé grâce à eux!
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum