Formulaire css
Résolu/Fermé2 réponses
Utilisateur anonyme
2 janv. 2017 à 02:45
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:
Tu peux même en faire une règle générale pour que ça soit toujours le premier élément du fieldset
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
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
voilà le html
page connexion
page inscription
page recherche
page edité un profil
et son css
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
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
merci ca marche je n'avais pas pensé
pour l'autre souci avec les bordure top
j'ai mis
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
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
Comme mon exemple au-dessus il suffit de dire qu'il faut un border-top à tous sauf au premier, donc juste faire:
Après vu que tu as toujours la legend en premier il faut peut-être
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.