1448 sujets

Web Mobile et responsive web design

Bonjour,
une question bête : je fais une flexbox pour un menu.
.flexbox {
    display: flex;
	font-size: 1em;
	text-align: center;
	flex: 1;
	}
	.flexbox > * + * {
  margin-left:10px;
	}
	/* colors */
   .flexbox > div:nth-child(1){ background : #009246; }
   .flexbox > div:nth-child(2){ background : #F1F2F1; }
   .flexbox > div:nth-child(3){ background : #CE2B37; }

Or, certaines ont une ligne et d'autres 2 et je n'arrive pas à les centrer verticalement. J'ai lu le tutoriel et je n'ai pas trouvé la solution.
Qu'elle est mon erreur ?
Merci
Bonjour et merci encore de me répondre.
J'avais déjà essayé, mais certainement mal
avec le premier script cela donne la figure gauche et avec align-items: center; en sus, la figure droite. La capture est mal faite, mais il ne faut voir que le texte.
upload/1500618007-44994-capturedaeacran2017-07-21aa08.gif
Merci
Modérateur
Bonjour,

Et du coup tu perds l'étirement vertical c'est ça ? C'est normal car ce qui fait l'étirement c'est
align-items: strech;
qui est par défaut. Or en changeant la valeur à center on enlève ce fonctionnement.

Tu peux gérer le centrage horizontal en rajoutant un élément juste pour le texte à l'intérieur de chaque div :
https://jsfiddle.net/shnjkay0/
Modérateur
Wow... le texte agit comme ça sans le mettre dans un élément fils ?!
J'avais loupé ca dans l'utilisation de flex, je me coucherai moin bête et ça va me régler pas mal de soucis ! hahaha !

Merci grand moineau Smiley prie
Modifié par _laurent (21 Jul 2017 - 16:42)
Administrateur
_laurent a écrit :
Wow... le texte agit comme ça sans le mettre dans un élément fils ?!
Oui, le contenu anonyme devient un flex-item comme les vrais fils Smiley smile

_laurent a écrit :
Merci grand moineau Smiley prie
Euh, ça a l'air d'être un compliment, merci !
Modérateur
Raphael a écrit :
Euh, ça a l'air d'être un compliment, merci !

je voulais dire "grand manitou" au départ mais comme Game of Thrones vient de reprendre.... Smiley lol
Merci Raphael pour ce résultat et aussi pour tes bouquins qui m'aident toujours beaucoup.
Par contre, j'ai changé de méthode et mon menu est composé par un <ul> et des <li>.
Le code a changé aussi (j'essaie de m'adapter Smiley lol ) et cela marche bien sauf la couleur du texte a une ligne: je vous donne l'essentiel :
.navbarre > ul { 
	display: flex;
	justify-content:space-between;
	flex-direction: row;
	font-weight: bold; /*en 14px; */	
	width: 100%;
} 
.navbarre > ul > li { /* concerne les grands titres non cachés */
	position:relative; /* permet de bien positionner le menus en dessous */
	text-align: center;/* permet de centrer les grands titres*/
	padding: 0.3em 0.5em 0.5em 0.5em ; 
}
.navbarre > * {
    display: flex;
    align-items: center;
}

Que dois-je changer pour ne pas obtenir cela :
upload/1500733150-44994-capturedaeacran2017-07-22aa16.png
Merci d'avance
Bonjour,
après de nombreux essais, je me suis aperçu que le code n'était pas dans la bonne balise. Avec cela, c'est bon et la couleur est bien répartie !
Merci à tous.
.navbarre > ul {
display: flex;
justify-content:space-between;
flex-direction: row;
font-weight: bold; /*en 14px; */
width: 100%;
}
.navbarre > ul > li { /* concerne les grands titres non cachés */
display: flex;
align-items: center;/*aligne les grands titres verticalement*/
position:relative; /* permet de bien positionner le menus en dessous */
text-align: center;/* permet de centrer les grands titres*/
padding: 0.3em 0.5em 0.5em 0.5em ;
}