28172 sujets

CSS et mise en forme, CSS3

Afficher/Masquer un bloc dans une page web par CSS

Bonjour tout le monde,
J'ai un soucis et n'ai pas trouvé la solution sur le web ni chez vous.
Voilà, j'ai une page web à cette adresse http://aqua-relaxation.be/faq-block.html
Vous pourrez constater qu'en dessous de la "Question" Pourquoi ...... apparaît un "Bloc" vide, que si on passe le curseur sur cette question , apparaît un bloc rempli de texte.
Je ne comprends pas pourquoi ce bloc vide apparaît. Voici la partie de code CSS concernée :
 /****ceci à été ajouté, pour afficher des blocs ?****/	
 
#bloc {
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
margin:16px;
padding:7px 7px 7px 11px;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
color:#505050; 
font-size:1.1em;
line-height:1.3em;
margin:0;
}

Voici le code de la page 
<!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" xml:lang="en" lang="en">
<head>
  <title>Relaxation aquatique - Pourquoi</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="AQUA RELAXATION,Relaxation aquatique,Stop au stress,Relaxer vous dans l'eau" />
  <meta name="keywords" lang="fr" content="AQUA RELAXATION,relaxation aquatique,d&eacute;tente,relaxation,stress,sommeil,beaut&eacute;,bien-&ecirc;tre,sensation,m&eacute;ditation,massage,Stop au stress,Relaxer vous dans l'eau" />
  <meta name="keywords" lang="en" content="AQUA RELAXATION,relaxation aquatique,d&eacute;tente,relaxation,stress,sommeil,beaut&eacute;,bien-&ecirc;tre,sensation,m&eacute;ditation,massage,Stop au stress,Relaxer vous dans l'eau" />
  <meta name="keywords" lang="nl" content="AQUA RELAXATION,relaxation aquatique,d&eacute;tente,relaxation,stress,sommeil,beaut&eacute;,bien-&ecirc;tre,sensation,m&eacute;ditation,massage,Stop au stress,Relaxer vous dans l'eau" />
  <meta name="category" content="Soins,Relaxation,Massage,Beaute,stress"/>
  <meta name="robots" content="index, follow"/>
  <meta name="distribution" content="global"/>
  <meta name="revisit-after" content="15 days"/>
  <meta name="author" lang="fr" content="Jean-Pierre VAN DAMME/ Adapted from an original design by Andreas Viklund" /> 
  <meta name="expires" content="never"/>
  <link rel="stylesheet" type="text/css" href="aquarelax.css" media="screen,projection" />
  <script language="javascript">
		function display(id,oui_non) {
		var element_style=null
		if (document.getElementById) {element_style=document.getElementById(id).style; } 
		else if (document.all) { element_style=document.all[id].style; } 
		if(element_style) {
		if (oui_non==true) element_style.display="inline";
		if (oui_non==false) element_style.display="none";
    }
}
   </script>
</head>
<body>
  <div id="wrap">
    <div id="header">
      <h1>AQUA RELAXATION</h1>
      <p><strong>par Jean-Pierre VAN DAMME</strong> en formation Watsu<sup>&reg;</sup></p>	
    </div>
    <div id="avmenu">
      <h2 class="hide">Site menu:</h2>
      <ul>
        <li><a href="home.html">Page d'accueil</a></li>	
		<li><a href="avecqui.html">A mon propos</a></li>
		<li><a href="watsu.html">Qu'est le Watsu<sup>&reg;</sup>&nbsp;&nbsp;?</a></li>
        <li><a href="comment.html">Déroulement d'une séance</a></li>
      </ul>  
    </div>
    <div id="contentwide"><p>
    <h2>Questions fréquentes ?</h2>  <br />Placez le curseur sur une des questions reprise ci-dessous, la réponse  apparaîtra<br /><br />
 <a href=""
onMouseOver="display ('faq1',true)" onMouseOut="display('faq1',false)"
onClick="return false"><i>Pourquoi des séances individuelles</i></a>
<br />
<div id="bloc">
<p id="faq1" style="color:blue; display:none;"> <i>Il faut noter qu'il s'agit avant tout de la recherche d’un état de relaxation, de détente profonde et de lâcher-prise. Ceci ne peut se faire que dans une atmosphère de paix et de calme où vous pourrez véritablement vous libérer et vous relaxer profondément.<br />C'est justement pour atteindre cet état que les séances sont individuelles et suivent toujours un même protocole strict. <br />Il n'y a que lorsqu'une séance s'adresse à un enfant que je souhaite la présence (silencieuse et discrète) d'un parent.<br />	 
Ceci est pour vous la garantie que je prends le temps et vois à adapter mes séances à votre profil personnel.</i></p>  
</div> 
 <a href=""
onMouseOver="display('faq2',true)" onMouseOut="display('faq2',false)"
onClick="return false"><i>Première séance</i></a>
</p>
<p id="faq2" style="color:blue; display:none;"><i>	  Lors de la première séance, une série de questions vous seront posées. Elles nous permettront de voir ensemble vos attentes et vos besoins de façon à pouvoir y répondre au mieux. Elles permettront de vérifier que vous ne présentez pas de contre-indications pour cette technique. <br />
Je donne également un bref descriptif du déroulement d'une séance de façon à ce que vous vous sentiez dans un environnement connu.<br />
Il y a ensuite le passage sous la douche avant d'entrer dans la piscine.</i></p><br />
 
	  <p><a href=""
onMouseOver="display('faq3',true)" onMouseOut="display('faq3',false)"
onClick="return false"><i>Essai simple</i></a>
</p> 

  <p id="faq3" style="color:blue; display:none;"><i> Il faut noter qu'il s'agit avant tout de la recherche d’un état de relaxation, de détente profonde et de lâcher-prise. Ceci ne peut se faire que dans une atmosphère de paix et de calme où vous pourrez véritablement vous libérer et vous relaxer profondément.
	  C'est justement pour atteindre cet état que les séances sont individuelles et suivent toujours un même protocole strict. Il n'y a que lorsqu'une séance s'adresse à un enfant que je souhaite la présence (silencieuse et discrète) d'un parent.</i></p>  



			
</div>    
</div> 
    <div id="footer">
        <p>Copyright &copy; Jean-Pierre VAN DAMME |<a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="20" width="60" /></a>| Adapt&eacute; d'un design de <a href="http://andreasviklund.com">Andreas Viklund</a>.</p>
  </div> 
  </body>
  </html>

J'utilise cette solution car je trouve que c'est visuellement mieux lorsque le texte affiché au passage de la souris est dans un bloc et j'aime bien
Je suis débutant en la matière, et les sripts, mise en page etc ont été trouvés sur le Web
Cela fait trois jours que je me triture les méninges pour savoir où j'ai fait une con...ie.
Si quelqu'un pouvait me donner une piste, ce serait super sympa.
NB je n'ai pas testé pour cette page le W3C
Bonne soirée ou nuit,
Jean-Pierre VAN DAMME
Modifié par JPVDCG (02 Apr 2008 - 22:54)
Bonjour,

Je crois qu'il y a un réel problème ergonomique: il est bien plus naturel de cliquer sur l'intitulé pour dérouler son contenu que de l'afficher uniquement au survol; CSS n'a d'ailleurs pas cette vocation.
Un exemple pour afficher et masquer un contenu par un clic sur le titre du bloc:

[#black][b]HTML[/b][/#]


<h2 id="LabelAbout">À propos</h2>

<div id="about" class="show">
	
Contenu de ma division "about".
La classe "show" sert à afficher par défaut le contenu ciblé.
Il peut être omis ou appliqué ailleurs.

</div>

<h2 id="LabelProjects">Réalisations</h2>

<div id="projects">

Contenu de la division "projects".

</div>



[#black][b]CSS[/b][/#]


a {display:block;}

.hide {display:none;}

.show {display:block;}



[#black][b]JavaScript[/b][/#]


function Init(label, id) {
    
	var oContent = document.getElementById(id);
	
	if(oContent.className != 'show')
        oContent.className = 'hide';
	    
	var oTitle = document.getElementById(label), oA = document.createElement('a'),
	    oTxtA = document.createTextNode(oTitle.firstChild.nodeValue);
	oA.href= '#';
	oA.appendChild(oTxtA);
	document.body.replaceChild(oA, oTitle);
	oA.onclick = function() { Display(id); return false; };
};

function Display(id) {
	var oContent = document.getElementById(id);
	oContent.className = (oContent.className == 'hide') ? 'show' : 'hide';
}

window.onload = function() {
   

// -----------------------------------------------
// Liste des titres et des contenus correspondants
// -----------------------------------------------


	Init('LabelAbout', 'about');

	Init('LabelProjects', 'projects');
		

};

Cdt.,
Benjamin De Cock
Modifié par Benjamin D.C. (02 Apr 2008 - 23:10)
Merci pour cette réponse dont une partie est reprise ci-dessous.

a écrit :
Je crois qu'il y a un réel problème ergonomique: il est bien plus naturel de cliquer sur l'intitulé pour dérouler son contenu que de l'afficher uniquement au survol; CSS n'a d'ailleurs pas cette vocation.
Un exemple pour afficher et masquer un contenu par un clic sur le titre du bloc:


Je pourrais être d'accord avec ta vision des choses, mais vais devoir faire des essais sur base de ton code avant de prendre une décision, quel qu'en soit le sens.

Cependant, en attendant, ta réponse ne me donne pas la solution au problème exposé dans ma question. Or ce problème je voudrais le résoudre (même si c'est pour ne pas utiliser la solution par souci d'ergonomie). Je n'aime pas rester sur un échec.
Donc si tu as une solution, ou si quelqu'un en a une ou peu me donner une piste, cela me ferait vraiment plaisir.
Alors à bientôt.
Merci d'avance
Jean-Pierre VAN DAMME
Sujet clos
Aller à