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

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

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

Message par Ymai »

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.
Dernière modification par Ymai le 27 juil. 2005, 22:24, modifié 1 fois.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

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).
« La vie d’un geek est un combat perpétuel contre l’imperfection »
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

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

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.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités