CSS Problème avec align-items

[invite60667185]

Bonjour,

Je suit j'apprend actuellement le HTML et le CSS, et je n'arrive pas à centrer un élément en utilisant align-items, il m'est impossible de contrôler l'axe secondaire :/

Voici le code CSS :

#menu
{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 2px black solid;
 
}
 
.test, .test2, .test3
{
    width: 400px;
    height: 200px;
    background-color: cyan;
    text-align: center;
}
 
.test2
{
    background-color: green;
}
 
.test3
{
    background-color: red;
}

Et le code html :

<div id="menu">
   <div class="test">Menu 1</div>
   <div class="test2">Menu 2</div>
   <div class="test3">Menu 3</div>
</div>

Merci pour votre aide.
-----

[CM63]

Bonjour,

Et si tu mets le align-items dans le .test, .test2, .test3 ?

[invite60667185]

Rien ne change en mettant align-item dans .test, .test2, .test3.

[invite52eae448]

oublie ces conneries de css... c'est nawak... seul un tableau est sûr pour centrer en largeur et hauteur(surtout) dès fois ça marche avec display table-cell...(pour un div) mais à l'expérience ça rajoute du désordre(peu sûr) et rend le code moins lisible.

bref, css pas super au point, surtout quand le meilleur moyen après celui-ci pour centrer en largeur relève des attribut HTML avec div-align:center... mais ne peut rien pour la hauteur...

vriament un bande de naz ces ricains où autres quand il s'y mette

[A voir en vidéo sur Futura]

[Stan_94]

bref, css pas super au point, surtout quand le meilleur moyen après celui-ci pour centrer en largeur relève des attribut HTML avec div-align:center... mais ne peut rien pour la hauteur...

Heu, c'est sûr ça ? Parce que j'aurais tendance à dire que c'est plutôt un manque de compétence qui fait que ça semble compliqué et peu sûr... Du moins de ce que j'en ai essayé du CSS. Moi aussi je préfère faire un tableau mais le code HTML mélange alors les données et les instructions de mise à forme. C'est donc trés rigide.
Alors qu'avec le CSS, c'est (ça semble, je ne maitrise pas encore assez la bête) facile de modifier la mise en page.

A titre d'exercice, je vais tâcher de reprendre le code de Ginklaw...

[Stan_94]

ah ben voilà, pour centrer horizontalement et verticalement le texte dans chacune des 3 box, j'ai juste remplacé :

.test, .test2, .test3
{
    width: 400px;
    height: 200px;
    background-color: cyan;
    text-align: center;
}

par

.test, .test2, .test3
{
    width: 400px;  
    height: 200px; 
    display: flex;
    background-color: cyan;
    justify-content: center; 
    align-items: center;    
}

A noter que :

align-items: center;

aligne verticalement le texte dans sa box.

justify-content: center

l'aligne horizontalement

et il faut ajouter

display: flex;

pour dire que les box définie par test, test2 et test3 s'affiche en mode flex.
(Il n'y a pas d'"héritage" entre le div contenant "menu" et les div contenues "test..."

[invite60667185]

Bonjour,

Effectivement cela centre le texte mais je souhaite centrer les 3 box horizontalement et verticalement, et seul l'axe horizontale fonctionne :/.

[invite52eae448]

Heu, c'est sûr ça ? Parce que j'aurais tendance à dire que c'est plutôt un manque de compétence qui fait que ça semble compliqué et peu sûr... Du moins de ce que j'en ai essayé du CSS. Moi aussi je préfère faire un tableau mais le code HTML mélange alors les données et les instructions de mise à forme. C'est donc trés rigide.
Alors qu'avec le CSS, c'est (ça semble, je ne maitrise pas encore assez la bête) facile de modifier la mise en page.

A titre d'exercice, je vais tâcher de reprendre le code de Ginklaw...

je crois surtout qu'ils aiment nous faire courir, parceque l'analyse de leur catégorie et propriété montre bien que c'est foutage de gueule complet, qui n'a s'autre intérêt que de créer des difficultés pour faire des difficultés, le problème est plus économique, que strictement informatique... si il voulait faire simple, cela ne prendrais pas 20 minutes...
il pourrait, mais ne le veulent pas... cela permet de vendre des cours et formations aux gogos...

[Stan_94]

Ah ça, si ça avait pu être plus simple à utiliser...

Ceci dit, Ginklaw, pour les box, je ne comprend peut-être pas le problème.
La box contenant "menu" et les 3 box contenues "testn" sont à la même hauteur, donc forcement ça ne se voit pas, mais c'est bien centrée verticalement aussi ! (Du moins en testant sur IE11).
Aprés si il faut centrer sur la page, alors il faudrait mieux donner à "menu" un hauteur de 100% et pas 200px, comme ça sera bien entré sur la page.
En espérant que c'est bien de ça que tu parles !

[invite04c600d3]

Bonjour,

Juste un avis personnel (ou même un peu plus que personnel).
C'est très bien d'utiliser le html et le css et contrairement a ce qui a été dis je ne pense pas qu'il faille utiliser une table pour positionner tes éléments mais bien du css.
La raison est simple, pour une programmation propre et surtout évolutive et maintenable facilement il faut séparer le contenu de la mise en page.
Dans ton cas le contenu est dans le html et la mise en page dans le css cela permet notamment de changer la mise en page sans avoir a tout retoucher, juste le css. Ce que ne permet pas une table html.
Si par exemple tu veux par la suite faire plusieurs thèmes pour ton site il sera beaucoup plus pratique d'avoir séparer le contenu de la mise en page (juste a faire un autre css)
C'est un des principes de base de la programmation il faut découper ton code en couches, présentation, mise en page, accès aux données si tu as besoin de lire des données dans une base de données, etc.
Et surtout ne rien mélanger car si tu change ou fait évoluer une des couches tu ne refait pas tout ton code !
Donc tu as bien commencé, continu dans cette voie et tu verra un peu plus loin dans ton apprentissage qu'il existe des tas de "Framework" qui te faciliterons la vie pour respecter le développement en couche.
Mais pense bien a respecter les différentes couches car la qualité d'un code (maintenance, évolutivité, etc.) est jugée en grande partie sur le respect des couches ! (ce n'est évidemment pas le seul critère de qualité, mais si celui la n'est pas respecté ton code est presque bon a jeter !!!)