Discussion :

[bouchette63]

Bonjour,

Je sollicite votre aide pour régler mon petit problème.
J'essaye de réaliser un menu simple en CSS, mais je bloque au niveau de la mise en forme. J'aimerais ajouter un cadre noir entre chacun de mes boutons comme sur l'image suivante :



Mais je n'arrive pas à obtenir ce résultat.

Voici l'image affichée de mon menu :



Mon code CSS :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
 
div#menu
{
 
}
 
div#menu ul 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
      line-height: 30px;
	white-space: nowrap;
}
 
div#menu li 
{
	list-style-type: none;
	display: inline;
}
 
div#menu li a 
{
	text-decoration: none;
	color: black;
	padding: 7px 6px;
}
 
div#menu li a:hover 
{
	color: white;
      background-color: #B17046;
}

Mon code HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="menu">
   <ul>
	<li><a href="link1.html">Accueil</a></li>
	<li><a href="link1.html">Présentation du 4L Trophy</a></li>
	<li><a href="link2.html">Présentation de la CusTrophy</a></li>
	<li><a href="link3.html">Planning</a></li>
	<li><a href="link3.html">Photos</a></li>
	<li><a href="link3.html">Carnet de bord</a></li>
	<li><a href="link3.html">Nos sponsors</a></li>
	<li><a href="link3.html">Contact</a></li>
   </ul>
</div>

Merci pour votre aide.

[Dan_A]

à tester :
ajoute border:1px solid black; dans #menu ul
puis border-right:1px solid black; dans #menu li a
il faudra sans doute une classe sans bordure pour le dernier lien

[Strix]

Salut.

Avec ce code tu auras un menu tout beau tout propre

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
div#menu ul 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	line-height: 30px;
	white-space: nowrap;
} 
div#menu li 
{
	line-height: 30px;
	list-style-type: none;
	display: inline;
	float: left;
}
div#menu li a 
{
	border: 1px #000 solid;
	border-right:none;
	text-decoration: none;
	color: black;
	padding: 7px 6px;
}
div#menu li a:hover 
{
	color: white;
	background-color: #B17046;
}
.bdroit {
	border-right: 1px #000 solid;
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="menu">
	<ul>
	 <li><a href="link1.html">Accueil</a></li>
	 <li><a href="link1.html">Présentation du 4L Trophy</a></li>
	 <li><a href="link2.html">Présentation de la CusTrophy</a></li>
	 <li><a href="link3.html">Planning</a></li>
	 <li><a href="link3.html">Photos</a></li>
	 <li><a href="link3.html">Carnet de bord</a></li>
	 <li><a href="link3.html">Nos sponsors</a></li>
	 <li class="bdroit"><a href="link3.html">Contact</a></li>
	</ul>
</div>

À bientôt

[bouchette63]

Merci pour ta réponse Dan_A, mais ça ne marche pas comme je le veux avec ta méthode.

Par contre j'ai essayé ton code Strix et ça fonctionne nickel
Merci beaucoup.