Centrage et responsive

Bonjour,

Je teste en ce moment la mise en place d'un site mobile :http://mobile.unisverscontrecancer.com

et j'ai un souci pour centrer mon menu (à cause des icônes qui ont une largeur fixe...).
Pour l'adaptabilité au différents formats de devices mobile ( mobiles (portait / paysage) et tablettes diverses, j'ai commencé à travailler en %, et c'est là que j'ai un problème, je crois, pour centrer mon menu, qui a donc une largeur fixe, quelle que soit la largeur du viewport, donc impossible de prévoir un padding / margin en % "à priori"...

La méthode du'box-sizing' illustrée par Raphael (http://blog.goetter.fr/post/13447625254/un-reset-responsive-pour-les-images) peut elle être employée dans ce cas, et à quel niveau (conteneur, div du menu ?)

Merci pour votre aide,
Cdt,
JMB

Bonjour et bienvenue,

2 commentaires sur le code lui-même tout d'abord :
- si c'est un menu de navigation alors il serait préférable d'utiliser l'élément HTML5 nav autour d'une liste (UL) de liens (ou 2 si ton design l'impose mais de préférence 1)
- les icônes étant chacune dans un lien avec un texte, l'attribut alt de ces images devrait être vide (alt=""). S'il n'y avait pas le texte, leur contenu actuel serait parfait mais ici il y a doublon ; si on désactive les images les liens ont 2 fois le même texte ce qui n'est pas utile voire ennuyeux pour un non-voyant qui va entendre 2 fois chaque intitulé

Pour le centrage, j'utiliserais un conteneur (nav) qui fasse la largeur de son parent body (c'est-à-dire sans indiquer de largeur en fait, il aura width: auto; par défaut).
Le but avec le conteneur des 6 liens (idéalement ul avec 6 li et chacun un a) est ensuite qu'il fasse la largeur de son contenu plutôt que la largeur de l'écran et le centrer avec margin: 0 auto; (ou text-align: center sur le parent, peu importe la méthode de centrage).
Pour ça display: inline-block ou inline et idem pour les liens (ou float: left ...de tête un samedi matin j'y arriverai pas ).
Le menu doit-il vraiment rester sur 2 lignes même sur tablette ou desktop ? Si le 4e li doit passer à la ligne, un clear: left après les 3 premiers li flottants forcera le passage à la ligne, pas besoin d'avoir des div #rangee1 et #rangee2.
Et si en 320px de large, il faut 2 liens par ligne, enlever ce clear: left; et éventuellement en rajouter sur les 3e et 5e (mais si le conteneur n'est pas assez large, ils iront créer une nouvelle ligne d'eux-mêmes)

Bonjour Felipe et merci pour ta réponse, y compris en ce samedi !


- pour les les points HTML5 et accessibilité , je plaide coupable, et je sais que je n'avais pas peaufiné ces points, ce que je souhaite bien sûr faire pour la version définitive (pour l’accessibilité c'est sûr, pour le HTML5, je flotte encore un peu...)

- pour le le menu sur 2 lignes, je suis d'accord, ce n'est qu'une contrainte imposée par le format mobile (320x480 // 480x320), mais je ne suis pas sûr d'avoir compris comment le faire sur une ligne et qu'il se mettre sur 2 (voire n x 3 si 3 item par lignes...) en automatique si viewport mobile ?

a écrit :
Le menu doit-il vraiment rester sur 2 lignes même sur tablette ou desktop ? Si le 4e li doit passer à la ligne, un clear: left après les 3 premiers li flottants forcera le passage à la ligne, pas besoin d'avoir des div #rangee1 et #rangee2.
Et si en 320px de large, il faut 2 liens par ligne, enlever ce clear: left; et éventuellement en rajouter sur les 3e et 5e (mais si le conteneur n'est pas assez large, ils iront créer une nouvelle ligne d'eux-mêmes)

Merci bcp en tout cas pour ta réponse,
Je viens de reperer le BBCode pour les liens, désolé pour la lisibilité

Cdt,
JMB

Re-bonjour,

Je pense que j'ai bon cette fois-ci (?):
http://mobile.unisverscontrecancer.com

Je mettrais le tag [résolu] si personne n'a de remarques , conseils, .. qui optimiserais le code CSS ...

Merci à Felipe pour ses indications..
bon WE à tous,
Cdt,
JMB

JMBMO a écrit :
comment le faire sur une ligne et qu'il se mettre sur 2 (voire n x 3 si 3 item par lignes...) en automatique si viewport mobile ?

Ma faute, je supposais que tu utilisais des media queries et je pensais qu'en dessous de certains breakpoints (largeurs-clés), tu souhaitais des comportements ou mise en page différents. A l'intérieur de chaque Media Query (donc par exemple entre 480px et 767, 768 et au-delà, en-dessous de 479 donc y compris 320px, etc), tu peux décider d'un design légèrement différent (2 colonnes, 3 puis 1 seule ligne par exemple). Mais ce n'est qu'une manière de faire parmi d'autres ; comme tu as un site mobile dédié et que ça s'affiche sans problème c'est tout à fait optionnel. )

@Felipe:

C'est pas un souci. En fait, grâce à tes conseils, j'ai résolu ce point de centrage:
http://mobile.unisverscontrecancer.com
Qu'en pense-tu ?



J'ai d'autres soucis liés aux différents de formats de mobile (y compris tablettes, etc...), que je pensais résoudre via les media-queries et les breakpoints en effet.
Je ne veux pas faire "boule de neige" avec une autre question, mais...


je souhaitais centrer une image ( ce qui marche super avec le box-sizing décrit par Raphael, mais également la description de ladite photo, comme sur l'exemple de Raphael, encore une fois, mais je ne vois pas ce qui fait que la <div> se redimensionne exactement comme la photo, dans son exemple (http://blog.goetter.fr/post/13447625254/un-reset-responsive-pour-les-images)

voici ce que donne ma page à ce stade:
mobile.unisverscontrecancer.com/events2.php
où tu choisis , par exemple le premier item, qui a une description plus longue...

Je teste avec les moyens du bord (les modèles adaptatifs de FF...), et on voit bien que pour les mobiles avec une largeur <= 320px, la description dépasse...

Merci encore @Felipe pour ton suivi et à tous d'avoir eu la patience de me lire !