18073 sujets

Questions générales et questions de débutants

Afficher / Masquer des calques : disparition du scroll [Résolu]

Bonjour,

C'est mon premier sujet, un grand jour ! Ce site est vraiment très riche et les explications très claires ! Merci d'être là !

Voici le topo :
J'ai un tableau d'une ligne et 2 cellules.
A gauche, un menu.
A droite, un calque DIV contenant un texte de bienvenue.
Dans le <body> de cette partie droite, j'ai l'intention de mettre plusieurs <DIV>. Chacun correspondant à une entrée du menu.
J'ai fait un test sur un DIV pour commencer : par défaut, il est affiché, et comme le texte dépasse la taille de ma cellule, la scroll barre s'affiche. C'est exactement ce que je veux, ça tombe bien.
Afficher / masquer :
1/ j'utilise un style .vis1 (visibility:visible) et un .vis2 (visibility:hidden)
2/ Dans mon menu à gauche j'utilise le code suivant :
<p onclick="accueil.className='vis2'" style="font-size:8pt;">Disparition</p>
<p onclick="accueil.className='vis1'" style="font-size:8pt;">Apparition</p>

Résultat : Quand je clique sur "Disparition", mon calque disparaît (jusqu'ici tout va bien ... sauf que bizarrement le menu descend...), et quand je clique sur "Apparition", mon calque apparaît, mais il n'y a plus de scroll. Du coup, tout le texte est affiché et la taille de ma cellule n'est plus celle initialement indiquée...

Quelqu'un aurait-il une solution ????

Remarque 1 : Je ne sais pas comment appliqué le tuto "Afficher/Masquer des calques" (avec le style SPAN) à mon cas, puisque dans l'exemple, il ne s'agit pas d'un DIV.

Remarque 2 : J'ai voulu utiliser les DIV pour changer des IFRAME, car tout le monde me dit d'éviter les cadres....

Merci d'avance !

Voici, au cas où, l'intégralité de ma page (j'y ai copié les styles utilisés) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
  
  .vis1 { visibility:visible }
  .vis2 { visibility:hidden }
  div {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 18pt;
	font-style: normal;
	color: black;
	border: none;
	overflow: auto;
	position: static;
	visibility: visible;
	z-index: auto;
	height: auto;
	width: auto;
	border-style:none;
	border-width:0px;
	padding-left:50px;
	padding-right:100px;
	margin-right:0px;
	margin-bottom:0px;
	margin-top:0px;
	padding-top:0px;
	align:top;
	text-align:justify;
	background-color:#FBAE00;	}
	
	.divtexte {
	width:607px;
	height:375px;
		} 
	body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	line-height: normal;
	font-style: normal;
	color: #5A5A5A;
	border: none;
	overflow: auto;
	position: static;
	visibility: visible;
	z-index: auto;
	height: auto;
	width: auto;
	margin-right: 10px;
	background-color:white; 
	scrollbar-3dlight-color:#606060;
        scrollbar-arrow-color:#FBAE00;
        scrollbar-base-color:#606060;
        scrollbar-darkshadow-color:#606060;
        scrollbar-face-color:#606060;
        scrollbar-highlight-color:#606060;
        scrollbar-shadow-color:#606060	
	margin-left:0px;
	margin-top:0px;
		}
		</style>

</head>

<body>
<table WIDTH=783 height="375">
<tr>
<td WIDTH=100 HEIGHT=375><p onclick="accueil.className='vis2'" style="font-size:8pt;">Disparition</p><p onclick="accueil.className='vis1'" style="font-size:8pt;">Apparition</p></td>
<td valign="top" WIDTH=683 HEIGHT=375>
<div class="divtexte" name="accueil" id="accueil" >SELLE DE CHEVREUIL A LA GROSEILLE 
Posez une belle selle de chevreuil piquée de lardons et bardée dans une marinade faite avec un litre de vin rouge additionné d'une gousse d'ail, de sel et de poivre, de deux carottes émincées, d'un brin d'estragon et de romarin, d'une cuillerée à soupe de cognac et de deux cuillerées à soupe d'huile. Il faut que la selle soit complètement recouverte de marinade. Retournez-la deux fois par jour pendant quatre jours. Faites-la cuire au four après l'avoir égouttée et essuyée, à raison de 15 à 20 mn par kg. Pour la sauce qui doit 
accompagner la selle de chevreuil, hachez quatre oignons, six échalotes et trois belles carottes. Faites bouillir ce hachis dans un peu de vinaigre de vin et un verre de vin blanc sec avec un brin de thym, une feuille de laurier, du sel, du poivre. Portez à ébullition, baissez le feu, couvrez et faites mijoter doucement pendant trois quarts d'heure. Faites un roux avec une noix de beurre, une cuillerée à soupe de farine, mouillez avec la marinade de la selle, ajoutez les échalotes, oignons, carottes cuits à part. Ajoutez un morceau de sucre et un verre de Grand Marnier ou de Chartreuse à cette sauce, que vous passerez au tamis et servirez à part. Entourez la selle d'une bonne purée de pommes de terre posée avec la poche à douille large, garnissez avec du cresson et da la gelée de groseille et servez immédiatement. Temps de préparation: 20 min. 

</div>
</td></tr></table>
</body>
</html>

Modifié par lapeste (12 Aug 2005 - 10:12)
ça y est ! effectivement, je ne vois plus que le bouton "code" maintenant ! j'ai un peu honte...
bon, ben merci et à bientôt !
Je viens de trouver une solution mais j'ai un autre problème :

La solution pour que la scrollbar apparaisse quand nécessaire : repréciser dans les styles .vis1 et .vis2 l'overflow, la width et height.
 .vis1 { visibility:visible;overflow:auto;height:375px;width:607px; }
    .vis2 { visibility:hidden;overflow:auto;height:375px;width:607px; }


Le problème, c'est qu'en réalité, je ne veux pas simplement faire apparaître/disparaître mon DIV. Ok, ça, ça marche.
Mais je voudrais que non seulement mon DIVa disparaisse, mais que dans le même temps, mon DIVb apparaisse...
J'ai essayé en donnant à DIVa le z-index:10 et à DIVb un z-index:9 et ensuite en ajoutant à mon style .vis1 un z-index plus élevé, mais rien ne se passe...
Je vais faire une recherche, c'est le rôle classique des menus donc je devrais trouver !...
En attendand, je vais ajouter l'icône "Résolu" au sujet.
Sujet clos
Aller à