28220 sujets

CSS et mise en forme, CSS3

Texte passant au dessus des balises <Div>

Bonjour, je suis débutant en css et nouveau sur ce foum que j'ai déja consulté à de nombreuses reprise pour ses tuto et les réponses très pertinentes et constructives pour les membres.
Mon problème est le suivant :

Je viens de faire l'affichage d'infobulles quand on passe sur une balise <div>
Ca fonctionne très bien sauf que j'ai le texte de ma page qui passe au dessus de mes infobulles et ca n'est pas très esthétique !!
Vu qu'une image vaut mieux qu'un long discours... Regardez donc par ici : par ici
Je peux bien entend vous montrer le code si besoin. Merci d'avance de votre aide. Smiley smile
Modifié par arnaud_verlaine (17 Nov 2005 - 13:10)
Il me semble qu'il faudrait que tu joues avec les z-index.
Donne à tes parties reactives un 
z-index:0;
et à tes div par dessus un 
z-index:10;

(par exemple)

Je pense par ailleurs que tu pourrais réorganiser ton code html car il est assez confus (mélange de div, table,...), si tu en as la possibilité.
PAs facile de s'y retrouver là dedans Smiley cligne
Monsieur, Merci pour votre réponse.
J'ai essayé de mettre
z-index:0; pour la partie que je survole et un z-index:10; pour l'infobulle (<div>) qui s'affiche mais cela ne change rien...
Avez-vous une autre idée que je pourrais explorer?
D'avance, Merci
Il me semble que le problème est que tes divs sont imbriqués.
Il faut bien séparer dans 2 divs (div réactif et div apparaissant).
Ensuite, pourquoi une classe par section ?
Chaque partie semble identique, tu peux simplifier en adoptant une classe pour les div réactifs, et ensuite une autre pour les div qui apparaissent.
Ainsi tu n'auras qu'une seule ligne pour modifier le z-index.
Oui c'est vrai que le code est un peu confu pour le moment mais en effet je vais réduire tout cela.
Par contre pour le z-index j'ai essayé mais ca ne change rien.
Qu'entendez-vous par séparer les 2 div? Quel serait le code à ajouter/modifier?
Merci
En fait, pour chaque partie, vous avez un div qui contient d'abord le contenu réactif, et également le div contenant la partie à afficher en rollover.
Il faut en faire deux. Schématiquement:
<div class="reactif>intitulé 1</div>
<div class="divover">contenu du div apparaissant 1</div>
<div class="reactif>intitulé 2</div>
<div class="divover">contenu du div apparaissant 2</div>

et en css:
.reactif{
z-index:0;
/*...autres propriétés css...*/
}
.divover{
z-index:10;
/*...autres propriétés css...*/
}

Modifié par yyoupla (17 Nov 2005 - 10:10)
Oui je comprend bien.
Le problème est que j'ai eu le code pour afficher les infobulles et il se compose comme ceci : 


<div class="reactif">
 <a href="#" class="divover">Mon Texte<div>Ici mon infobulle</div></a>
</div>

et donc je ne sais pas comment faire autrement.
Il y a en effet mon div qui a les propriétés (infos) de mon CSS qui est imbriqué dans le div qui contient mon texte.
Avez-vous une solution pour que mon système d'infobulle puisse continuer à fonctionner sans les imbriquer?
Merci d'avance, Smiley smile
Tu peux essayer comme cela
méthode inspirée du topic http://forum.alsacreations.com/faq/#item11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.reactif{
float:left;
margin:1em;
border:1px solid #000000;
}
.reactif a.info {
background-color:#CCCCCC;
padding-left:1em;
padding-right:1em;
text-decoration: none;
color: black;
}
.reactif a.info span {
display: none;
}
.reactif a.info:hover,.reactif a.info:focus,.reactif a.info:active {
background:none;
background-color:#CCCCCC;  /*correction d'un bug IE */
}
.reactif a.info:hover span,.reactif a.info:focus span,.reactif a.info:active span {
display: inline;
position: absolute;
z-index: 500;
margin:2em 0 0 .5em;
background:#FFFFCC;
text-align: center;
color: #000000;
padding: 1em;
border:1px solid #000000;
}
</style>
</head>
<body>
<div class="reactif"><a class="info" href="#"><span>description 1</span>Titre 1</a></div>
<div class="reactif"><a class="info" href="#"><span>description 2</span>Titre 2</a></div>
</body>
</html>
Sujet clos
Aller à