salut à tous 
j'ai fait un formulaire et j'ai utiliser la balise xhtml fieldset pour separer des groupe de champs de saisie. j'utilise aussi <legend> pour avoir un titre à chaque partie
lorsque je parametre l'affichage via CSS, j'ai un gros soucis sous IE car le background-color de chaque partie (fieldset) déborde des cadres fieldset par le dessus
le background-color part d'au dessus de la premiere partie et rempli même l'espace entre les deux partie
mieux que des explications fastidieuses, un p'tit xhtml de test
voila le code:
si vous vouyez une solution à mon problème
MERCI D'AVANCE
Modifié par beroots (02 Mar 2006 - 21:54)
j'ai fait un formulaire et j'ai utiliser la balise xhtml fieldset pour separer des groupe de champs de saisie. j'utilise aussi <legend> pour avoir un titre à chaque partie
lorsque je parametre l'affichage via CSS, j'ai un gros soucis sous IE car le background-color de chaque partie (fieldset) déborde des cadres fieldset par le dessus
le background-color part d'au dessus de la premiere partie et rempli même l'espace entre les deux partie
mieux que des explications fastidieuses, un p'tit xhtml de test
voila le code:
<html>
<head>
<title>Formulaire</title>
<style type="text/css">
/* <![CDATA[ */
body {
text-align: center;
background-color: gray;
}
#page {
width : 522px;
margin-left: auto;
margin-right: auto;
color: inherit;
background-color: #ffc;
border: 1px solid black;
text-align: center;
padding: 10px;
}
h3 {
font-family: verdana, helvetica, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
p, label {
font-family: verdana, helvetica, sans-serif; font-size: 10pt;
font-weight: bold;
padding-left: 5px;
text-align: left;
background-color: transparent;
color: black;
}
p.choix {
text-align: right;
}
fieldset {
width: 500px;
background-color: #fc6;
padding: 10px;
text-align: right;
border: 3px double #FF8C00;
margin: 0px;
}
textarea {
font-family: verdana, helvetica, sans-serif;
font-size: 10pt;
border: 1px solid #066;
width: 249px;
height:60pt;
background-color: #ffff99;
color: #333333;
}
select {
font-family: verdana, helvetica, sans-serif;
font-size: 10pt;
border: 1px solid #066;
width: 249px;
height:17pt;
background-color: #ffff99;
color: #333333;
}
input {
border: 1px solid #066;
background-color: #ff9;
color: inherit
}
input.cases {
width: 249px;
}
input.verif {
width: 150px;
}
div.c3 {
text-align:center;
margin-top: 1em;
}
.c2 {
color: #f00;
background-color: inherit;
text-align: center;
font-weight: bold;
display: inline;
}
.c1 {color: #f00;
background-color: inherit;
font-weight: bold;
}
.legende_elmt {
float: left;
}
.info_legal {
font-size: 0.7em;
font-weight: normal;
}
legend {
background-color: #ff9;
border: 3px double #FF8C00;
}
/* ]]> */
</style>
</head>
<body>
<div id="page">
<h3>Complétez les informations pour ajouter votre nom à la liste des membres</h3>
<p>Notez que les champs précédés d'une <span class="c1">*</span> doivent obligatoirement être remplis.</p>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post">
<fieldset><legend><b>:: Données de connexion ::</b></legend>
<label><span class="legende_elmt">Votre pseudo : </span><span class="c2">*</span> <input type="text" name="pseudo" maxlength="20" class="cases" value="" /></label><br />
<label><span class="legende_elmt">Votre mot de pass : </span><span class="c2">*</span> <input type="password" name="pass" maxlength="20" class="cases" value="" /></label><br />
<label><span class="legende_elmt">Confirmation mot de pass : </span><span class="c2">*</span> <input type="password" name="passverif" maxlength="20" class="cases" value="" /></label><br />
</fieldset>
<br />
<fieldset><legend><b>:: Données personnelles ::</b></legend>
<label><span class="legende_elmt">Votre prénom : </span><span class="c2">*</span> <input type="text" name="prenom" maxlength="40" class="cases" value="" /></label><br />
<label><span class="legende_elmt">Votre Nom de famille : </span><span class="c2">*</span> <input type="text" name="nom" maxlength="40" class="cases" value="" /></label><br />
<label><span class="legende_elmt">Votre numéro de téléphone : </span><span class="c2">*</span> <input type="text" name="phone" maxlength="10" class="cases" value="" /></label><br />
<label><span class="legende_elmt">Votre adresse électronique : </span><span class="c2">*</span> <input type="text" name="email" maxlength="40" class="cases" value="" /></label><br />
<label><span class="legende_elmt">Votre code postal : </span><input type="text" name="postal" maxlength="5" class="cases" value="" /></label><br />
<label><span class="legende_elmt">Votre ville : </span><input type="text" name="ville" maxlength="40" class="cases" value="" /></label><br />
<label><span class="legende_elmt">Votre date de naissance : </span><input type="text" name="datenaiss" maxlength="10" class="cases" value="" /></label><br />
<div class="c3">
<input type="submit" class="verif" name="envoi" value="Envoyer" /> <input type="reset" class="verif" value="Recommencer" />
</div>
</fieldset>
</form>
</div>
</body>
</html>si vous vouyez une solution à mon problème
MERCI D'AVANCE
Modifié par beroots (02 Mar 2006 - 21:54)
