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 :

Alignement réactif de 10 blocs en 5 colonnes et 2 lignes


Sujet :

Positionnement en CSS

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Novembre 2008
    Messages
    126
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2008
    Messages : 126
    Points : 57
    Points
    57
    Par défaut Alignement réactif de 10 blocs en 5 colonnes et 2 lignes
    Bonsoir.
    Désolé, mon code dois être Horrible mais il fonctionne en partie :
    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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
     
    <div class="diapcentre">
        <div class="diapgauche2">
        <img src="images/Images/DEV/DEV1.jpg"/>
        	<div class="diapcentre">
        	BLABLA
        	</div>
        </div>
        <div class="diapgauche2">
        <img src="images/Images/DEV/DEV2.jpg"/>
        	<div class="diapcentre">
        	BLABLA
        	 </div>
        </div>
        <div class="diapgauche2">
        <img src="images/Images/DEV/DEV3.jpg"/>
        	<div class="diapcentre">
        	BLABLA
        	 </div>
        </div>
        <div class="diapgauche2">
        <img src="images/Images/DEV/DEV4.jpg"/>
        	<div class="diapcentre">
        	BLABLA
        	 </div>
        </div>
        <div class="diapgauche2">
        <img src="images/Images/DEV/DEV5.jpg"/>
        	<div class="diapcentre">
        	BLABLA
        	 </div>
        </div> 
    </div>
    et CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    .diapcentre {
    text-align: center; 
    }
    .diapgauche2 {
    float:left;
    }

    Mon besoin se porte sur le fait d'aligner au centre 5 blocs par rapport à la page et d'ajouter un texte en dessous de chaque bloc, centré par rapport à son bloc du dessus de sorte à faire en pleine largeur :

    IMG1 IMG2 IMG3 IMG4 IMG5
    TEX1 TEX2 TEX3 TEX4 TEX5

    et de façon réactive tablette par exemple :

    IMG1 IMG2 IMG3
    TEX1 TEX2 TEX3
    ___IMG4 IMG5
    ___TEX4 TEX5

    et de façon réactive smartphone par exemple :

    IMG1
    TEX1
    IMG2
    TEX2
    IMG3
    TEX3
    IMG4
    TEX4
    IMG5
    TEX5

    Le code fourni ci-dessus gère tout cela très bien mais impossible de centrer cet ensemble de blocs au centre de la page, ça reste sur la gauche.
    Par quoi remplacer .diapgauche2 {float:left;} sachant qu'un float middle ou center n'existe pas?!!

    EDIT : je viens également de voir que le texte BLABLA si plus long ne fais de retour à la ligne pour respecter la largeur du bloc du dessus! Je suis mal barré!!!

    Merci!!!!!

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    ça va bien aussi avec les bonnes balise HTML5 :
    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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <div class="diapcentre">
      <figure>
        <img src="http://www.developpez.net/template/images/logo.png" />
        <figcaption>
          BLABLA 1
        </figcaption>
      </figure>
      <figure>
        <img src="http://www.developpez.net/template/images/logo.png" />
        <figcaption>
          BLABLA 2
        </figcaption>
      </figure>
      <figure>
        <img src="http://www.developpez.net/template/images/logo.png" />
        <figcaption>
          BLABLA 3
        </figcaption>
      </figure>
      <figure>
        <img src="http://www.developpez.net/template/images/logo.png" />
        <figcaption>
          BLABLA 4
        </figcaption>
      </figure>
      <figure>
        <img src="http://www.developpez.net/template/images/logo.png" />
        <figcaption>
          BLABLA 5
        </figcaption>
      </figure>
    </div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     .diapcentre {
       text-align: center;
     }
     .diapcentre > figure {
       float: left;
       padding: 0;
       margin: 0;
     }
     .diapcentre > figure img {
       width: 100%;
     }
    Responsive :
    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
    /* desktop */
    @media screen and (min-width:1024px) {
     .diapcentre > figure {
       width: 20%;
     }
    }
    /* tablet */
    @media screen and (min-width:641px) and (max-width:1023px) {
     .diapcentre > figure {
       width: 33.33%;
     }
    }
    /* phone */
    @media screen and (max-width:640px) {
     .diapcentre > figure {
       width: 50%;
     }
    }

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Novembre 2008
    Messages
    126
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2008
    Messages : 126
    Points : 57
    Points
    57
    Par défaut
    Pas mal du tout ça!!!!
    Deux critiques :
    • Ca ne centre pas les blocs qui passent en dessous lors du réactif.
    • Ca m’intègre le contenu qui suit cet ensemble de bloc, je vais tenter un clear:both = résolut via l'ajout de <div style="clear:both;"></div>

    Merci!

  4. #4
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2016
    Messages : 39
    Points : 87
    Points
    87
    Par défaut
    Bonjour josse34,

    Si tu n'as pas d'impératif que tes éléments soient précisément collés les uns aux autres, je te conseilles d'envisager le display inline-block plutôt que le float left, tu as plus de chances d'obtenir le résultat que tu recherches.

    Un float sera toujours du côté indiqué, donc jamais centré.

    edit : si tu n'as pas d'impératif de compatibilité, essaie les propriétés du display flex, c'est pas mal non plus

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    avec centrage, quelques modif. de mon code ci-dessus : http://codepen.io/jreaux62/pen/mVKNyj
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
      </figure><!--
      --><figure>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     .diapcentre > figure {
       display: inline-block;
       padding: 0;
       margin: 0;
     }
    N.B. On ajoute <!-- et --> pour supprimer l'espace dû au inline(-block).

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Novembre 2008
    Messages
    126
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2008
    Messages : 126
    Points : 57
    Points
    57
    Par défaut
    Mille merci mais avec ces modifications, c'est chaque ensemble image et texte qui se centrent, je préfère la précédente version ou les images sont centrées entre elles et le texte en dessous.

  7. #7
    Invité
    Invité(e)
    Par défaut
    bonjour,

    une solution : http://codepen.io/jreaux62/pen/WrKyxG
    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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    .diapcentre {
       text-align: center;
     }
     
     .diapcentre > figure {
       position: relative;
       display: inline-block;
       padding: 0;
       margin: 0;
       margin-bottom: 70px; /* hauteur légende + 20px */
       border: 1px dotted #ccc;
       box-sizing: border-box; /* nécessaire à cause du border */
     }
     
     .diapcentre > figure img { /* image */
       display: inline-block;
       max-width: 100%;
       max-height: 200px;
     }
     
     .diapcentre > figure figcaption { /* légende */
       position: absolute;
       width: 100%;
       bottom: -50px;
       height: 50px;
     }
     /* desktop */
     @media screen and (min-width:1024px) {
       .diapcentre > figure {
         width: 20%;
       }
     }
     /* tablet */
     @media screen and (min-width:641px) and (max-width:1023px) {
       .diapcentre > figure {
         width: 33.33%;
       }
     }
     /* phone */
     @media screen and (max-width:640px) {
       .diapcentre > figure {
         width: 50%;
       }
     }

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

Discussions similaires

  1. Réponses: 1
    Dernier message: 03/10/2012, 16h16
  2. débutant un css, comment aligner et centrer des blocs
    Par thor76160 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/10/2010, 17h29
  3. Alignement horizontal de 2 bloc div
    Par sliverman dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 03/05/2009, 16h09
  4. Aligner Hauteur d'un bloc avec bloc flottant
    Par svergeylen dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 31/12/2008, 22h09
  5. Réponses: 0
    Dernier message: 17/07/2008, 18h59

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