Design assymétrique

Bonjour à tous,

Pour un projet perso, j'aurai 1 petite question et besoin de vos avis d'intégrateur,

J'aimerai réaliser un design comme celui-ci, j'utilise Bootstrap et je me pose ces questions :

- Est-ce que j'utilise la grille par défaut et je positionne les classes Bootstrap en hauteur(par exemple top : 10%) mais également avec Z-index ?
- ou pour ceette mise en page je laisse tomber Bootstrap et je positionne tout "à la main" ?
- ou une autre solution, la Votre !

Voilou, merci pour vos retours

Bonne journée

Bonjour, ça dépend

- Est-ce que ton design utilise une grille?
- Si oui est-ce la même que Bootstrap?

Si la réponse à l'une des deux questions est non, tu peux laisser tomber la grille bootstrap.
Si la réponse à la première question est oui, tu peux faire ton propre système de grille, mais ce ne sera utile que si tu as un nombre conséquent de pages avec des layouts différents.

Bonsoir et merci pour ta réponse,
J'ai calé vite fait mon design sur une grille 12 col, celle que j'utilise dans mon projet.

En fait, c'est simplement le design d'une page produit, il restera le même en fonction des différents produits. Du coup que me conseilles tu ?
Moi j'avais pensé par exemple pour "MON TITRE LONG ICI"quelque chose comme :
les class de bootstrap : col-md-4 (pour prendre 4 colonnes)
offset-md-1(pour zappé la première colonne)
plus une position : relative; (dans un wrapper lui-même en position relative)
et un calage top : 15% ;
Est-ce comme cela qu il faut faire ?...

Merci de vos retours
Modifié par urlien (28 Feb 2019 - 14:51)

Une idée à travailler sur le week end ?

Tu as des éléments fixes dans ton design ?

Pour moi c'est faisable avec bootstrap mais je te conseille plutôt d'utiliser au maximum des margins / margins négatif plutôt que des positionnements absolus pour caler ton design. Car une fois que tu commence à mettre des éléments en absolute, tu vas avoir des éléments qui vont de chevaucher lorsque tu va réduire la fenêtre ou lorsque ton texte va être plus ou moins long ce qui te force à faire pleins de media queries.

Ce que je vois mal c'est comment sont positionnés entre-eux tes éléments. Par exemple la grande lettre M ou P est positionnée par rapport à quoi ? Que se passe t'il lorsque ton titre fait plus de trois ligne, ça se chevauche ? Comment tu présentes ton titre de cette manière ?

<h2>
Mon <br>
titre long <br>
ici
</h2>

Ça peut vite arriver de dépasser 4 mots dans un titre.

Après si c'est un gabarit que tu ne réutilises pas ailleurs ça peut être fait de façon rigide. Si ça n'a pas besoin d'être adapté à différents contenus c'est toujours plus facile.
Modifié par Depassage (01 Mar 2019 - 15:20)

Hola,
Je me rend compte que je ne comprend pas la question : P est positionnée par rapport à quoi ?
Pour le titre j'avais penser revenir a la ligne à chaque mot et éviter tant que possible les titres trop long ; ), sinon gérer du code enregistré en BDD
Tu me dis que je peux utilisé bootstrap, mais comment je gère le chevauchement avec les margins ? Mon design sera utilisé pour différents produits, donc img, titre et contenus differents... J vais faire en sorte de garde un max de cohésion entre chaque produits....
Du coup j veux bien des compléments d infos...J expérimente ça après avoir vidé le lave vaisselle
Modifié par urlien (02 Mar 2019 - 00:05)

J ai galerer un peu avec Bootstrap...Du coup j ai fait une grille perso :

display : grid

.
J ai trouvé le positionnement relativement facile. Si on découpe bien son design en positionnent les repères au bon endroit ca va tout seul...
Par contre je rencontre un soucis. J avais mis une croix permettant de fermer la page et retourner au sujet mais elle ne fonctionne plus...Est ce que display gros restreint certaine action ?
Merci en tous les cas...

Dans la vraie vie tu auras toujours des titres long.

Display grid ne devrait pas changer le comportement de ton bouton. Peut être que tu as quelque chose qui chevauche et t'empêche de cliquer dessus.

Effectivement j'avais mal fermé une balise..et visual code n'a même pas pris le temps de me le signaler...du coup patatra...

D'un point de vue sémantique, oui les titres ont une nature à être long, dans ce cas précisément, je devrais pouvoir les contenir à 4 mots maximum ! (Hope)

Merci à vous pour les conseils avisés, je continu a expérimenter la grid ! Et j'aime çà !