28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS Centrer des floats contenant des floats

Bonjour,

Je suis en train de réalisé une maquette, j'ai 3 blocs dont 1 qui contient des floats qui s'adaptent à la taille de l'écran et retournent à la ligne si l'écran devient trop petit, cependant quand je réduit l'écran j'ai bien les blocs principaux qui descendent, mais ne se recentrent pas.

JSFiddle : https://jsfiddle.net/xjoarksy/16/
Site test : http://responsive.calagames.com/index.php/maquette-safran

Vous pouvez augmenter et réduire la taille de la fenêtre pour voir que le les float principaux ne se recentre pas.

Merci d'avance pour vos conseils et solution.
Bonne journée.
Modifié par RoyLaubin (18 May 2016 - 13:07)
Administrateur
Bonjour Smiley smile

RoyLaubin a écrit :
quand je réduit l'écran j'ai bien les blocs principaux qui descendent, mais ne se recentrent pas.

Oui je constate cela aussi.

Mais je n'ai pas compris s'il y avait une question en fait Smiley ohwell

Actuellement, il y a environ 5x trop de styles CSS pour chacune de tes 3 boîtes :
#GrilleY0X0 {
    top: 0px;
    left: 0px;
    float: left;
    min-width: 200px;
    max-width: 300px;
    width: 33%;
    height: 33%;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #ffffff;
    border: 1px solid grey;
    z-index: 30;
    text-align: left;
    color: #ffffff;
    font-size: 12px;
    display: block;
}


Dans l'ordre :
- top: 0px; -> inutile puisque l'élément n'est pas positionné
- left: 0px; -> idem
- float: left; -> il est flottant à gauche, donc ne peut logiquement pas être centré
- min-width: 200px; max-width: 300px; -> sa taille sera comprise entre 200px et 300px
- width: 33%; -> sa largeur de content-box sera de 33% du parent
- height: 33%; -> sa hauteur est fixée à 33% (donc le contenu supplémentaire va déborder)
- margin: 5px -> chaque boîte a des marges externes (en plus des 33% de taille, donc les 3 ne rentrent plus)
- z-index: 30; -> inutile puisque l'élément n'est pas positionné
- display: block; -> inutile puisque l'élément est déjà en float: left;

Que souhaites-tu obtenir au final ?
Effectivement, j'allégé les top/left, z-index et display: block, par contre le reste est nécessaire normalement.

Mon objectif est d'avoir c'est 3 blocs adaptable à la largeur de l'écran et selon le device sans passer par du java, jquery ou autre, mais en utilisant seulement du CSS.

Tout en possédant la même chose mais que les blocs se repositionnent et s'ajustent comme actuellement mais de manière centré à la page et que les blocs prenne le maximum de la largeur de la page.

J'ai modifié le code en enlevant les choses inutiles :
JSFiddle : https://jsfiddle.net/xjoarksy/17/
Site test : http://responsive.calagames.com/index.php/maquette-safran


PS : Les 3 rentrent dans la page de mon côté même avec le margin 5px.
Edit : Je peux passer par du Media Query s'il faut.
Modifié par RoyLaubin (17 May 2016 - 16:43)
Administrateur
RoyLaubin a écrit :
Tout en possédant la même chose mais que les blocs se repositionnent et s'ajustent comme actuellement mais de manière centré à la page et que les blocs prenne le maximum de la largeur de la page.

Je ne comprends pas cette partie : sur petit écran, les blocs doivent-il faire 33% et être centrés, ou bien prendre la largeur de la page (mais forcément pas centrés) ?

RoyLaubin a écrit :
Edit : Je peux passer par du Media Query s'il faut.

Sans media queries, tu seras forcément très limité.
Mais c'est possible grâce à Flexbox par exemple : http://codepen.io/raphaelgoetter/pen/GgZLKq
Le 33% était nécessaire pour que les 3 blocs prennent l'ensemble de l'espace de la page sur grande taille donc sur petite taille il devrait s'adapter pour prendre l'ensemble de la taille.
S'il faut procéder autrement je suis à l'écoute.

Effectivement le flexbox semble être une bonne solution.
Mais du coup je sais pas comment adapté mon code pour qu'il fonctionne de tel sorte.

Si c'est possible de me montrer sur un des blocs quels modification apporter pour utiliser le flexbox, cela m'aiderait pour le faire de moi même ensuite.

Edit : Par contre il faut que cela se fasse de manière automatique et non en étirant, je ne sais donc pas si cela est faisable sur flexbox.
Modifié par RoyLaubin (18 May 2016 - 10:23)
Sujet clos
Aller à