Bonsoir à tous,

Je me permets de poster ce message étant donné que je n'arrive pas à effectuer ce que je veux en CSS. Je m'explique: je veux centré un menus de navigation au milieu de ma page web pour n'importe quel écran. Je n'arrive pas à le faire donc je viens chercher de l'aide. Je cherche à ce que l'espace entre le deuxième et le troisième soit pile au milieu de l'écran. Merci

Voici les codes:

/*/*//*NAVIGATION MENUS*//*/*/
#menus_navigation ul{
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	top: 90%;
	display: flex;
	list-style-type: none;
}
#menus_navigation li{
	margin-right: 70%;

}
#menus_navigation a{
	color:rgba(0, 0, 0, .4);
	text-decoration: none;
	font-weight: bold;
}
#menus_navigation a:hover{
	color: rgba(0,0,0, .7);
}
/*/*//*FIN NAVIGATION MENUS*//*/*/

<footer>
        <div id="menus_navigation">
                <ul>
                    <li><a href="HTML_page_projets_francais.html">Projets</a></li>
                    <li><a href="#">Réalisations</a></li>
                    <li><a href="HTML_page_photographies_francais.html">Photographies</a></li>
                    <li><a href="HTML_page_contact_francais.html">Propos</a></li>
                </ul>
        </div>
    </footer>

Je pense qu'il faut revoir totalement ton code, il n'est pas du tout bien fait, franchement, évite les positions absolute.

Tien, un code qui va je pense mieux marcher en plus il s'adapte à la vue mobile

<div class="footer">
    <a>AAAAA</a>
    <a>BBBBB</a>
    <a>CCCC</a>
    <a>DDDD</a>
</div>

<style>

*{
 margin: 0; padding:0; 
}
  
.footer{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  background:#202020;
  color:white;
  min-height:10vh;
  flex-wrap:wrap;
}
.footer a{
 margin: 1rem 3rem;
}
</style>

-
Edité par J-D-K 16 novembre 2019 à 10:37:25

Bonjour Xc0065,

Pour moi, la proposition de J-D-K ne répond pas à ce que tu désir.

Perso, je ne vois pas comment faire cela en 100% CSS (sauf si tes li ont la même taille), il faut passer par le Javascript

Un exemple rapide :

https://codepen.io/Zonecss/pen/rNNQQKm

-
Edité par AliasDmc 16 novembre 2019 à 19:18:30

Tu peux le faire sans js, renseigne toi sur les flex: 1;

Tu verras, je pense que tu trouveras ta réponse

-
Edité par J-D-K 16 novembre 2019 à 17:09:43

la première chose dont tu as probablement besoin est de 4 li de la même largeur pour ne pas retoucher ton code HTML.

Pourquoi le positionnement en absolute ? posé ton menu en bas de page ? c'est ce que ton code suggère https://jsfiddle.net/yb6hc0qu/ mais pourquoi ul et pas footer ?

flex est évoqué et peut-être utile ici , autant pour unifié la largeur de tes li que pour positionner ton footer en pied de page , position:sticky peut alors te servir à le scotcher en bas de page quoiqu'il arrive.

Mais   column CSS + max-content  peuvent aussi t'aider a faire que tes li aient toutes la même largeur et qu'elles soient centrées sans que l'on soit obligé de définir une largeur à ul .

exemple avec column-count et width:max-content pour nos plus récents navigateurs :

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#menus_navigation ul {
  column-count: 4;/* nombre de li */
  list-style-type: none;
  width: max-content;
  margin: auto;
}
li {
  border: solid;
}

 Pour envoyer ton pied en bas de page et ensuite le scotcher là, flex et position pourraient t'être utile:

exemple

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
footer {
  margin-top: auto;/* envoi le pied en bas si page vide */
  position: sticky;/* on lui dit qu'il est collant ! */
  bottom: 0;/* on le garde à sa place */
}

cela donne ceci https://jsfiddle.net/yb6hc0qu/1/

___________

infos à propos des colonnes CSS  https://developer.mozilla.org/fr/docs/Web/CSS/columns

-
Edité par gcyrillus 16 novembre 2019 à 19:15:56

G-cyrillus, comment devrais-je postionner mon menu footer en bas sans utiliser la position absolute ?

JDK :  pourquoi ne dois je pas utiliser la position absolute ?

-
Edité par Xc0065 17 novembre 2019 à 13:52:25

Xc0065 a écrit:

G-cyrillus, comment devrais-je postionner mon menu footer en bas sans utiliser la position absolute ?

je te donne un exemple avec flex , qu'est ce que tu ne comprends pas ? (il y a d'autre possibilité sans se servir du positionnement absolu mais flex ou grid sont les mieux adaptés aujourd'hui).

JDK :  pourquoi ne dois je pas utiliser la position absolute ?

Je te pose la question justement, pourquoi choisis tu le positionnement absolu au risque de devoir bidouiller et calculer sa hauteur pour qu'il ne passe pas au dessus du reste ?

Si tu maitrises ton positionnement en absolu, alors tout va bien.

Cdt