Problème <span> - HTML/CSS - Programmation
Marsh Posté le 31-01-2005 à 21:49:09
Bonjour, J'ai un problème avec le code suivant, les informations affichés dans la balise <span> s'affiche derrière les images. Comment faire pour les afficher devant les images ? Merci
<html> <head> <style type="text/css"> .tooltip { } .img { position: relative; z-index: -1; } .tooltip .tip{ position: absolute; top: 0px; left: 45px; width: 200px; border: 2px solid #aa9900; background-color: #000000; text-decoration: none; font-size: 12px; display: none; } .tooltip .tip .tooltipline { float: left; width: 100%; } .tooltip .tip .tooltipheader { float: left; width: 100%; font-weight: bold; } .item { position: relative; width: 40px; height: 40px; z-index: 1; } .weapon0 { padding: 16px 0 0 69px; float: left; } .weapon1 { padding: 16px 0 0 11px; float: left; } .weapon2 { padding: 16px 0 0 10px; float: left; } </style> <script language="Javascript"> var curTip = ""; function displayToolTip(id) { if( curTip != "" ) { hideToolTip( curTip ); } tip = document.getElementById( id ); tip.style.display="block"; tip.style.zIndex=100; curTip = id; } function hideToolTip(id) { tip = document.getElementById( id ); tip.style.display="none"; curTip = ""; } </script> </head> <body> <div class="weapon0"> <div class="item"> <a class="tooltip" href="#" onMouseover="displayToolTip('1497:0:0:0equipBack')" onMouseout="hideToolTip('1497:0:0:0equipBack')"> <img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img> <span class="tip" id="1497:0:0:0equipBack"> <span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span> <span class="tooltipline" style="color:#ffffff">Dos</span> <span class="tooltipline" style="color:#ffffff">sdfsdfs</span> <span class="tooltipline" style="color:#ffffff">sdfsdfsd</span> <span class="tooltipline" style="color:#ffffff"> </span> </span> </a> </div> </div> <div class="weapon1"> <div class="item"> <a class="tooltip" href="#" onMouseover="displayToolTip('1498:0:0:0equipBack')" onMouseout="hideToolTip('1498:0:0:0equipBack')"> <img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img> <span class="tip" id="1497:0:0:0equipBack"> <span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span> <span class="tooltipline" style="color:#ffffff">Dos</span> <span class="tooltipline" style="color:#ffffff">sdfsdfs</span> <span class="tooltipline" style="color:#ffffff">sdfsdfsd</span> <span class="tooltipline" style="color:#ffffff"> </span> </span> </a> </div> </div> <div class="weapon2"> <div class="item"> <a class="tooltip" href="#" onMouseover="displayToolTip('1499:0:0:0equipBack')" onMouseout="hideToolTip('1499:0:0:0equipBack')"> <img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img> <span class="tip" id="1497:0:0:0equipBack"> <span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span> <span class="tooltipline" style="color:#ffffff">Dos</span> <span class="tooltipline" style="color:#ffffff">sdfsdfs</span> <span class="tooltipline" style="color:#ffffff">sdfsdfsd</span> <span class="tooltipline" style="color:#ffffff"> </span> </span> </a> </div> </div> </body> </html>
Marsh Posté le 31-01-2005 à 21:50:45
c'est illisible
Make sure you enter the(*)required information where indicate.HTML code is not allowed
Marsh Posté le 31-01-2005 à 21:49:09
Bonjour,
J'ai un problème avec le code suivant, les informations affichés dans la balise <span> s'affiche derrière les images.
Comment faire pour les afficher devant les images ?
Merci
<html>
<head>
<style type="text/css">
.tooltip {
}
.img
{
position: relative;
z-index: -1;
}
.tooltip .tip{
position: absolute;
top: 0px;
left: 45px;
width: 200px;
border: 2px solid #aa9900;
background-color: #000000;
text-decoration: none;
font-size: 12px;
display: none;
}
.tooltip .tip .tooltipline {
float: left;
width: 100%;
}
.tooltip .tip .tooltipheader {
float: left;
width: 100%;
font-weight: bold;
}
.item {
position: relative;
width: 40px;
height: 40px;
z-index: 1;
}
.weapon0 {
padding: 16px 0 0 69px;
float: left;
}
.weapon1 {
padding: 16px 0 0 11px;
float: left;
}
.weapon2 {
padding: 16px 0 0 10px;
float: left;
}
</style>
<script language="Javascript">
var curTip = "";
function displayToolTip(id) {
if( curTip != "" ) {
hideToolTip( curTip );
}
tip = document.getElementById( id );
tip.style.display="block";
tip.style.zIndex=100;
curTip = id;
}
function hideToolTip(id) {
tip = document.getElementById( id );
tip.style.display="none";
curTip = "";
}
</script>
</head>
<body>
<div class="weapon0">
<div class="item">
<a class="tooltip" href="#" onMouseover="displayToolTip('1497:0:0:0equipBack')" onMouseout="hideToolTip('1497:0:0:0equipBack')">
<img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img>
<span class="tip" id="1497:0:0:0equipBack">
<span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span>
<span class="tooltipline" style="color:#ffffff">Dos</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfs</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfsd</span>
<span class="tooltipline" style="color:#ffffff"> </span>
</span>
</a>
</div>
</div>
<div class="weapon1">
<div class="item">
<a class="tooltip" href="#" onMouseover="displayToolTip('1498:0:0:0equipBack')" onMouseout="hideToolTip('1498:0:0:0equipBack')">
<img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img>
<span class="tip" id="1497:0:0:0equipBack">
<span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span>
<span class="tooltipline" style="color:#ffffff">Dos</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfs</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfsd</span>
<span class="tooltipline" style="color:#ffffff"> </span>
</span>
</a>
</div>
</div>
<div class="weapon2">
<div class="item">
<a class="tooltip" href="#" onMouseover="displayToolTip('1499:0:0:0equipBack')" onMouseout="hideToolTip('1499:0:0:0equipBack')">
<img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img>
<span class="tip" id="1497:0:0:0equipBack">
<span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span>
<span class="tooltipline" style="color:#ffffff">Dos</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfs</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfsd</span>
<span class="tooltipline" style="color:#ffffff"> </span>
</span>
</a>
</div>
</div>
</body>
</html>
Message édité par Tomef le 31-01-2005 à 21:54:57