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 :

Positionnements dans une page


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Août 2005
    Messages
    660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Val d'Oise (Île de France)

    Informations forums :
    Inscription : Août 2005
    Messages : 660
    Par défaut Positionnements dans une page
    Bonsoir,

    Je voudrais avoir une photo centré sur ma page, et en dessous 3 photos côte à côte.

    Pour la 1ere photo pas de problème. (Est-ce que cela est correct de centrer la photo
    De cette façon ?)

    La 2ème se positionne au dessous mais n’est pas décaler « margin-left:19.5%; »

    La 3ème et 4ème se positionnent au dessous de la 2ème.

    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
    18
    19
    .photo-1 {
         margin-top:4%;
         margin-left:39%;
         width:22.3%;
         height:175px;
       }
     
    .photo-2 {
        float:left;
        margin-left:19.5%;
        width:19%;
        height:150px;
     
    }
    .photo-3-4 {
         float:left;
         width:19%;
         height:150px;
       }
    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
    <div class="photo-1">
    <img src="Photos-1.gif" width="250" height="175" />
    </div>
     
    <div class="photo-2">
    <img src="Photos-2.gif" width="175" height="250"/>
    </div>
     
    <div  class="photo-3-4">
    <img src="Photos-3.gif" width="175" height="250"/>
    </div>
     
    <div  class="photo-3-4">
    <img src="Photos-4.gif" width="175" height="250"/>
    </div>
    Merci pour votre aide.

    Salutations

  2. #2
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Bonsoir,

    Je dirais que tu t'es un peu compliqué la vie pour rien

    Citation Envoyé par jmde
    Je voudrais avoir une photo centré sur ma page, et en dessous 3 photos côte à côte.
    Il faut savoir que img est un élément de rendu inline (en-ligne) conféré par les feuilles de styles par défaut (celles des navigateurs) via un display:inline.
    Le comportement par défaut des éléments inline c'est de s'aligner côte à côte.

    Dans ce cas pas de soucis pour tes 3 images si tu fais simplement :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <img src="Photos-2.gif" width="175" height="250" alt="" />
    <img src="Photos-3.gif" width="175" height="250" alt="" />
    <img src="Photos-4.gif" width="175" height="250" alt="" />

    Et pour les centrer, il suffit de les englober dans un bloc avec un text-align:center;

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    #conteneur {
    text-align:center;
    }

    Code XHTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <div id="conteneur">
      <img src="Photos-2.gif" width="175" height="250" alt="" />
      <img src="Photos-3.gif" width="175" height="250" alt="" />
      <img src="Photos-4.gif" width="175" height="250" alt="" />
    </div>

    Pour la 1ere image que tu veux garder sur une seule ligne, il faudrait modifier son comportement naturel via un display:block afin qu'elle se comporte comme un élément block et occupe toute la largeur de son conteneur parent, renseigner sa largeur (déjà fait dans le HTML) et la centrer avec les marges automatiques (Dsl pas le temps pour détailler peut-être plus tard )

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    .Ma1erImg {
    display:block;
    margin:4% auto 0;
    }
    Ton code en conclusion :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    #conteneur {
    text-align:center;
    }
     
    .Ma1erImg {
    display:block;
    margin:4% auto 0;
    }

    Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="conteneur">
      <img class="Ma1erImg" src="Photos-1.gif" width="250" height="250" alt="" />
     
      <img src="Photos-2.gif" width="175" height="250" alt="" />
      <img src="Photos-3.gif" width="175" height="250" alt="" />
      <img src="Photos-4.gif" width="175" height="250" alt="" />
    </div>

  3. #3
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Août 2005
    Messages
    660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Val d'Oise (Île de France)

    Informations forums :
    Inscription : Août 2005
    Messages : 660
    Par défaut
    Bonjour Macmillenium,

    Merci pour ta réponse le résultat est super.

    Par contre comme je ne m'attendais pas à ce code
    je n'ai pas précisé dans mon premier post que j'avais
    deux autres rangées de trois photos et la je ni arrive pas.
    De même que pour régler les espaces entre la 1er rangée
    et la 2ème rangée, et entre les photos de la 2éme rangée.

    Salutations.

  4. #4
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Citation Envoyé par jmde Voir le message
    je n'ai pas précisé dans mon premier post que j'avais
    deux autres rangées de trois photos et la je ni arrive pas.
    De même que pour régler les espaces entre la 1er rangée
    et la 2ème rangée, et entre les photos de la 2éme rangée.
    Oui je vois

    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
     
    #conteneur {
    text-align:center;
    }
     
    .Ma1erImg {
    display:block;
    margin:4% auto 0;
    }
     
    .conteneurImg {
    margin-top:2%; /* Un peu d'espace entre le conteneur des img */
    }
     
    .conteneurImg img {
    margin-right:2%; /* Un peu d'espace à droite des img */
    }

    Code xhtml : 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
    20
    21
    22
     
    <div id="conteneur">
       <img class="Ma1erImg" src="Photos-1.gif" width="250" height="250" alt="" />
     
      <div class="conteneurImg">
        <img src="Photos-2.gif" width="175" height="250" alt="" />
        <img src="Photos-3.gif" width="175" height="250" alt="" />
        <img src="Photos-4.gif" width="175" height="250" alt="" />
      </div>
     
      <div class="conteneurImg">
        <img src="Photos-5.gif" width="175" height="250" alt="" />
        <img src="Photos-6.gif" width="175" height="250" alt="" />
        <img src="Photos-7.gif" width="175" height="250" alt="" />
      </div>
     
      <div class="conteneurImg">
        <img src="Photos-8.gif" width="175" height="250" alt="" />
        <img src="Photos-9.gif" width="175" height="250" alt="" />
        <img src="Photos-10.gif" width="175" height="250" alt="" />
      </div>
    </div>

  5. #5
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Août 2005
    Messages
    660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Val d'Oise (Île de France)

    Informations forums :
    Inscription : Août 2005
    Messages : 660
    Par défaut
    Re Bonjour,

    Encore une fois merci.

    Par contre je n'arrive pas à mettre la 1er photo en alignement
    de la 2ème photo de la 2ème rangée ou vice versa.

    A-tu une solution ?

    Salutations

  6. #6
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Citation Envoyé par jmde Voir le message
    Par contre je n'arrive pas à mettre la 1er photo en alignement
    de la 2ème photo de la 2ème rangée ou vice versa.
    Il suffit de jouer sur les marges :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    .conteneurImg img {
    margin-right:2%; /* Un peu d'espace à droite des img */
    }

    Sa devrait aller si tu enlèves le margin-right.
    Le code proposé est à adapté selon tes besoins

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

Discussions similaires

  1. Réponses: 1
    Dernier message: 12/01/2015, 11h08
  2. Détection du positionnement dans une page
    Par SPACHFR dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 19/03/2014, 11h36
  3. pop up positionne dans une page
    Par vallees4 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 05/04/2010, 12h37
  4. Positionnement dans une page
    Par tissard dans le forum Balisage (X)HTML et validation W3C
    Réponses: 14
    Dernier message: 15/07/2008, 10h56
  5. [HTML] Positionnement dans une page web
    Par pasqwal dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 26/10/2006, 15h53

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