Voila quelques heures que je navigue sur le net en recherchant une solution simple à mon problème mais je ne trouve pas vraiment ce que je cherche... Je veux créer un menu de navigation avec :
A gauche un Logo Au centre des liens cliquables
J'ai donc créé :
Une div footer qui englobe le tout (rectangle rouge) A l'intérieur de cette Div footer, une div contenant mon image (rectangle bleu) A l'intérieur de cette Div footer, une div placé à droite de mon image mais qui doit être centré par rapport à la page, problème celle-ci ce centre par rapport à ma page + à mon image. (rectangle vert)
Je vous joins un screen de mon problème ainsi que mon code HTML et CSS :)
Comme vous le voyez, le centrage de mon lien Accueil est décalé, cela est dû au fait qu'il ce centre en prenant en compte la div qui contient mon image. Comment faire pour corriger cela ?
Merci par avance !
- Edité par FalcaredGunson 5 décembre 2024 à 11:42:39
J'avais déjà essayé de mettre mon logo en position: absolute; Mais deux problèmes apparaissent :
- En sortant du flux, ma div footer ne s'adapte plus à la taille du logo, et par conséquent, la hauteur ne peut plus se définir de manière automatique. - Mon lien devient centré mais étant donné que ma Div footer n'agit plus en matière de hauteur, le lien se trouve centré tout en haut de ma page mais plus par rapport à la div
Je pourrais utiliser cette solution en trichant et en créant un bouton de la taille exacte de mon logo en plaçant son écriture en bas avec un text-align etc. Mais là n'est pas mon but, je pourrais le faire facilement en "trichant" mais mon but pour ce bout de code est d'avoir le code le plus propre et le plus simple possible
- Edité par FalcaredGunson 5 décembre 2024 à 12:59:40
A vrai dire (je fais peut être fausse route) mais je veux créer un site 100% responsive.
Et ne pas déclarer la hauteur du footer fait en sorte qu'elle s'adapte au logo sans avoir à gérer ce paramètre.
Il est vrai que je peux "bloquer" sa taille en lui indiquant une taille fixe en pixel et non pas en em. Cela me permettrait d'avoir un footer avec une hauteur fixe, qui soit toujours égal à la taille du logo peut importe le support sur lequel le site s'affiche.
Mais j'ai peur que cela rende le code "brouillon". D'un côté j'aurais des tailles définies en pixel, de l'autre de tailles définies en em, parfois en mettant des tailles pour combler les utilisations des div (comme dans ce cas) et ça peut vite faire très fouillis.
Je veux coder de manière propre et professionnel, jusqu'à maintenant j'ai toujours codé en bidouillant pour m'en sortir
Je veux donc chercher à réussir ce bout de code en incluant 0% de "bidouillage" Après peut être que la seule solution viable est de passer le logo en position absolute, de définir une hauteur fixe à mon footer ... mais je voudrais en avoir le coeur net parce que si je commence à coder en contournant les problèmes de cette manière, sur 10 lignes de codes ça va, sur 1000 ça va être un bordel sans nom
De plus, petit update de mon message : en sortant le logo du flux et en le passant en position absolute mais en définissant une taille au footer, j'ai une solution fonctionnelle mais non-responsive.
Car dans le cas d'un affichage sur un vrai petit écran (mais vraiment petit ), le lien finira par traverser le logo, justement car il sort du flux
- Edité par FalcaredGunson 5 décembre 2024 à 13:50:15
autre possibilité, c'est d'utiliser grid et de mettre les deux éléments dans la même cellule, aligné l'un à gauche et l'autre centré. Par contre c'est le même désavantage que position: absolute, il peut y avoir une superposition des éléments sur petit écran, il faudra bien tester.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Solution la plus appropriée et la plus simple : (sauf si quelqu'un trouve mieux je suis preneur
Bien que je ne voulais pas en arriver là et malgré de nombreuses recherches il semble que la solution dont j'avais connaissance et qui a été discutée avec ChrisLebure est la plus simple et la plus courte !
J'ai fais passer la DIV de mon logo en position:absolute;
- Ce qui me permet donc que la DIV lien soit automatiquement et correctement centré avec le paramètre margin:auto;
Cela implique de préciser la hauteur de la DIV footer (car avec position:absolute le logo sort du flux) afin qu'elle soit égal à la hauteur du logo.
je vous partage le CSS modifié et une image du résultat
PS : D'autres solutions existe, comme générer un script en javascript pour automatiquement calculer la hauteur de l'image et ajuster le footer en temps réel etc, mais c'est du code à générer pour pas grand chose et qui rendrait la page plus "lourde"
Grâce à la suggestion de gcyrillus, je te propose une autre possibilité avec grid : trois cellules, dont deux avec la même taille, celle du logo, dont une reste vide (bonus, elle n'existe pas dans le DOM, elle est juste… pas assignée).
Je pense que grid n'est pas encore assez flexible pour ce logo de 300px de large ;) en réduisant la largeur, on finit par perdre le menu si on ne le transform pas en hamburger
edit: c'est quoi la réelle taille de ton logo ? sur tes screen il fait 60x300 et ton css lui donne une hauteur de 47px a footer ?
Je pense que grid n'est pas encore assez flexible pour ce logo de 300px de large ;) en réduisant la largeur, on finit par perdre le menu si on ne le transform pas en hamburger
edit: c'est quoi la réelle taille de ton logo ? sur tes screen il fait 60x300 et ton css lui donne une hauteur de 47px a footer ?
- Edité par gcyrillus il y a environ 1 heure
C'est en transférant l'image que j'ai modifier sa taille histoire d'éviter de mettre un screen qui soit immense sur le fofo Sinon je confirme que sa taille réelle est bien de : 247 x 47
Lamecarlate : Je voulais le code le plus simple possible sans trop le modifier et rendre le css trop lourd donc en soit même si ça me force à indiquer une taille en pixel...
Gros update : Solution Parfaite (même si légère indication en pixel)
Je viens de dénicher une solution parfaite grâce à un attribut positon assez récent que je ne connaissais pas du tout !
Il s'agit de l'attribut position: sticky;
C'est un genre d'hybride entre la position fixe et la position relative. Il sert en gros à dire "tu seras en position relative jusqu'à un certain point"
Dans mon cas je lui ai donc attribué un paramètre left: 247px; Ce qui se traduit par : tu restera au centre en fonction de la largeur de page, mais une fois à une valeur de 247px (correspondant à la largeur de mon logo) tu arrêtes de bouger !
Et ça fonctionne parfaitement ! Je vous laisse découvrir le CSS mis à jour et deux photos montrant le résultat selon la taille de ma page !
Je sais que j'avais clôturé ce sujet. Mais je n'étais pas 100% satisfait du résultat, mettre des valeurs en pixel pour combler des positions absolute etc. Tout ça faisais très bidouillage et je voulais justement l'éviter.
J'utilise ici un systeme de flexbox. En gros j'ai créé 3 boites, une à gauche, une au centre, une à droite.
J'ai donné à mon menu l'attribut "space-between" pour que chaque boite soit séparé en prenant toute la largeur de l'écran. Je leur ai donné l'attribut flex:1 pour qu'elle occupe la même place sur la page.
Ma première flexbox comprend le logo. La deuxième flexbox comprend les liens. La troisième flexbox est vide et me sert juste à prendre l'espace restant à droite pour être sûr que mes éléments soit bien positionner.
L'attribut flex-wrap me permet également de faire en sorte que sur un écran vraiment petit, les flexbox se placent les une en dessous des autres. Je vous joins une image ça sera bien plus parlant
- Edité par FalcaredGunson 8 décembre 2024 à 20:29:23
Pas d'aide concernant le code par MP, le forum est là pour ça :)
fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui
Pas d'aide concernant le code par MP, le forum est là pour ça :)
fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui