28172 sujets

CSS et mise en forme, CSS3

Menu responsive full css3, crossbrowser (ou presque...)

Bonjour tout le monde,
je tente de créer un menu qui soit responsive, qui soit aligné dans tous les axes sans devoir utiliser du JS ou php pour calculer la largeur selon le nombre d'onglets de menu par rapport a l'espace donné, et ne pas etre préoccupé que le texte ne soit pas centré verticalement, et compatible sur les nouveaux navigateurs.

La méthode du 
display: inline-block;
vertical-aligne:middle;
meme si elle aligne les blocs, n'aligne pas le texte verticalement si son conteneur a une hauteur, de plus la largeur des blocs doit se calculer par js ou php.

La méthode 
display: table-cell;
vertical-aligne:middle;
aligne le texte verticalement automatiquement, mais il faut lui spécifier les largeurs et hauteurs aussi en js ou php pour que ce soit bon, et pareil pour que ses parents se partagent l'espace equitablement.

J'utilise donc la proprieté 
display: flex;
...
car grace à 
-moz-box-flex: 1; 
	-ms-flex: 1;
	-webkit-box-flex: 1;
	-o-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	
	-webkit-box-align: center; 	/*centrer verticalement*/
	-moz-box-align: center; 
	-ms-flex-align: center; 
	-webkit-align-items: center;
	align-items: center;

	-webkit-box-pack: center; /*centrer horizontalement*/
	-moz-box-pack: center; 
	-ms-flex-pack: center; 
	-webkit-justify-content: center;
	justify-content: center;

Tous mes problemes sont réglés.
je pense ne pas etre trop loin du résultat attendu, si ce n'est quelques soucis à droite et a gauche:
IE10 et Opera me jouent de petits tours, tout se passe bien, sur IE10, la gestion du menu deroulant qui est vertical partout ailleurs, ne l'est pourtant pas chez lui,
et sur opera, le hover sur les onglets du menu déroulant font un effet fading sur le texte.

Qu'en dites vous?

voici le code pen:
http://codepen.io/dqni/pen/HlbIJ
Modifié par dqniel (03 Jul 2013 - 12:08)
Salut,

à mon avis je dois être a côté de mes pompes mais je capte pas en quoi ton menu est responsive. Et je capte encore moins pourquoi il faudrait utiliser du js ou du php pour fixer la taille d'un conteneur ?
Salut,
Il est vrai que je n'ai pas mis les media queries, mais au final, ce menu en a, et sera donc responsive selon la résolution.
De plus, il à une structure fluide, largeurs en %, ce qui lui permet de s'adapter aux resizes de la fenetre.

En ce qui concerne l'utilisation du js ou php, lorsqu'un utilisateur final qui ne connait pas de css, gere son site, il peut etre amené à ajouter ou supprimer des points de menu, dés lors, comment gérer l'espace de chaque point pour que le menu tienne en place correctement sans recalculer la largeur des <li>?
Que ce soit en pourcentages ou en tailles fixe 'px', si au départ j'ai 5 points de menu, je peux faire calculer leur largeur facilement, mais si il y a modifications du nombre des points de menu, j'applique donc a la largeur de chaque point de menu : largeur_conteneur/nombre_de_points_de_menu pour obtenir une largeur equitative sur l'ensemble du menu, non?
D'ou le calcul en js ou php car aucune méthode css ne permet de repartir les elements sur l'espace comme le fait display: flex avec flex: 1;
j'ai trouvé reponse a mon probleme avec IE10:

par defaut Ie10 met :
-ms-flex-preferred-size:0px;

Il suffit de le changer en :
-ms-flex-preferred-size:auto;

pour qu'il prenne les valeurs de height et width deja assignées.

a écrit :
The <preferred-size> component sets the preferred size. It can be set to any value that would be valid in the ‘width’ or ‘height’ property, except values that are not applicable to a component value (of values defined in CSS2.1, only 'inherit' is not valid for <preferred-size>; in the future other values may be introduced that are not applicable as length component). If omitted, the preferred size defaults to ‘0px’. If set to ‘auto’, the value of ‘width’ or ‘height’ (whichever is in parallel to main axis) is used as preferred size.


http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
Modifié par dqniel (03 Jul 2013 - 15:02)
Gili a écrit :

à mon avis je dois être a côté de mes pompes mais je capte pas en quoi ton menu est responsive.


+1

Moi je capte pas pourquoi il faudrait 330 lignes de CSS pour faire un menu tout simple.
Modifié par jb_gfx (03 Jul 2013 - 14:47)
jb_gfx a écrit :


+1

Moi je capte pas pourquoi il faudrait 330 lignes de CSS pour faire un menu tout simple.



Oui il est simple, mais la simplicité n'est'elle pas la difficulté maitrisée? Smiley murf
Non, blagues à part, si j'ai posté ce menu ici c'est justement pour avoir un retour constructif pour m’améliorer, j’attends donc que vous me montriez comment faire un menu en css avec moins de lignes mais avec toutes les caractéristiques qu'à le mien, c'est à dire:

*structure fluide adaptable a la résolution,
*éléments centrés horizontalement et verticalement dynamiquement (le texte aussi)
*conteneurs à taille variable selon le nombre de points de menus,
*compatible sur IE10, FF, Chrome, safari, opera,

Si tu arrives à faire moins de lignes, je serais ravis si tu nous le partage.

Une simple phrase depreciative me m'aidera pas beaucoup.
Argumentez vos affirmations et répondez a ma question au lieu de tourner au tour de mon appellation meme si elle est douteuse Smiley cligne
Modifié par dqniel (03 Jul 2013 - 15:49)
Salut,
dqniel a écrit :
*structure fluide adaptable a la résolution,
*éléments centrés horizontalement et verticalement dynamiquement (le texte aussi)
*conteneurs à taille variable selon le nombre de points de menus,
*compatible sur IE10, FF, Chrome, safari, opera,

Pour les points que tu énonces, si je t'ai bien compris, moi j'aurai procédé ainsi (compatible sur IE8)
<ul>
  <li><a href="#">item 1 </a></li>
  <li><a href="#">item 2 item 2</a></li>
  <li><a href="#">item 3 item 3 item 3</a></li>
  <li><a href="#">item 4 item 4 item 4 item 4</a></li>
</ul>
ul {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0; padding: 0;
}
li {
  display: table-cell;
}
a {
  display: inline-block; vertical-align: middle;
  width: 100%;
  text-align: center;
  padding: 1em 0;
}


T'en penses quoi ? ^^

Edit: et mon avis sur ta méthode c'est que contrairement à ce que tu indiques dans ton titre ce n'est pas cross browser étant donné que flex box n'est pas supporté par IE9 et IE8. Donc à priori je ne la préconise pas.
Modifié par Gili (04 Jul 2013 - 21:31)
Effectivement je me dois d'accepter l'evidence, je suis convaincu part sa complète compatibilité et parceque il n'y a pas de prise de tete avec les prefixes css3..

J'avais essayé cette méthode, mais je ne sais pas pourquoi, j’étais obligé de recalculer les hauteurs et largeurs des blocs par js pour que tout soit centré...

En tout cas, merci!


ps: juste une chose, comment eviter l'effet escalier que le menu prend lorsequ'on reduit la fenetre?
Modifié par dqniel (04 Jul 2013 - 23:29)
Je viens de tester ton code, dans le cas où on le définit pas de hauteur au menu, il est génial et simple, comme on peut le voir ici:

http://codepen.io/dqni/pen/xLnBd

Le problème arrive à l'instant où on définit une hauteur au menu,
le texte dans le <a>, ayant une hauteur, n'est plus centré verticalement.:
Voici:

http://codepen.io/dqni/pen/LlcEa

Du coup, si on veut le centrer, on peut utiliser le 
display: table-cell
, mais alors, il faut également définir l' hauteur manuellement du <a> du drop down pour qu'il soit aligné, là rien de gênant.
Ce qui devient gênant, c'est que désormais les <li>, qui ont un display: table-cell ne prennent plus l'espace comme avant, le width:100% devient inopérant, dés lors il faut indiquer une width en PX manuellement, et dans le cas d'un menu qui risque d’évoluer, on ne peut se permettre d'avoir des éléments sans width calculée pour que les <li> se partagent l'espace equitativement, d'ou utilisation du JS, comme j'en parlais dans mon post.
voici ce problème en visu:

http://codepen.io/dqni/pen/iJgvL

Des solutions pour ne pas utiliser de js?

PS: ca tombe je me gourre magistralement quelque part, je m'en excuse d'avance Smiley rolleyes
Modifié par dqniel (05 Jul 2013 - 00:12)
dqniel a écrit :
Le problème arrive à l'instant où on définit une hauteur au menu,
le texte dans le <a>, ayant une hauteur, n'est plus centré verticalement.:
Et pourquoi vouloir fixer une hauteur ? C'est généralement une mauvaise pratique. Si tu veux augmenter la hauteur de ton élément pourquoi ne pas jouer avec le padding ?
@ dqniel http://codepen.io/anon/pen/jBFCe (fork de ton pen )

Je ne comprend pas trop ce que tu essaie de faire, a mon sens , même quelque chose de simple doit avoir un peut de coherence et de visibilité. En distribuant des couleurs de fond ou des bordures aux elements, tu peut déja mieux apprecier le comportement des elements.

Les choix de style dependent aussi d'un resultat final attendue, la c'est hasardeux ton truc ?
Cdt,
GC
Gili a écrit :
Et pourquoi vouloir fixer une hauteur ? C'est généralement une mauvaise pratique. Si tu veux augmenter la hauteur de ton élément pourquoi ne pas jouer avec le padding ?


C'est vrai que pour le même résultat on evite des prises de tête, c'est bien noté.
gc-nomade a écrit :
@ dqniel http://codepen.io/anon/pen/jBFCe (fork de ton pen )

Je ne comprend pas trop ce que tu essaie de faire, a mon sens , même quelque chose de simple doit avoir un peut de coherence et de visibilité. En distribuant des couleurs de fond ou des bordures aux elements, tu peut déja mieux apprecier le comportement des elements.

Les choix de style dependent aussi d'un resultat final attendue, la c'est hasardeux ton truc ?
Cdt,
GC


j'avoue ne pas saisir ce que tu ne comprend pas^^
tu forkes un pen qui n'es pas le mien là enfait...
mon fork me semble clair et simple, en appliquant le display table
http://codepen.io/dqni/pen/iJgvL
Sujet clos
Aller à