Un soucis avec les z-index sur mon code

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

Résolu Un soucis avec les z-index sur mon code

Message par Mysticals le Sam 8 Mar 2014 - 15:00

Bonjour !

J'ai commencer une page d’accueil en html, et je rencontre un soucis dans la gestion des z-index. J'ai 3 éléments à superposer les uns sur les autres, mais l'un étant lié à un autre, il doit y avoir un conflit de z-index et du coup je n'ai pas le résultat souhaité.

La page d'accueil : http://ultima-nova.forumactif.org

L'html :
Code:
<div id="appelauxarmesimage">
 
<div id="appelauxarmestexte">
 
<div align="center">
 <span style="font-size: 20px;"><em><span style="color: rgb(0, 0, 0);">Bienvenue sur le site de la guilde <strong>Ultima Nova</strong><br /><br />Cette page d'accueil ainsi que le forum sont en cours de construction, le design, la structure et d'autres éléments ne sont pas encore définitif, merci d'en prendre compte. <br /><br />Veuillez vous diriger vers le forum pour continuer votre visite.</span> </em><br /> <br /><strong><a href="http://ultima-nova.forumactif.org/register">[ S'inscrire ]</a><em> <span style="color: rgb(0, 0, 0);">-</span> </em> <a href="http://ultima-nova.forumactif.org/forum">[ Accéder au forum ]</a></strong></span>
</div>
 
</div>
</div>
 
<div id="personnage">
</div>

Le css :
Code:
#appelauxarmesimage {background:url('https://lh3.googleusercontent.com/-DfSlHdUw4es/UxWdK6DGYOI/AAAAAAAAAWk/GemrdTOfw5U/s741/1.png') no-repeat top left;
position:relative;width:600px;height:741px;z-index:-997;margin-left:auto;margin-right:auto;z-index:997;}  

#appelauxarmestexte {font-family:IM Fell English; Verdana;position:relative;top:180;left:90;width:420px;height:350px;z-index:999;}  

#personnage {background:url('https://lh4.googleusercontent.com/-ZPIo_IxgiYg/UxWR8LPCHFI/AAAAAAAAAWU/PMMkuNrOTB0/s600/2.png') no-repeat bottom left;
position:fixed;bottom:0px;left:0px;width:600px;height:416px;z-index:998;}  

Ce que je voudrais, c'est que mon texte soit par dessus le personnage, pour pouvoir cliquer sur les 2 liens. J'avais essayer quelques bricolages qui fonctionnais, mais soit le texte se positionnais ailleurs, soit c'était le fond du texte ( le parchemin ) qui s'en allais.

C'est le z-index, ou les positions ( relative, fixed ou absolute ) qui crée un conflits, mais je n'arrive pas à le résoudre.

Help, et merci ! Smile


Dernière édition par Mysticals le Dim 9 Mar 2014 - 2:56, édité 1 fois

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un soucis avec les z-index sur mon code

Message par Kinotto le Sam 8 Mar 2014 - 15:02

Bonjour,

Le forum n'est pas ouvert, pouvez-vous laisser l'accès ou fournir une capture ?

Cdlt

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un soucis avec les z-index sur mon code

Message par Mysticals le Sam 8 Mar 2014 - 15:08

Bizarre, il est ouvert depuis des jours, j'ai des inscriptions, posts, tout ça...

Je vous ai quand même fait un screenshot :



On vois bien que le lien "S'inscrire" est derrière le personnage, hors je le voudrais devant. D'après le css, il devrais l'être, mais comme la div texte est incluse dans la div image, il y a conflit... J'avais essayer de séparer les 2, cela fonctionnais, mais j'avais soit le texte soit l'image qui partait ailleurs.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un soucis avec les z-index sur mon code

Message par Scoubifitz le Dim 9 Mar 2014 - 0:56

bonsoir,

un petit test ?

Code:
<div id="appelauxarmesimage">

<div id="personnage"></div>

<div id="appelauxarmestexte">
<span>Bienvenue sur le site de la guilde <strong>Ultima Nova</strong><br /><br />
Cette page d'accueil ainsi que le forum sont en cours de construction, le design, la structure et d'autres éléments ne sont pas encore définitif, merci d'en prendre compte. <br /><br />
Veuillez vous diriger vers le forum pour continuer votre visite.<br /> <br />
<a href="http://ultima-nova.forumactif.org/register">[ S'inscrire ]</a>- <a href="http://ultima-nova.forumactif.org/forum">[ Accéder au forum ]</a></span>

</div>
</div>

et le CSS qui l'accompagne :

Code:
#appelauxarmesimage {
background:url('https://lh3.googleusercontent.com/-DfSlHdUw4es/UxWdK6DGYOI/AAAAAAAAAWk/GemrdTOfw5U/s741/1.png') no-repeat top left;
position:relative;
width:600px;
height:741px;
margin-left:auto;
margin-right:auto;
z-index:997;
}
       
#appelauxarmestexte {
font-family:IM Fell English Verdana;
text-align:center;
position:relative;
top:180;
left:90;
width:420px;
height:350px;
z-index:999;
}
#appelauxarmestexte span{
font-size: 20px;
color: rgb(0, 0, 0);
text-shadow:0 0 4px White;
font-style:italic;
}
#appelauxarmestexte a{
font-weight: bold;
font-style:normal;
}
       
#personnage {
background:url('https://lh4.googleusercontent.com/-ZPIo_IxgiYg/UxWR8LPCHFI/AAAAAAAAAWU/PMMkuNrOTB0/s600/2.png') no-repeat bottom left;
position:fixed;
bottom:0px;
left:0px;
width:600px;
height:416px;
z-index:998;
}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un soucis avec les z-index sur mon code

Message par Mysticals le Dim 9 Mar 2014 - 2:01

Parfait ! Merci beaucoup ! Very Happy

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals 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