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 :

section avec margin-bottom.


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Développeur Java
    Inscrit en
    Juin 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Juin 2012
    Messages : 13
    Par défaut section avec margin-bottom.
    Bonjour voici mon problème:
    Je n'arrive pas à mettre un margin-bottom à ma première section:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <section id="conteneurPrincipal"></section>
    <section id="conteneurResultat"></section>
    Code : 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
    #conteneurPrincipal {
    	background-image: url("../img/fond.jpg");
    	background-repeat: no-repeat;
    	border: solid 7px white;
    	clear: left;
    	height: 360px;
    	margin-bottom: 50px;
    	margin: auto;
    	width: 970px;
    }
     
    #conteneurResultat {
    	border: solid 7px white;
    	background-color: white;
    	margin: auto;
    	width: 970px;
    }

  2. #2
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Octobre 2013
    Messages : 24
    Par défaut
    Bonjour,

    Essaye de déclarer ton margin-bottom seulement après ton margin : auto.
    Ça devrais résoudre ton problème.

    Par contre je ne saurais pas vraiment expliquer pourquoi c'est ainsi... Si quelqu'un à la réponse d'ailleurs je suis preneur.

    Code : 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
    #conteneurPrincipal {
    	background-image: url("../img/fond.jpg");
    	background-repeat: no-repeat;
    	border: solid 7px white;
    	clear: left;
    	height: 360px;
    	margin: auto;
    	margin-bottom: 50px;
    	width: 970px;
    }
     
    #conteneurResultat {
    	border: solid 7px white;
    	background-color: white;
    	margin: auto;
    	width: 970px;
    }

  3. #3
    Membre averti
    Homme Profil pro
    Développeur Java
    Inscrit en
    Juin 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Juin 2012
    Messages : 13
    Par défaut
    Merci le problème est résolu.

  4. #4
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Pourquoi cette déclaration ne prend pas en compte le margin-bottom ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
      margin-bottom: 50px;
      margin: auto;
    alors que celle-ci oui :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
      margin: auto;
      margin-bottom: 50px;
    Je dirais que la priorité est donnée, par le navigateur, à la dernière déclaration dans le cas d'une redondance de définition. Margin:auto prend donc dans le premier cas la priorité sur margin-bottom.

    Cependant cette écriture (même si elle donne un résultat dans le 2ème cas) n'est pas bonne.
    Il faudra privilégier celle-ci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 50px;

  5. #5
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Pour la version réduite
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  6. #6
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Octobre 2013
    Messages : 24
    Par défaut
    Merci pour la précision

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

Discussions similaires

  1. [IE] Répète le margin-bottom
    Par Bisûnûrs dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 21/03/2007, 19h53
  2. margin-bottom non voulu sous IE
    Par vraipolite dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 08/02/2007, 17h07
  3. Section avec tableau et graphe
    Par frederic_s dans le forum Deski
    Réponses: 12
    Dernier message: 26/12/2006, 15h34
  4. Print() avec Margins, manque une propriété
    Par winow dans le forum C++Builder
    Réponses: 2
    Dernier message: 30/05/2006, 19h26
  5. [XHTML]Problème avec <img> et margin-bottom
    Par Locelot dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 12/09/2005, 22h02

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