Discussion :

[elkaktus]

Bonjour à tous,

Je développe une interface pour une base de données en HTML/CSS en utilisant Flex pour la disposition des éléments. Tout marche parfaitement sauf une chose : j'ai un menu en haut à droite de l'écran avec trois liens, mais le soucis c'est que les 3 liens sont collés ensemble, il n y a pas d'espace entre.

Ma question est donc : est-il possible de régler l'espacement entre ces liens ?

(Une petite illustration... Voici le fameux menu)


Mon code css du menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#menu{
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: space-around;
    background-image: url("back_menu.png");
    background-repeat: repeat-x;
    margin: auto;
    flex-flow: row-wrap;
    box-sizing : border-box;
}

Existe-t-il une propriété CSS qui permet d'ajouter un peu d'espace entre les liens ?

Merci pour votre aide

[Manequin]

Bonjour, poste le bout de code html du menu.

Cordialement.

[elkaktus]

Voilà le code du menu

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="menu">
    <a href="index.php">Accueil</a>
    <a href="vehicules.php">Véhicules</a>
    <a href="temps_retouche.php">Temps de retouche</a>
</div>

[Manequin]

modifie ton code html comme ceci:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div >
<ul id="menu">
	<li><a href="index.php">Accueil</a></li> 
    <li><a href="vehicules.php">Véhicules</a></li>
    <li><a href="temps_retouche.php">Temps de retouche</a></li>
</ul>
</div>

Et ton CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#menu li{
    display : inline;
	padding : 0 0.5em; /*espace entre bouton*/
}
 
#menu{
	list-style-type : none; /*pour caher les puces*/
}

cordialement.

[elkaktus]

Merci pour ta réponse.

En revanche, ça marche pas tout à fait :


J'ai essayé de jouer avec les paramètres margin et padding sans succès.

Sinon n'existe-t-il pas un moyen en utilisant flex ?

[Manequin]

Ah, tu veux utiliser flex.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#menu{
display:flex;
justify-content: espace-around;}

Si c'est pas ça, réexplique ton problème en présentant un exemple.

Cordialement.

[elkaktus]

space-around me centre le menu et s'étale sur l'écran. C'est pas vraiment ce que je veux. Je veux que mon menu parte de la gauche de l'écran (donc flex-start). Sauf qu'avec flex-start les liens sont collés ensemble. C'est pas possible de pouvoir rajouter un peu d'espace entre chaque lien ?

[psychadelic]

le padding ne marche pas ?

[elkaktus]

Le padding n'a aucun effet avec flex.

J'ai retesté de mettre mon menu en inline, position absolute. J'arrive à positionner le menu avec les propriétés top et left et des valeurs négatives, mais en revanche mes liens sont écrasés : ils commencent tous au coin gauche de l'écran superposés, aucun espace entre eux.

[elkaktus]

Bon problème résolu avec inline-block, position relative, les propriétés top et left négatives pour positionner, et margin-right pour l'espace entre les liens.

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#menu li {
    display: inline-block;
    position: relative;
    left: -30px;
    top: -12px;
    margin-right: 20px;
}

Merci pour les pistes

[Manequin]

Merci.

Cordialement.