Sujet Précédent Sujet Suivant

Formulaire css

Résolu/Fermé
fabrice - 2 janv. 2017 à 00:25
 fabrice - 3 janv. 2017 à 11:12
bonjours j'ai un formulaire avec ce css 

      fieldset
	  {
	  margin-top:1em;
	  display:block;
	  position:relative;
	  %border-top: none !important; /* for IE7, does not work with Webkit */
	  border:1px solid #CCCCCC;
	  padding:0;
	  min-height:50em;
	  }

	  legend
	  {
	  border-bottom:1px solid #CCCCCC;
	  width: 100%;
	  %width: 100% !important; /* for IE7 */
	  position: absolute;
	  top:-1px;
      left: -1px; /* hide the fieldset border */
	  margin: 0px !important; /* suppress all margin rules */
	  line-height: 3em; /* emulating padding-top/bottom */
	  text-indent: 1em; /* emulating padding-left */
	  %left: -8px;
	  font-weight:700;
	  font-size:1.3em;
	  } /* for IE7 */


donc j'ai 3 pages avec une ligne comencant <p> et <div> et dl 

	  fieldset p
	  {
	  margin-top:3.8em;
	  border-top:1px solid #CCCCCC;
	  } /* for IE6 */

	  fieldset div
	  {
	  margin-top:3.8em;
	  padding:1em;
	  overflow:hidden;
	  border-top:1px solid #CCCCCC;
	  } /* for IE6 */


	  fieldset dl
	  {
	  margin-top:3.8em;
	  padding:1em;
	  overflow:hidden;
	  } /* for IE6 */


la premier ligne fonctionne bien

quand je commence a remettre 2 ou 3 eme ligne avec les balises <div> et <p> et dl

je sais qu'il faut mettre 

	  fieldset p + p
	  {
	  margin-top:0em;
/*	  padding:1em;*/
	  border-top:1px solid #CCCCCC;
/*	  border-bottom:1px solid #CCCCCC;*/
	  } /* for IE6 */

	  fieldset div + div
	  {
	  margin-top:0em;
/*	  padding:1em;*/
	  border-top:1px solid #CCCCCC;
/*	  border-bottom:1px solid #CCCCCC;*/
	  } /* for IE6 */


afin dire de mettre un border top sur tout les lignes sauf le 1 er <p> ou <div>
là c'est bon

mais si on a la premier ligne commencent par un dl ensuite la 2 eme ligne par un div
là vous allez dire enlève le margin top donc je sais ça que ça vas marché
mais ca vas se planté sur l'autre page qui commence par un div
car on avait supprimer un margin top 3.8 sur la page ou il y a un dl

mais si on regarde sur l'autre page ca se plante

et pour info

j'ai tester de mettre un marging bottom sur la class légende de 4em mais ca ne marche pas à mon avis c'est à causse de position: absolute;

comment faire ou jonglé sur les 3 balise dl t p et div avec un marging top de 3.8 sur la premier ligne et a partir de la 2 eme ca sera un marging top 0em

merci

2 réponses

Réponse 1 / 2
Utilisateur anonyme
2 janv. 2017 à 02:45
Ça fait longtemps que j'ai plus vu un fieldset.

Sinon sans code HTML c'est difficile de bien visualiser ce que tu veux faire. Car tu nous parles de mettre un margin-bottom sur un legend mais où se trouve ce legend par rapport à tes div/p/dl. Ensuite pour info le margin-bottom s'applique même en position: absolute juste que ça n'a aucun effet sur les autres éléments car en absolute ça sort du flux.

Donc si j'ai bien compris tu veux que le premier élément de ton fieldset est une marge au dessus de 3.8em mais le reste non, donc au lieu de le mettre à tous et de le retirer aux autres pourquoi ne pas faire le contraire? Juste le mettre au premier?

Tu as juste à enlever tout les margin-top et rajouter cette ligne: 

fieldset div:first-child, fieldset p:first-child, fieldset dl:first-child {
    margin-top: 3.8em;
}


Tu peux même en faire une règle générale pour que ça soit toujours le premier élément du fieldset 

fieldset *:first-child {
    margin-top: 3.8em;
}


Et on peut aussi prendre le problème différemment, oublier les margin-top et ajouter un padding-top de 3.8em sur le fieldset
0
Réponse 2 / 2
fabrice
2 janv. 2017 à 09:41
voilà le html

page connexion 

	  <form class="conexion" action="toto.php" method="post" >
	  <fieldset><legend>Se connecter au site</legend>
<div><figure class="photo-connexion"><span class="icon-avatar-conexion-homme"></span></figure></div>
      <p><label class="label-conexion" for="username">Nom d'utilisateur :</label><input class="global-input" type="text" placeholder="Enter Username" id="username" name="username" /></p>
      <p><label class="label-conexion" for="password" title="mot de passe">Mot de Pass :</label><input class="global-input" type="password" placeholder="Enter Password" id="password" /></p>
      <p><input type="checkbox" id="souvenir" name="souvenir" /><label class="labelinput" for="souvenir">Se Souvenir de moi</label></p>
	  <p><input type="checkbox" id="statutenligne" name="statutenligne" /><label class="labelinput" for="statutenligne">Cacher mon statut en ligne</label></p>
	  <div><nav><ul class="menu-vertical">
	                                    <li><a href="" title=" rel="nofollow noopener noreferrer" target="_blank"">J'ai oublié mon mot de passe</a></li>
										<li><a href="" title=" rel="nofollow noopener noreferrer" target="_blank"">Je n'ai pas encore de compte</a></li>
										<li><a href="" title=" rel="nofollow noopener noreferrer" target="_blank"">Je n'ai pas reçus mon lien d'activation pour mon compte</a></li>
										</ul></nav>
	  </div>
	  </fieldset>
	  
   	  <!--Début du boutton de connexion-->
	  <p class="droite"><button type="submit" title="S'identifier"><span class="icon-header-connexion" title="S'identifier"></span>S'identifier</button></p>
	  <!--Fin du boutton de connexion-->
	  </form>


page inscription 

	  <form action="toto.php" method="post" >
	  <fieldset><legend>Informations de connexion</legend>
<p><label class="label-inscription" for="pseudo">Nom d'utilisateur : *</label><input class="global-input" type="text" placeholder="Nom d'utilisateur" name="pseudo" id="pseudo" required />Caractéres autorisés : lettres, chiffres, tiret, point !</p>
	  <p><label class="label-inscription" for="password">Mot de passe : *</label><input class="global-input" type="password" placeholder="Mot de passe" name="password" id="password" required />Veuillez insérer un mot de passe pour votre compte utilisateur.</p>
      <p><label class="label-inscription" for="confirm_mdp">Confirmer le mot de passe : *</label><input class="global-input" type="password" placeholder="Confirmer le mot de passe" name="confirm_mdp" id="confirm_mdp" required />Confirmez votre mot de passe.</p>
	  </fieldset>
	  
	  <fieldset><legend>General</legend>
	  <p><label class="label-inscription" for="prenom">Votre prénom : *</label><input class="global-input" type="text" placeholder="Votre Prénom"  name="prenom" id="prenom" required />Veuillez mettre votre prénom.</p>
	  <p><label class="label-inscription">Votre sexe : *</label><input type="radio" name="sexehomme" id="sexehomme" />Homme <input type="radio" name="sexefemme" id="sexefemme" />Femme</p>
	  <p class="label-inscription-select">Date de naissance : <?php //include "../../select/membre/datenaissance.php"; ?></p>
	  <div class="label-inscription-select">Votre localisation : * </div><?php //include "../../select/membre/localisation.php"; ?>
	  <div class="label-inscription-select">Votre Handicape : * </div><?php //include "../../select/membre/handicape.php"; ?>
	  </fieldset>
	  
	  
	  <fieldset><legend>Antirobot</legend>
	  <p>Recopiez correctement ce code ci-dessous : *</p>
	  </fieldset>
	  <!--Début du boutton de inscription-->
	  <p class="droite"><button type="submit" title="Terminer l'inscription"><span class="icon-header-inscription" title="Terminer l'inscription"></span>Terminer l'inscription</button></p>
	  <!--Fin du boutton de inscription-->
	  </form>


page recherche 

	  <form class="rechercher" action="toto.php" method="post" >
	  <fieldset><legend>Rechercher</legend>
<p><label class="label-rechercher" for="auteur">Rechercher par auteur :</label><input class="global-input" type="text" placeholder="auteur" id="auteur" /></p>
	  <div><label class="label-rechercher" for="mot-cles">Recherche par mots-clées :</label>
	  <ol class="menu-input-radio">
	                               <li><input class="global-input" type="text" placeholder="mot cles" id="mot-cles" name="mot-cles" /></li>
								   <li><input type="checkbox" id="rechercher-terme" name="rechercher-terme" /><label class="labelmini-radio" for="rechercher-terme">Rechercher tous les termes</label></li>
								   <li><input type="checkbox" id="rechercher-tout-terme" name="rechercher-tout-terme" /><label class="labelmini-radio" for="rechercher-tout-terme">Rechercher n'importe lequel de ces termes</label></li>
	  </ol></div>
	  <div><label class="label-rechercher">Rechercher dans les forum :</label><?php //include "../../select/rechercher/forum.php"; ?></div>
      <div><label class="label-rechercher" for="oui">Rechercher dans les sous forums :</label>
	  <ol class="menu-input-radio">
	                               <li><input type="checkbox" id="oui" name="oui" /><label class="labelinput" for="oui">Oui</label></li>
								   <li><input type="checkbox" id="non" name="non" /><label class="labelinput" for="non">Non</label></li>
	  </ol></div>
	  <div><label class="label-rechercher" for="titre-message">Rechercher dans :</label>
	  <ol class="menu-input-radio">
	                               <li><input type="checkbox" id="titre-message" name="titre-message" /><label class="labelinput" for="titre-message">Titres et messages</label></li>
								   <li><input type="checkbox" id="message-uniquement" name="message-uniquement" /><label class="labelinput" for="message-uniquement">Messages uniquement</label></li>
								   <li><input type="checkbox" id="titre-uniquement" name="titre-uniquement" /><label class="labelinput" for="titre-uniquement">Titres uniquement</label></li>								 
								   <li><input type="checkbox" id="sujet-uniquement" name="sujet-uniquement" /><label class="labelinput" for="sujet-uniquement">Premier message des sujets uniquement</label></li>
	  </ol></div>
	  <div><label class="label-rechercher" for="message">Afficher les résultats sous forme de :</label>
	  <ol class="menu-input-radio">
		                           <li><input type="checkbox" id="message" name="message" /><label class="labelinput" for="message">messages</label></li>
								   <li><input type="checkbox" id="sujet" name="sujet" /><label class="labelinput" for="sujet">Sujets</label></li>
	  </ol></div>
	  <div><label class="label-rechercher" for="croissant">Classer les résultats par :</label>
	  <ol class="menu-input-radio">
	                               <li><?php //include "../../select/rechercher/resultat.php"; ?></li>
                                   <li><input class="spanrechercher" type="checkbox" id="croissant" name="croissant" /><label class="labelinput" for="croissant">Croissant</label></li>
								   <li><input class="spanrechercher" type="checkbox" id="decroissant" name="decroissant" /><label class="labelinput" for="decroissant">Décroissant</label></li>
	  </ol></div>
	  <div><label class="label-rechercher">Rechercher depuis :</label><?php //include "../../select/rechercher/depuis.php"; ?></div>
	  <div><label class="label-rechercher">Renvoyer les :</label><?php //include "../../select/rechercher/renvoyer.php"; ?></div>
	  </fieldset>
	  <!--Début du boutton de recherche-->
      <p class="droite"><button type="submit" title="chercher">Chercher</button></p>
	  <!--Début du boutton de recherche-->
	  </form>


page edité un profil 

	  <form action="toto.php" method="post" >
	  <fieldset><legend>Â PROPOS DE MOI</legend>
	  <dl class="profil-editer-stats">
	                                  <dt>PRÉNOM :</dt><dd>Ivan</dd>
									  <dt>SEXE :</dt><dd>Homme</dd>
									  <dt>DATE DE NAISSANCE :</dt><dd><time datetime="2012-02">février 2012</time></dd>
									  <dt>ÂGE :</dt><dd>30 Ans</dd>
									  <dt>SIGNE ASTROLOGIQUE :</dt><dd>Balance</dd>
	  </dl>
	  <div><label class="label-editer-profil" for="handicape">HANDICAPE :</label><?php include "../../select/membre/handicape.php"; ?></div>
      <div><label class="label-editer-profil" for="origine">ORIGINE ETHNIQUE :</label><?php //include "../../select/membre/origineethnique.php"; ?></div>
	  <div><label class="label-editer-profil" for="nationalite">NATIONALITÉ :</label><?php //include "../../select/membre/nationalite.php"; ?></div>
	  <div><label class="label-editer-profil" for="vis">JE VIS :</label><?php //include "../../select/membre/vie.php"; ?></div>
	  <div><label class="label-editer-profil" for="fumeur">FUMEUR :</label><?php //include "../../select/membre/fumeur.php"; ?></div>
	  <div><label class="label-editer-profil" for="romantique">ROMANTIQUE :</label><?php //include "../../select/membre/romantique.php"; ?></div>
	  <div><label class="label-editer-profil" for="animaux">ANIMAUX DE COMPAGNIE :</label><?php //include "../../select/membre/animaux.php"; ?></div>
	  <div><label class="label-editer-profil" for="parler">JE PARLE :</label><?php //include "../../select/membre/parler.php"; ?></div>
	  <div><label class="label-editer-profil" for="profession">PROFESSION :</label><?php //include "../../select/membre/profession.php"; ?></div>-->
      </fieldset>	
	  <p class="gauche"><button type="submit" title="Changer">Changer</button></p>
	  </form>


et son css 

      fieldset
	  {
	  margin-top:1em;
	  display:block;
	  position:relative;
	  %border-top: none !important; /* for IE7, does not work with Webkit */
	  border:1px solid #CCCCCC;
	  padding:0;
	  min-height:50em;
	  }

	  legend
	  {
	  border-bottom:1px solid #CCCCCC;
	  width: 100%;
	  %width: 100% !important; /* for IE7 */
	  position: absolute;
	  top:-1px;
      left: -1px; /* hide the fieldset border */
	  margin: 0px !important; /* suppress all margin rules */
	  line-height: 3em; /* emulating padding-top/bottom */
	  text-indent: 1em; /* emulating padding-left */
	  %left: -8px;
	  font-weight:700;
	  font-size:1.3em;
	  } /* for IE7 */

	  fieldset p
	  {
	  margin-top:3.8em;
	  border-top:1px solid #CCCCCC;
	  } /* for IE6 */

	  fieldset div
	  {
	  margin-top:3.8em;
	  padding:1em;
	  overflow:hidden;
	  border-top:1px solid #CCCCCC;
	  } /* for IE6 */


	  fieldset dl
	  {
	  margin-top:3.8em;
	  padding:1em;
	  overflow:hidden;
	  } /* for IE6 */


	  fieldset p + p
	  {
	  margin-top:0em;
/*	  padding:1em;*/
	  border-top:1px solid #CCCCCC;
/*	  border-bottom:1px solid #CCCCCC;*/
	  } /* for IE6 */

	  fieldset div + div
	  {
	  margin-top:0em;
/*	  padding:1em;*/
	  border-top:1px solid #CCCCCC;
/*	  border-bottom:1px solid #CCCCCC;*/
	  } /* for IE6 */

      dl.profil-editer-stats
	  {
	  font-family: georgia, times, serif;
	  overflow:hidden;
	  margin-bottom:-3.8em;
	  }
	  
	  dt

	  {
	  clear: both;
	  }
	  

	  .profil-editer-stats dt, .profil-editer-stats dd
	  {
	  float: left;
	  margin:0em;
	  font-weight: bold;
	  margin-bottom:1em;
	  padding:1em;
	  border-top:1px solid #CCCCCC;
	  }
	  .profil-editer-stats dt
	  {
	  width:20em;
	  }
	  
	  .profil-editer-stats dd
	  {
	  width:100.4em;
	  }

	  .profil-editer-stats dt + dt
	  {
	  border-top:0;
	  }


tu me diras car hier j'ai tester de margint botton sur la class css mais ca ne marche pas

et ensuite

là il y a des pages en comencant par dl et div sur la 1 er ligne et c'est bon

mais il y a des page le div qui comence sur la 2 éme ligne

coment on aplique pour dire met un marging top 3.8 et 0 em sur le 1 er div qui comence sur la deuxieme ligne malgré 3.8 em sur les 1 er div

tu me diras
0
Utilisateur anonyme
2 janv. 2017 à 19:08
As tu testé le padding-top sur le fieldset au lieu d'un margin-bottom sur le premier élément?
0
fabrice
2 janv. 2017 à 23:35
merci ca marche je n'avais pas pensé

pour l'autre souci avec les bordure top

j'ai mis 

	  fieldset p
	  {
	  border-top:1px solid #CCCCCC;
	  } /* for IE6 */
	  
	  fieldset p + p
	  {
	  border-top:0;
	  }
	  fieldset div
	  {
	  border-top:1px solid #CCCCCC;
	  padding:1em;
	  } /* for IE6 */

	  fieldset div + div
	  {
	  border-top:0;
	  padding:1em;
	  } /* for IE6 */


donc j'ai bien mis p + p ou div + div pour supprimer uniquement les bordure qui se trouve en haut à la première ligne

mais ca ne marche pas
coment peut le dire met tout les bordure que ca soit un div ou dl ou p

sauf s'il se trouve à la 1 er ligne
0
Utilisateur anonyme
Modifié par ZeNairolf le 3/01/2017 à 00:04
Comme mon exemple au-dessus il suffit de dire qu'il faut un border-top à tous sauf au premier, donc juste faire: 

fieldset div, fieldset p, fieldset dl {
    border-top:1px solid #CCCCCC;
}
fieldset div:first-child, fieldset p:first-child, fieldset dl:first-child {
    border-top: 0;
}


Après vu que tu as toujours la legend en premier il faut peut-être 
:nth-child(2)
au lieu de 
:first-child
, je pense que ça marchera.
0
fabrice
3 janv. 2017 à 11:12
merci, ca marche
0

Discussions similaires

Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses
Compte HOTMAIL bloqué . Que faire ?
HAPOKA -
Charliemouse1922 -

27 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses