Bug d'affichage avec <div> puis <form>

Bonjour !

Merci pour ce forum, il s'agit de mon premier post, et ça fait plaisir de ce sentir moins seul devant les standarts !

J'ai un soucis avec un formulaire :

but :
je souhaite placer [i]2 formulaires distincts dans une même balise div[/b] afin de faire une bordure englobant les 2 formulaires.

Bug :
La balise <form>, qui suit le <div> contenant la bordure, "bloque" ce div. Le div se ferme donc prématurément juste au dessus de la première balise form. Le cadre n'engloble donc aucun des 2 formulaires et le résultat est inesthétique.

Voir La page affichant ce bug


J'ai réussi en bidouillant à corriger le problème avec IE6.0 :
Voir La page avec l'affichage souhaité avec IE
(j'ai simplement placé width:100% attribué au div de la bordure dans le fichier css )
ce qui me permet de vous montrer l'affichage souhaité.

Mozilla 1.2.1 n'arrive cependant toujours pas à afficher cette page correctement. . .
Je n'ai pas testé, mais j'imagine que ce bug doit aussi ce produire pour les autres navigateurs conformes....

J'ai tourné le probléme dans tous les sens, sans succès.

Si vous voyez des solutions, elles seront les bienvenues !

Modifié le 11 Nov 2004 - 19:05

La balise <fieldset> devrait répondre à tes attentes.

http://www.la-grange.net/w3c/html4.01/interact/forms.html#edef-FIELDSET

Merci pour ta réponse !

En fait, j'avais éffectivement déjà essayé, initialement, avec un vrai [i]fieldset et ça a fonctionné sur IE mais pas sur Mozilla[/b] en empéchant gravement le fonctionnement de la 2nde balise form :
En remplaçant les div de bordure par un fieldset, je ne peux même plus ouvrir (ni sélectionner) les listes déroulantes du deuxieme form (les mois et années du calendrier) avec Mozilla.
Je crois que la balise fieldset a des fonctions spécifiques associées à sa balise form, et on ne peut pas l'utiliser pour avoir juste son aspect esthétique sans s'attendre à des soucis.
Ici le probleme est qu'il y a 2 balises forms à placer dans 1 champ fieldset.
C'est pourquoi j'ai crée cette série de 3 div, imitant l'aspect esthétique du fieldset, afin de pouvoir ranger les 2 balises form au sein d'un même bloc, possédant une bordure.

... une autre idée ? à moins que je me trompe et que ce soit possible avec le fieldset ?? (je vais réessayer à tout hasard...)
Modifié le 11 Nov 2004 - 19:08

ledut a écrit :
Merci pour ta réponse !
Je crois que la balise fieldset a des fonctions spécifiques associées à la balise sa form, et on ne peut pas l'utiliser pour avoir juste son aspect esthétique sans s'attendre à des soucis.
Ici le probleme est qu'il y a 2 balises forms à placer dans 1 champ fieldset.

On ne "place" pas des <form> dans un fieldset, en effet. C'est exactement le contraire: un <fieldset> permet, dans un <form>, de regrouper des contrôles logiquement associés.
Et ce n'est pas du tout un élément de présentation destiné à faire une jolie bordure.

Oui, tachons d'utiliser les balises à bon escient !

Voici la derniere version, qui fonctionne correctement sur IE et Mozilla.

Bug "résolu" en attribuant au div de la bordure, le style height : 14em ; dans le fichier css. C'est-à-dire en forçant l'affichage d'un bloc avec une hauteur déterminée.

ça marche bien si ce n'est que ce n'est pas très dynamique :
j'ai trouvé la valeur 14em par tatonnement, et il est probable que sous d'autres modes affichage (taille du texte, résolution d'écran) on arrive à quelque chose d'assez inesthétique, où le cadre n'aura plus grand chose à voir avec son contenu...

Le post reste ouvert ...
Modifié le 11 Nov 2004 - 16:22

Un tag [Résolu] serait bienvenu dans ton sujet si ton problème est réglé.
Modifié le 22 Nov 2004 - 06:40

Salut Stephan !

Désolé, je me suis mal exprimé en disant :

a écrit :
Bug "résolu"

Malheureusement, je ne considère pas le post ci-présent comme résolu !

la méthode que j'utilise n'est qu'une bidouille :
(cette méthode = dans le css : forcer une hauteur déterminée pour le bloc div contenant la bordure, par ex height :14em, ou height :150px)
- elle ne fonctionne plus pour d'autres résolutions d'écran ou autres modes d'affichage.
- Si je décide de ne plus mettre 4 champs à remplir mais plus de champs, ou moins de champs, ou bien si je mets 2 champs sur la même ligne : je dois modifier les valeurs de la hauteur du bloc contenant la bordure !
- surtout : si j'ai plusieurs groupes de formulaires (différents) au sein d'un même fichier css, je dois alors paramètrer manuellement la valeur de la hauteur du bloc de bordure de chacun ! Ce qui signifie que , je devrai créer une id dans le fichier css pour chacun d'eux et paramèter leur hauteur respective manuellement en tatonnant à chaque fois.

C'est quand même très compliqué pour simplement insérer 2 blocs formulaire (<form>) au sein d'une bordure !

Le problème se présente donc sous la forme :

se qui se passe :
une balise [i]<form> placée après une balise <div> entraine une fermeture prématurée de cette balise <div>[/b]
(car, sur la page qui bugue, la bordure-du-bas du <div> apparait au-dessus du premier formulaire <form>, au lieu d'englober les 2 formulaires).
problème à résoudre : Comment signifier simplement que la balise [i]<div> doit englober le(s) balise(s) <form> qu'elle contient ?? [/b]


Je te promets de rester très vigilant aux réponses qui seront données et de clore ce post comme *Résolu* dès que ce sera le cas !

d'ici là, je reste à l'écoute !
Modifié le 23 Nov 2004 - 19:21

Merci cktoon !

C'est effectivement ce que je cherchais à faire !
Finalement, j'ai modifié ma page et il semblerai que je me sois trompé de "problème" !
j'ai réécris le tout de façon plus schématique et effectivement :
on peut insérer 2 blocs <form> au sein d'un même bloc <div> !
La preuve en image.

Cependant, je n'arrive toujours pas à afficher correctement la présentation que je souhaite : mettre les 2 formulaires [i]cote à cote[/b], comme s'il s'agissait de 2 colonnes distinctes, au sein d'une bordure.

- voici les 2 formulaires l'un à coté de l'autre mais avec un décalage en hauteur en pas d'aspect "en colonne"
(la seule différence avec le précédent : float:left pour le premier formulaire)

- voici les 2 formulaires l'un à coté de l'autre correctement affichés mais n'étant plus insérés dans la bordure !
(la seule différence avec le précédent : float:left pour les 2 formulaires).

Pour ces 3 exemples, l'affichage sur IE et Mozilla est le même.

Vous pouvez voir l'ensemble de la source directement, le style css est inclus dans code html (ma "bordure" est constitée en fait de 3 bordures distinctes, en bleu dans ces exemples)

Le "nouveau" problème semble donc venir de [i]float:left;[/b]

J'ai trouvé un début de solution dans la documentation CSS2, mais je ne comprends pas bien ce que ça signifie (lire en bas de la citation):

a écrit :
9.1.2 Les blocs conteneurs

En CSS2, les positions et les tailles d'un grand nombre de boîtes sont calculées en fonction des bords d'une boîte rectangulaire ; on l'appelle un bloc conteneur. La plupart des boîtes générées se comportent comme des blocs conteneurs pour les boîtes qui en sont les descendantes : on dit que la boîte "établit" le bloc conteneur de ses descendants. L'expression "le bloc conteneur d'une boîte" signifie "le bloc conteneur dans lequel se trouve la boîte", et non la propre boîte que celle-ci génère.

Chaque boîte se voit attribuer une position vis-à-vis de son bloc conteneur, celle-ci n'est pas forcément confinée à l'intérieur de ce conteneur et peut en déborder.

La racine de l'arbre du document génère une boîte qui fait office de bloc conteneur initial pour les constructions subséquentes.

On peut spécifier la largeur du bloc conteneur initial de l'élément racine avec la propriété 'width'. Quand celle-ci a la valeur 'auto', c'est l'agent utilisateur qui fournit cette largeur initiale (par exemple en utilisant la largeur effective de l'espace de visualisation).

On peut aussi spécifier la hauteur du bloc conteneur initial de l'élément racine avec la propriété 'height'. Quand celle-ci a la valeur 'auto', la hauteur du bloc conteneur va s'allonger pour prendre en compte le contenu du document.

Le bloc conteneur initial ne peut pas être positionné ou être flottant (c.à.d., les agents utilisateurs ignorent les propriétés 'position' et 'float' de l'élément racine).

j'ai essayé différents variantes pour corriger ce problème d'affichage (dans le css : margin, padding, position; et dans le code html : <hr />, rajouter un bloque div) mais sans succès.

On est pas loin, mais là, je bloque...

En fait, sur les pages en début de post, le problème venait du fait que le premier formulaire possède l'attribut float:left;. et non pas du fait qu'il y a avait un bloc <div> puis un(des) bloc(s) <form>.
Je modifierai le titre de ce sujet une fois qu'il sera résolu (vérouillé) afin que les internautes qui suivent actuellement cette discussion puisse la retrouver facilement.
Modifié le 26 Nov 2004 - 01:21

PS :
en rajoutant un margin-top:70px; on retrouve l'aspect initial qui faisant faussement croire à une fermeture prématurée du bloc div de la bordure.

Quelqu'un saurait-il alors comment faire pour placer 2 formulaires en 2 colonnes disctinctes et contenues dans une bordure ??

Pour mémoire, ce que j'arrive à faire :
2 formulaires inclus dans 1 bordure, mais pas "en colonnes"
2 formulaires "en colonnes", mais pas inclus dans 1 bordure
Modifié le 27 Nov 2004 - 16:44

J'ai pas regardé le code, j'ai pas lu le topic ( ) mais à tous les coup il te suffit de rajouter un élément avec la propriété clear: both; sous tes formulaires :
http://ledut.free.fr/questioncss/2formulaires2.htm

tu peux ajouter <hr style="clear: both; visibility: hidden " />
Ca devrait le faire
Modifié le 27 Nov 2004 - 16:55

Exact... et l'illustration est là (le hr est volontairement visible pour que tu puisses le visualiser...)

<html>
<head>
<style type="text/css">
.filet {
border:1px solid #cccccc;
padding:10px;
}
#gauche {
float:left;
padding:10px;
background-color:#99FF99;
}
#droite {
float:left;
padding:10px;
margin-left:40px;
background-color:#FFCCCC;
}
.clear {
clear:both;
}
</style>
</head>

<body>
<div class="filet">

<div id="gauche">
<form action="" method="post">
<input name="champ1" type="text" />
<input name="" type="reset" value="Effacer" /> <input name="Valider" type="submit" value="Valider"/>
</form>
</div>

<div id="droite">
<form action="" method="post">
<input name="champ1" type="text" />
<input name="" type="reset" value="Effacer" /> <input name="Valider" type="submit" value="Valider"/>
</form>
</div>

<hr class="clear"/>

</div>
</body>
</html>

Voilà

Merci à tous !

Cet ajout est très judicieux ! C'est presque réussi !
En plaçant la balise [i]<hr/> après le 2ième formulaire[/b] (clear:both; visibility :hidden;), la page s'affiche correctement avec internet explorer :
visualiser la page correctement affichée avec IE.

L'affichage est correcte aussi avec Opéra.
[à noter : il y avait un léger décalage, en escalier, entre les 2 formulaires [voir la capture d'écran sur Opera, réglé par l'ajout d'un margin-top pour chacun 2 des formulaires (avec une valeur identique)].

Malheureusement, Mozilla est laissé en rade, et affiche bien les 2 colonnes distinctes, mais les formulaires débordent sur la bordure
(voici l'equivalent IE du lien ci-dessus lorsqu'on surfe avec Mozilla).

il faut un dernier coup de pouce ! pour un affichage dans la bordure sur mozilla, svp
Modifié le 28 Nov 2004 - 23:25

Je ne suis pas sûr d'avoir bien compris : cette page s'affiche très bien sur Mozila : http://ledut.free.fr/questioncss/2formulaires6.htm

c'est étonant que la page s'afiche correctement chez toi avec Mozilla .

Je parle effectivement de la page http://ledut.free.fr/questioncss/2formulaires6.htm

J'utilse Mozilla 1.2.1 (Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.2.1) Gecko/20021130). voici
la capture d'écran de l'affichage de cette page avec Mozilla depuis mon pc.

qui est bien différente de
ma capture d'écran de l'affichage de cette page avec Internet explorer :

avec Mozilla, on voit que la bordure possède une hauteur plus petite et et que le 2ième formulaire (en rouge) déborde largement en dessous de la bordure.

Quelle version de Mozilla utilises-tu ?
Modifié le 28 Nov 2004 - 23:17

ledut a écrit :

Je parle effectivement de la page http://ledut.free.fr/questioncss/2formulaires6.htm
Quelle version de Mozilla utilises-tu ?

Firefox 1.0

Bon, c'est pas tout-à-fait le même navigateur, ça peut s'expliquer tout ça...

En tout cas, l'affichage fonctionne correctement sur
- IE 6.0
- Opera 7.54
- Firefox 1.0

mais incorrecte sur :
- Mozilla 1.2.1

J'ai presque envie de dire que c'est déjà pas si mal !

si quelqu'un comprend quelque chose à la doc css2 que j'ai cité ci-dessus, ça peut peut-etre aider ???
Modifié le 29 Nov 2004 - 01:26