Un soucis avec les z-index sur mon code

[Invité]

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 !

[Invité]

Bonjour,

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

Cdlt

[Invité]

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.

[Scoubifitz]

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;
}

[Invité]

Parfait ! Merci beaucoup !