Centrer

Bonjour !

Je suis nouveau sur ce forum, et relativement nouveau en HTML/CSS (ce qui fait que vous risquez de me voir souvent poser des questions bêtes !)

Je cherche à faire quelque chose de plutôt simple en théorie, mais ayant un peu de mal avec le placement de blocs en CSS je ne sais pas trop comment faire. Je m'explique :



Voici donc la maquette (très simplifiée) de mon site. J'ai placé le logo et la barre de menu en inline-block, mais je sais pas comment faire pour que le logo reste à gauche et que le menu soit centré par rapport à la page, tout cela en position relative !

En gros je voudrais avoir le menu au centre de la page mais restant sur la même ligne que le logo, qui lui serait à gauche de la div qui les contient tous les deux.
Je dis en position relative car je déteste travailler en absolue. Mais peut-être est-ce la seule solution.

Est-ce clair, ou alors pas du tout ? Est-ce possible ou pas ?

Bref, je suis tout ouïe ! Merci d'avance.

Bonjour et bienvenue ici

Ce que tu souhaites est parfaitement réalisable, mais auparavant je préfère te prévenir que cela posera certainement des soucis : en effet, qu'as-tu prévu lorsque la fenêtre / résolution d'écran sera petite ? Il y aura forcément un conflit entre le logo figé à gauche et le menu centré.

De plus, je n'ai pas compris pourquoi tu tenais tant à positionner en relative ? Pourquoi vouloir absolument imposer un positionnement ?

Oui en effet c'est sans doute là que ça coince : j'aurais aimé, lorsque la résolution sera plus petite, que le menu soit justement toujours centré (et le logo ne bouge pas).

En fait j'y suis arrivé, peu de temps après après avoir posté ce message... En bidouillant un peu, j'ai fait en sorte que la largeur du menu varie en pourcentage du block qui contient le menu et le logo, et ça marche plutôt bien (jusqu'à une certaine résolution bien sûr).

Ce qui m'embête c'est justement ce bidouillage : j'ai peur qu'au final plein de petits bidouillages fassent un joyeux bazar.

Pour répondre à ta deuxième question, ce n'est pas que je tienne absolument à utiliser le positionnement relatif, mais j'ai cru comprendre que le positionnement absolu n'était pas indiqué pour pouvoir ensuite redimensionner le site en fonction de la résolution de l'utilisateur. Cela dit, je serais ravi que tu me détrompe si je fais fausse route.

J'ai beaucoup de mal à comprendre le positionnement, entre le relatif et l'absolu, les inline, les inline-block, et tout ces trucs là.

Keysaw a écrit :
Pour répondre à ta deuxième question, ce n'est pas que je tienne absolument à utiliser le positionnement relatif, mais j'ai cru comprendre que le positionnement absolu n'était pas indiqué pour pouvoir ensuite redimensionner le site en fonction de la résolution de l'utilisateur. Cela dit, je serais ravi que tu me détrompe si je fais fausse route.

Le positionnement absolu, lorsqu'il n'est pas maîtrisé, n'est pas forcément toujours idéal en effet.
... Mais cela ne veut pas dire qu'il faut - du coup - forcer tes éléments en positionnement relatif.
Il vaut mieux généralement les laisser se placer naturellement (= aucun positionnement particulier)

Keysaw a écrit :
J'ai beaucoup de mal à comprendre le positionnement, entre le relatif et l'absolu, les inline, les inline-block, et tout ces trucs là.

C'est dommage car c'est extrêmement important.

Je te laisse lire en détail cet article qui me semble bien à propos : http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

Et bien je te remercie, je vais me pencher sérieusement là-dessus ! J'avais suivi quelques tutos mais celui-ci m'a échappé.

Pour le coup je pense qu'on peut fermer ce topic, il est vrai que je l'ai posté un peu vite et que j'aurais peut-être dû faire une recherche plus approfondie.

Je reviendrais vers vous lorsque je serais complètement bloqué (ce qui ne devrait pas tarder, je pense).

Merci pour ton aide en tout cas.

sur demande de l'auteur