28172 sujets

CSS et mise en forme, CSS3

[Résolu] Modèle tabulaire ? ou flex ?

Bonsoir,

Pour une mise en page de ce type représentant une composition d'images et se devant d'être responsive, que me conseillez-vous, le modèle tabulaire obligatoirement... ou bien ?

...flex peut-être mais connais pas encore alors gloups Smiley sweatdrop

(3 lignes, 4 colonnes)

http://img11.hostingpics.net/pics/13385217st.jpg

Merchi
Smiley smile

P.S. Bon en fait yaura un formulaire dans la la case jaune sale mais ça change pas le schmilblick

EDIT : jsuis en train de m'arracher les doigts sur flex. Pas facile à aborder, si une âme charitable passe dans le coin, je séchouille encore. Smiley rolleyes
Modifié par Manhattan (05 Feb 2016 - 14:44)
comme il y a du mix entre colonne et ligne, tu peut deja estimer partir sur deux colonnes et dans la premier 2 colonnes, puis dans la deuxieme 3 lignes ...
... ensuite faut aussi voir comment tu veut réorganiser ça sur les petites largeurs.

En CSS colspan et rowspan n'ont pas d’équivalent, ton 'vert d'eau' met l'option simple et efficace en CSS en échec Smiley cligne
Modifié par gc-nomade (28 Jan 2016 - 20:53)
Salut,

Je suis en train d'essayer flex mais pour l'instant, comme c'est mon premier flex, je nage correctement. J'arrive juste à 3 lignes correspondant à la première et l'ensemble est plus haut que l'écran alors que je voudrais que cela soit du plein écran. Je réalise qu'en pondant ce visuel, je n'ai pas pensé à ce que je voulais que cela fasse réellement sur les photos en redimensionnant.

Ah c'est là où on voit les débutants purée... Smiley confus
Généralement j'assure tout ce que je design pour être sur que ça soit faisable (par moi). Là jsuis parti en vrille Smiley rolleyes
Modifié par Manhattan (28 Jan 2016 - 20:34)
en effet Smiley cligne . bidouille en float http://codepen.io/anon/pen/MKGPQP sert a rien en fait

En fait tout dépend de comment que tu souhaites voir ces block être organiser lorsque la largeur est réduite.

via les media querie tu peut passer de flex a un modèle tabulaire ou en flottement, voir repasser en verticaux/horizontaux les rectangles ...
Déjà en flex je n'arrive pas à l'équivalent d'un background-size cover sur le conteneur pour que rien ne dépasse.
J'imaginais en premier un redimensionnement léger des images en conservant le ratio donc plus "effacement des marges" si je puis dire, puis glissement des boites les unes sous les autres ensuite vers 2 colonnes puis 1.
Je vais peut-être en effet me rabattre sur du float vu que tu as déjà obtenu mieux que moi via mes tentatives de flex (en local, faudrait que jmette ça en ligne mais en fait c'est via un plugin WP "Coming soon" pour une page d'attente, bref un peu le bordel ^^).
Merci déjà pour ce que tu as fait.
Si je n'y arrive pas d'ici demain de toute manière, la page coming soon ça sera une belle photo full size avec son formulaire et hop, naméo Smiley langue
Modifié par Manhattan (28 Jan 2016 - 21:06)
Bonsoir,

Moi je conseillerais le modèle flex car très souple pour le responsive (réorganisation des div).

Exemple 1 (codé avec mon framework, regarde en responsive).

Exemple 2 (plus simple, en grilles imbriquées).

Tous les exemples de layouts (en mobil first, voir le code sur Github).

Et voici maintenant un petit modèle sans framework rien que pour toi, basé sur le même principe, avec une logique de 4 colonnes seulement, et sans les gouttières (Edit : je l'ai adapté pour le mobil first).
Modifié par Olivier C (29 Jan 2016 - 07:12)
Ouah, ça c'est du chouette cadeau du matin !
Merci beaucoup, j'étudie toutes ces lignes de code dans la journée (call conf de prévues ce matin) Smiley smile
Administrateur
Bonjour,

Flexbox ? >
après avoir abordé flexbox via conférences et le défrichage de Raphaël ( tuto flexbox ), je me sers trèèèès souvent de https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ("159 fois" d'après mon navigateur mais sans compter les 6 mois pendant lesquels l'onglet est resté ouvert Smiley biggol )
et sans Autoprefixer, c'est un peu l'enfer de supporter IE10+ en production. Mon cerveau a mieux à faire que de retenir 3 syntaxes différentes, c'est le boulot d'un outil ça !
Modifié par Felipe (29 Jan 2016 - 11:56)
Oui bien sûr, il faut utiliser Autoprefixer, sinon c'est l'horreur à gérer :
body {
  margin: 0;
}

[class^='m'] {
  min-height: 33.33vh;
}

@media (min-width: 40rem) {

  [class^="grid"] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }

  [class^="grid"] [class^="grid"],
  [class^='m'] {
    width: 100%;
  }

  [class^="grid"] .grid2,
  .m2 {
    width: 50%;
  }

  .m4 {
    width: 25%;
  }
}

Modifié par Olivier C (29 Jan 2016 - 15:07)
Bon, et bien tout cela est très intéressant. Et je prends tout. Je ne vais pas mettre en place la page que je comptais faire mais je compte garder cette mise en page pour un autre projet donc merci à tous, au code fourni et au guide css-tricks qui en effet lève le voile sur beaucoup de choses qui m'étaient encore obscures.

Smiley smile
Sujet clos
Aller à