Résolu [HTML&CSS] Mise en page avec display

Wiligan

Wiligan

Membre
Inscription
31 Octobre 2011
Messages
1 157
Réactions
161
Points
7 403
RGCoins
0
Salut !

Pour un projet je dois créer un site internet avec une mise en page avancée avec des display uniquement ! (Et aucun float comme j'ai l'habitude de le faire !)

Le soucis c'est que je ne sais absolument pas comment faire pour (par exemple) créer des colonnes ou gérer la disposition de mes blocs !

Quelqu'un pourrait me l'expliquer svp ?

Merci !
 
Trier par date Trier par votes
Wiligan

Wiligan

Membre
Inscription
31 Octobre 2011
Messages
1 157
Réactions
161
Points
7 403
RGCoins
0
Maxime' a dit:
Oui voilà, à toi de voir et de gérer ton truc après x)
Cliquez pour agrandir...

J'ai essayé, la colonne du milieu n'apparaît pas, et le tout même quand je gère la largeur à 20%, 60% et 20% (respectivement pour les 3 colonnes), ça doit prendre au final que 75% ... normal ?
'fin en tout cas c'est une catastrophe pour gérer ça ... ><
 
Voter positivement 0 Voter négativement
D

delete221380

Wiligan a dit:
Pour faire une colonne ça se passe comment du coup ?
Je crée un conteneur et j'aligne le contenu ?
Cliquez pour agrandir...
Utilise les flexbox pour faire des colones, c'est ultra rapide.
Tu créer un conteneur qui lui aura le propriété : display : flex et ensuite les éléments s'alignerons

Pour l'alignement des éléments avec la propriété justify-content :
  • flex-start : alignés au début
  • flex-end : alignés à la fin
  • center : alignés au centre
  • space-between : les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux, je te conseil ça c'est le top)
  • space-around : idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités
Tu peux choisir d'aligner tes elements dans le sens que tu veux avec la propriété flex-direction
  • row : organisés sur une ligne (c'est ce que tu souhaites avoir et c'est par defaut)
  • column : organisés sur une colonne
  • row-reverse : organisés sur une ligne, mais en ordre inversé
  • column-reverse : organisés sur une colonne, mais en ordre inversé
Tu as encore une multitude d'autres propriétés comme le retour à la ligne avec le flex-wrap mais je te laisse te renseigner, ça rentre parfaitement dans la charte que tu dois respecter puisque tu utilisera uniquement le display :)
 
Cette réponse a aidé l'auteur de cette discussion !
Voter positivement 0 Voter négativement
Wiligan

Wiligan

Membre
Inscription
31 Octobre 2011
Messages
1 157
Réactions
161
Points
7 403
RGCoins
0
DEVR0 a dit:
Utilise les flexbox pour faire des colones, c'est ultra rapide.
Tu créer un conteneur qui lui aura le propriété : display : flex et ensuite les éléments s'alignerons

Pour l'alignement des éléments avec la propriété justify-content :
  • flex-start : alignés au début
  • flex-end : alignés à la fin
  • center : alignés au centre
  • space-between : les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux, je te conseil ça c'est le top)
  • space-around : idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités
Tu peux choisir d'aligner tes elements dans le sens que tu veux avec la propriété flex-direction
  • row : organisés sur une ligne (c'est ce que tu souhaites avoir et c'est par defaut)
  • column : organisés sur une colonne
  • row-reverse : organisés sur une ligne, mais en ordre inversé
  • column-reverse : organisés sur une colonne, mais en ordre inversé
Tu as encore une multitude d'autres propriétés comme le retour à la ligne avec le flex-wrap mais je te laisse te renseigner, ça rentre parfaitement dans la charte que tu dois respecter puisque tu utilisera uniquement le display :)
Cliquez pour agrandir...

Je crois que c'est exactement ce qu'il me faut merci !

Adel XF a dit:
Salut si tu n'as pas compris DEVRO

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Cliquez pour agrandir...

J'irais y jeter un coup d'oeil aussi merci !

KevinKeef ES a dit:
Sinon tout simplement t'utilises les grid css3
Cliquez pour agrandir...

J'y ai pensé, mais c'est interdit ... Pas de float, pas de grid, juste des display ! :/
(Il paraîtrait que c'est devenu obsolète ?)
 
Voter positivement 0 Voter négativement
Haut