[Résolu] Placement block text et responsiv design

Bonjour à tous !

J'ai un petit souci qui m'embête, et je ne sais pas comment le régler.

Voilà le dilemme : J'ai une page oueb, symbolisée en noire dans l'image. Et je souhaiterai placer des blocks texts dans les endroits rouges, donc déjà, comment bien placer les blocks ?
J'essaie actuellement avec un position absolute, mais je pense pas que ce soit la meilleure des idées
Mon souci principal se situe dans la côté responsiv design, en effet j'aimerai qu'une fois l'écran réduit ces deux blocs viennent se mettre en dessous l'un de l'autre, gentiment.


Si quelqu'un a une idée, je suis preneur !

Merci beaucoup
Undred
Modifié par undred (11 May 2016 - 16:11)

Bonjour !

Utiliser Flexbox (et flex-wrap : wrap) me semble une bonne idée.

Bonsoir,

Au vu de ton illustration, je pense qu'il faudra effectivement passer par du position: absolute, car les éléments semblent vraiment se positionner sans rapport entre eux.

Puis, sur petit écran, un simple Media Query pour détecter la taille, et supprimer le position: absolute (via position: static). Les éléments reprendront alors leur placement "normal" dans le flux, c'est à dire les uns sous les autres.

Bonne chance

Je suis de l'avis de zelena,


flex permet de désorganiser un peu l'alignement des enfant en jouant avec des marges (auto et définies).

idée : http://codepen.io/gc-nomade/pen/wGOEaP

Flexbox est forcément tentant, mais d'après l'illustration les blocs semblent ne respecter aucune règle géographique.
Il faudrait vraiment en savoir plus sur les besoins.

Bonjour,

J'étais plutôt de l'avis de Raphaël sur un position en absolute (voire fixed selon contexte).
Mais encore une fois, tout dépend de l'application.

SolidSnake a écrit :
Oui de course, avec les MediaQueries !

MédiaRequêtes, voyons

Raphael a écrit :

MédiaRequêtes, voyons

c'est le canadien en toi qui dit ça ?