IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

margin top non pris en compte


Sujet :

CSS

  1. #1
    Membre chevronné

    Homme Profil pro
    développeur
    Inscrit en
    Octobre 2013
    Messages
    1 576
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : développeur

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 576
    Points : 1 989
    Points
    1 989
    Par défaut margin top non pris en compte
    Bonjour a tous,

    Je n'arrive pas a coller mon form avec ma balise h1, je voudrais aussi que mon fieldset soit centrer dans le form

    h1 0px form avec un fond blanc, fieldset avec avec un espace entre chaque coté de 20%.

    Le problème c'est que j'ai toujours un espace entre le h1 et le form même avec un margin, pour le fieldset cela fonctionne pour gauche, bas, droit mais il est collé à la bordure du haut du form comme si le margin top ne fonctionnait pas.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <body>
    	<h1>test</h1>
    	<form method="post" action="/index.php">
    		<fieldset>
    			<input type="text" name="username" id="username" placeholder="utilisateur" />
    			<input type="password" name="password" id="password" placeholder="mot de passe" />
    			<input type="submit" id="submit" value="Connexion" />
    		</fieldset>
    	</form>
    </body>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    body{
      background-color: #E6E6E6 !important;
      font-family: Arial, Helvetica, sans-serif;
      margin-left: 30%;
      margin-top: 5%;
    }
    fieldset
    {
      border: 1px solid lightgrey;
      margin: 10% 10% 10% 10%;
    }
    form
    {
      background-color: #FFF;
      padding-top: 0px;
      width: 40%;
      height: 30vh;
    }

    Merci de votre aide.

  2. #2
    Modérateur
    Avatar de BakSh0
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Août 2014
    Messages
    276
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2014
    Messages : 276
    Points : 1 271
    Points
    1 271
    Par défaut
    Bonjour,

    Je n'ai pas tout compris, si je reprends ta phrase :
    Le problème c'est que j'ai toujours un espace entre le h1 et le form
    Dans ce cas force les marges à 0 :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    h1 {
        margin-bottom: 0;
    }
     
    form {
        margin-top: 0;
    }

    (...) même avec un margin
    Si tu à encore un espace entre ton form et ton H1 c'est peut être des padding, dans ce cas mets les aussi à 0, ou la valeur que tu souhaite.

    En tout cas évite de bosser directement sur body pour la mise en forme, utilise plutôt une DIV globale comme ceci :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>
      <div id="container">
        <h1>test</h1>
        <form method="post" action="/index.php">
          <fieldset>
            <input type="text" name="username" id="username" placeholder="utilisateur" />
            <input type="password" name="password" id="password" placeholder="mot de passe" />
            <input type="submit" id="submit" value="Connexion" />
          </fieldset>
        </form>
      <div>
    </body>
    BakSh0, Modérateur .Net & Web

    Affichez la colorisation syntaxique dans votre code en ajoutant dans votre balise : [CODE=xxx] en remplaçant xxx par le nom du langage.


    N'oubliez pas de consulter les FAQs : .Net / Web et les cours et tutoriels .Net / Web

  3. #3
    Membre chevronné

    Homme Profil pro
    développeur
    Inscrit en
    Octobre 2013
    Messages
    1 576
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : développeur

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 576
    Points : 1 989
    Points
    1 989
    Par défaut
    Merci,

    J'ai essayé de forcé rien ni fait

    Voici le codepen https://codepen.io/jikail/pen/jxOwLz
    Je voudrais le fieldset soit au milieu du rectangle blanc
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      margin: 10% 10% 10% 10%;
    mais on voit bien pour le haut et bat. Meme problème pour l'espace entre test et le formulaire.

    Merci de votre aide.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    tu es en présence d'une « fusion de marge ».

    Pour t'en débarrasser il te faut mettre sur ton <form> un padding:1px ou encore un border:1px solid transparent par exemple, mais il te faut supprimer la height: 30vh.

  5. #5
    Modérateur
    Avatar de BakSh0
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Août 2014
    Messages
    276
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2014
    Messages : 276
    Points : 1 271
    Points
    1 271
    Par défaut
    En effet c'est plus clair avec le codepen

    C'est ça que tu souhaite : https://codepen.io/anon/pen/erYeWQ ?
    BakSh0, Modérateur .Net & Web

    Affichez la colorisation syntaxique dans votre code en ajoutant dans votre balise : [CODE=xxx] en remplaçant xxx par le nom du langage.


    N'oubliez pas de consulter les FAQs : .Net / Web et les cours et tutoriels .Net / Web

  6. #6
    Membre chevronné

    Homme Profil pro
    développeur
    Inscrit en
    Octobre 2013
    Messages
    1 576
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : développeur

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 576
    Points : 1 989
    Points
    1 989
    Par défaut
    Super merci,

    Je ne connaissais pas le fusion de marge j'aimerais centrer le fieldset avec la bordure grise au millieu du background blanc mais il colle le la bordure basse.
    https://codepen.io/jikail/pen/jxOwLz

    Edit :
    J'ai trouvé un padding sur le form et le tour est joué merci pour votre aide.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Margin-top non pris en compte sous ff
    Par orphen dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 08/10/2008, 16h42
  2. margin non pris en compte sous ie7
    Par Emcy dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 03/04/2008, 13h57
  3. [CSS] margin-right non pris en compte
    Par Arnard dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 07/07/2006, 16h20
  4. Accents non pris en compte dans les requêtes SELECT
    Par YanK dans le forum Requêtes
    Réponses: 1
    Dernier message: 30/08/2005, 11h57
  5. [event] keyListener non pris en compte
    Par pierre.zelb dans le forum Agents de placement/Fenêtres
    Réponses: 5
    Dernier message: 03/08/2005, 09h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo