CSS probleme de position avec Width

Bonjour à tous ,

Je demande aujourd'hui votre aide concernant le positionnement de Background avec du code CSS !

Tout d'abord voici ce que j'ai coder pour une balise avec le mot "menu" (et où j'ai mis menu en id) :

.menu {
  width: 80px;
  text-align: center;
  background: rgba(0,0,0, 0.8);
  color: white;
}
}

Mon menu est placer en "center", sauf que lorsque j'ajoute le width pour la taille de mon background, le mot et le background se replace tout à gauche de la page !
Si jamais j'utilise :

  position: absolute;
  left: 50%;

Alors mon mot et background commenceront à partir du centre mais ne seront pas centrer au milieu de la page. J'aimerai donc vous demander de l'aide pour savoir comment faire dans cette situation ?

Je vous remercie pour votre attention et votre aide. Bonne journée !

Hello Rayhan,

Tout ceci est un peu confus

Je vais reprendre point par point pour voir si j'ai bien compris ce que tu voulais obtenir...

1- "Mon menu est placer en "center""
Non. text-align: center; n'aligne pas ton bloc .menu mais le contenu de celui-ci. A ce stade, .menu occupe toute la largeur (du bord gauche au bord droit de la page), et son texte est centré dedans.

2- "sauf que lorsque j'ajoute le width pour la taille de mon background"
Non. Width n'agit pas sur la taille d'un background mais sur l'ensemble de la boîte.

3- "le mot et le background se replace tout à gauche de la page !"
Ce qui s'est passé est que la boîte .menu qui occupait toute la largeur de page, n'occupe plus que 80px (elle est toujours calée sur le bord gauche de la page, cela n'a pas changé)

4- "position: absolute; left: 50%;".
Oui, position absolute sort ta boîte .menu du flux et elle va se positionner à 50% du bord gauche à présent.

5- "J'aimerai donc vous demander de l'aide pour savoir comment faire dans cette situation ?"
C'est là que je ne suis pas sûr de ma réponse parce que... je ne sais pas ce que tu veux obtenir au final.
Si tu souhaites simplement center ta boîte .menu horizontalement, tu n'as pas besoin de la positionner en absolute. Une largeur (width) et des marges automatiques suffisent : https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Si ce n'est pas ça que tu souhaites, eh bien...

Raphael a écrit :

Si tu souhaites simplement center ta boîte .menu horizontalement, tu n'as pas besoin de la positionner en absolute. Une largeur (width) et des marges automatiques suffisent : https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Si ce n'est pas ça que tu souhaites, eh bien...

Bonjour Raphael,

Tout d'abord merci pour ta réponse, je ne voyais pas les choses cela concernant les boîtes tu as éclairer ma vision sur ce point !

Voici un screenshot gyazo pour éclairer ta vision : https://i.gyazo.com/de3c8a1ec506026c979362c617e8da5c.png

Ma boîte qui contient background ainsi que mon texte se trouve tout à gauche. Je tente le centrer en dessous du bouton menu (en fait la boite s'affiche lorsque ma souris passe par dessus le bouton menu).
Pour menu j'ai utilisé :

width: 80px;
position: absolute ou fixed; // (je ne comprend pas réellement la différence entre les deux)
left: calc(50% - 40px);

Mon menu peut donc se placer au centre de la page quelque soit la taille de la page (il est donc responsive). Je cherche à faire la même chose avec ma boîte qui contient background/4 block et du texte. J'ai déjà essayer :

width: auto;
position: absolute ou fixed;
left: calc(50% - (width/2) )

Mais il semble qu'on ne peut pas utiliser Width comme une variable en CSS. Je suis donc à cour de solution.

Je te remercie pour ton aide et te remercie d'avance si tu peux m'aider à trouver une solution !
Modifié par Rayhan (25 Jan 2019 - 12:34)

OK je comprends mieux en effet

"Ma boîte qui contient background ainsi que mon texte se trouve tout à gauche. Je tente le centrer en dessous du bouton menu"
-> Très bien, partons sur cet objectif.

"position: absolute ou fixed; // (je ne comprend pas réellement la différence entre les deux)"
-> Je ne veux pas te paraître arrogant mais CSS est un langage comme un autre, il y a des règles et on ne fait pas forcément les choses au hasard sans apprendre et comprendre. Il y a d'excellentes ressources qui expliquent les bases du positionnement CSS et tu devrais franchement prendre le temps de les consulter plutôt que de bidouiller et de produire des résultats insatisfaisants.

"Mais il semble qu'on ne peut pas utiliser Width comme une variable en CSS."
-> Encore une fois, ne le prends pas mal mais la réponse est écrite noir sur blanc (en vrai c'est blanc sur noir) dans le lien que je t'ai donné précédemment : https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

En gros, tu as schématiquement deux façons de centrer horizontalement un bloc tel que ton menu :
1- marges automatiques (margin: auto) si tu précises la largeur de ta boîte. Ce qui n'est pas le cas chez toi puisque tu ne connais pas la largeur
2- position absolute + translate. Cette solution me semble tout à fait adaptée et fonctionnera quelle que soit la largeur de ta boîte.

Bonne chance

Raphael a écrit :

"position: absolute ou fixed; // (je ne comprend pas réellement la différence entre les deux)"
-> Je ne veux pas te paraître arrogant mais CSS est un langage comme un autre, il y a des règles et on ne fait pas forcément les choses au hasard sans apprendre et comprendre. Il y a d'excellentes ressources qui expliquent les bases du positionnement CSS et tu devrais franchement prendre le temps de les consulter plutôt que de bidouiller et de produire des résultats insatisfaisants.

"Mais il semble qu'on ne peut pas utiliser Width comme une variable en CSS."
-> Encore une fois, ne le prends pas mal mais la réponse est écrite noir sur blanc (en vrai c'est blanc sur noir) dans le lien que je t'ai donné précédemment : https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

J'ai déjà pu lire un exemple des positions sur dez.mozilla dans la partie "position" quand j'ai voulu les utilisés (j'essaye de me renseigner avant d'utiliser du code sans comprendre) mais le problème c'est que "fixed" et "absolute" me semble proche ... bien trop proche même, pour moi elles font la même chose à quelques chose près

Concernant les variables j'ai pu vu que Less CSS et SCSS permettent d'utiliser des variables.

a écrit :
1- marges automatiques (margin: auto) si tu précises la largeur de ta boîte. Ce qui n'est pas le cas chez toi puisque tu ne connais pas la largeur

J'ai tenter ceci :

Width: 800px;
margin-left: auto;
margin-right: auto;

Et je n'ai absolument rien comme résultat .
Modifié par Rayhan (25 Jan 2019 - 15:25)

Rayhan a écrit :

mais le problème c'est que "fixed" et "absolute" me semble proche ... bien trop proche même, pour moi elles font la même chose à quelques chose près

C'est effectivement assez proche dans la mesure ou les deux sortent l'élément du flux (contrairement à position relative).
La différence est que :
- position fixed se réfère à la page (au viewport)
- position absolute se réfère au premier ancêtre positionné

Rayhan a écrit :

Concernant les variables j'ai pu vu que Less CSS et SCSS permettent d'utiliser des variables.

Certes. Mais LESS et Sass sont des langages compilés et une fois qu'ils sont transformés en CSS compréhensibles par le navigateur, tes variables ne sont plus du tout variables, elles sont forcément constantes.
Note : les "vraies" variables CSS existent toutefois mais ne sont pas reconnues par IE.

Rayhan a écrit :

Et je n'ai absolument rien comme résultat

Tu as volontairement choisi la méthode que je ne t'ai pas conseillée ?
En fait tu ne connais pas la largeur de ton menu donc il vaut vraiment mieux éviter cette méthode.
Ensuite :
- sur quel élément tu as appliqué ces propriétés ? sur .menu ?
- tu as supprimé d'abord les positionnements hors-flux tels que absolute ou relative ? (sinon ça ne fonctionnera pas).

En réalité, je te conseille vraiment plutôt vivement la seconde approche : avec position absolute + translate sur .menu.

Raphael a écrit :

Tu as volontairement choisi la méthode que je ne t'ai pas conseillée ?

Oui j'ai essayer par curiosité

Raphael a écrit :

En fait tu ne connais pas la largeur de ton menu donc il vaut vraiment mieux éviter cette méthode.
Ensuite :
- sur quel élément tu as appliqué ces propriétés ? sur .menu ?
- tu as supprimé d'abord les positionnements hors-flux tels que absolute ou relative ? (sinon ça ne fonctionnera pas).

J'ai défini mon menu avec "Width: 80px;" pour le bloc du sous menu c'est "Width: 780px;" normalement.

Raphael a écrit :

En réalité, je te conseille vraiment plutôt vivement la seconde approche : avec position absolute + translate sur .menu.

J'ai du oublier de préciser comment est construite mon architecture ... le menu et le sous menu qui apparait ne sont pas dans le même bloc. J'ai mis une image qui explique comment mes blocs sont mis en place. Ici .menu n'as aucune relation avec .sous-menu hormis le fais que le sous-menu apparait si la souris passe sur le bloc .menu !


Modifié par Rayhan (25 Jan 2019 - 16:05)

Rayhan a écrit :

J'ai défini mon menu avec "Width: 80px;" pour le bloc du sous menu c'est "Width: 780px;" normalement.

OK. Effectivement, je n'avais pas du tout saisi que ".menu" n'est pas le menu mais simplement le bouton qui fait apparaître le menu.
C'est déjà plus clair.
En passant, pourquoi vouloir absolument imposer une largeur à ton bouton (80px) ? Ce n'est pas nécessaire et surtout ça peut poser des problèmes si tu dois changer le texte ou si le visiteur a besoin d'agrandir la taille des textes pour des raisons d'accessibilité.

Rayhan a écrit :

J'ai du oublier de préciser comment est construite mon architecture

Oui en effet je le crains

Rayhan a écrit :
Ici .menu n'as aucune relation avec .sous-menu hormis le fais que le sous-menu apparait si la souris passe sur le bloc .menu ! ]

OK ce n'est pas un souci.

Remplace tout ce que j'ai dit avec ".menu" par ".sous-menu"

EDIT : tu as une version sur Codepen par hasard ?
Modifié par Raphael (25 Jan 2019 - 16:45)

Raphael a écrit :

En passant, pourquoi vouloir absolument imposer une largeur à ton bouton (80px) ? Ce n'est pas nécessaire et surtout ça peut poser des problèmes si tu dois changer le texte ou si le visiteur a besoin d'agrandir la taille des textes pour des raisons d'accessibilité.

Je voulais lui donner une forme bien précise mais j'imagine qu'utilise margin-left/right est plus pratique ?

Raphael a écrit :
EDIT : tu as une version sur Codepen par hasard ?

Oui voici le lien : https://codepen.io/BirdOne/pen/ZwGzpm

J'ai demander de l'aide à un ami, il semblerait que mettre du texte sur des balises <ul> provoque des noeuds de texte et fasse mal fonctionner le code.

Je t'ai fait une version revisitée rapide : https://codepen.io/raphaelgoetter/pen/RvrVjN

Il y aurait pas mal de détails à revoir mais c'est un début

Bon week-end !

Raphael a écrit :
Je t'ai fait une version revisitée rapide : https://codepen.io/raphaelgoetter/pen/RvrVjN

Il y aurait pas mal de détails à revoir mais c'est un début

Bon week-end !

Bonjour Raphael,

J'espère que tu as passé un bon week end . J'ai regardé le code vendredi soir et ça marche parfaitement hormis au niveau "responsive". En effet le block garde la même taille quelque soit la taille de l'écran (ce qui pose problème car je cherche à ce que la taille du block s'adapte). J'ai regardé un peu sur internet et j'aimerai de demander : conseilles-tu des médias queries pour palier à ce problème ?

Rayhan a écrit :
conseilles-tu des médias queries pour palier à ce problème ?

Généralement, la réponse est oui.
Dans ton cas, si le bloc garde la même taille c'est simplement parce que tu lui as imposé une largeur en pixels.

Raphael a écrit :

Généralement, la réponse est oui.
Dans ton cas, si le bloc garde la même taille c'est simplement parce que tu lui as imposé une largeur en pixels.

J'ai imposer aux blocks sous menu une largeur de 160px ainsi que des marges pour pouvoir leur donner une forme qui convient visuellement je n'ai donc pas vraiment le choix que de recourir à des medias queries ?

Merci pour ton aide.

Rayhan a écrit :
je n'ai donc pas vraiment le choix que de recourir à des medias queries ?

Vu tes contraintes je dirais oui.

Bon courage

Raphael a écrit :

Vu tes contraintes je dirais oui.

Bon courage

Bonjour Raphael,

J'ai finalement réussi à faire correctement le menu que je souhaite faire avec les média queries. Je te remercie grandement pour aide qui m'a été très utile et instructive !

Bonne journée
Modifié par Rayhan (29 Jan 2019 - 14:18)