Geckozone

Bonjour
Pour présenter deux volets d'un même formulaire sur une seule page, je souhaite présenter chacune des parties dans un bloc <div>.
En CSS, aucun problème pour faire apparaître, à la demande, l'un ou l'autre bloc et donc, l'un ou l'autre volet dudit formulaire.
Idéalement, cependant, chacun des blocs doit être présenté au même endroit de la page.
J'imagine que le problème est trivial, mais pour le coup, je cale sévère.

L'idée de base est de fixer, tour à tour, la propriété "visibility" de chaque bloc à "hidden" ou à "visible".

J'en suis à qque chose comme ceci:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <script language="javascript">
function swap (c1, c2)
{
document.getElementById(c1).style.visibility = "hidden";
document.getElementById(c2).style.visibility = "visible";
}
  </script>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test</title>
</head>
<body>
Un peu de texte, un peu de texte,...<br>
<form name="form1" method="post" action="test.php">

<div id="cadre1"
 style="background-color: yellow; visibility: visible;"
 onclick="swap('cadre1','cadre2')">
Le contenu du bloc 1
</div>

<div id="cadre2"
 style="background-color: red; visibility: hidden;"
 onclick="swap('cadre2','cadre1')">
Le contenu du bloc 2<br>
Le contenu du bloc 2
</div>

<hr />
[Bouton d'envoi]
</form>
</body>
</html>

mais les deux blocs ne sont pas superposés. De plus (bien que ce soit accessoire), la place occupée est la même, quelle que soit la taille du bloc présenté.
Je serais très reconnaissant aux puits de sciences qui passent par ici de bien vouloir se pencher sur mon soucis.

Essaie plutôt avec la propriété display en la mettant à 'none' ou 'block' selon le cas.

Ne cache pas tes DIV directement en CSS. Affiche-les par défaut, puis, sur l'évènement load du document, cache l'un ou l'autre (raison: si javascript désactivé ou non supporté, aucun des deux blocs ne sera visible à l'utilisateur).

Ca roule parfaitement.
Et dire que j'y ai passé la journée

J'ai mis le bloc 2 en display:none par défaut et l'autre en display:block.
De toute façon, mon appli consomme du javascript un peu partout et est destinée à une application "privée" en intranet. Donc, pas besoin de se préoccuper de la désactivation éventuelle du Javascript.

Un tout grand merci.

Geckozone

[Résolu] CSS: deux blocs en même position

[Résolu] CSS: deux blocs en même position