Créer un espace entre plusieurs boutons sur un menu vertical

**Marc31** · 01/06/2015, 15h52

Bonjour,

Je vous écris car j'aimerais savoir comment faire pour écarter les boutons entre eux dans un menu vertical.
Car j'y arrive sur un menu horizontal avec padding mais il y a rien à faire quand le niveau est vertical....

Merci

Invité · 01/06/2015, 16h03

Bonjour,
margin ?

Sans voir ton code... (CSS + HTML associé)...

**Marc31** · 01/06/2015, 16h11

Oui c vrai

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
14
15
16
17
18
19
20
21
<div id="menu">
	<ul class="niveau1">
	    <li class="sousmenu"><a href="page1.php">Lien 1</a>
	        <ul class="niveau2">
	            <li><a href="page4.php">Sous-Lien 1.1</a></li>
	            <li><a href="page4.php">Sous-Lien 1.2</a></li>
	            <li><a href="page4.php">Sous-Lien 1.3</a></li>
	 </ul>
	    <li class="sousmenu"><a href="page2.php">Lien 2</a>		  
	        <ul class="niveau2">
	            <li><a href="page5.php">Sous-Lien 2.1</a></li>
	            <li><a href="page4.php">Sous-Lien 2.2</a></li>
	            <li><a href="page4.php">Sous-Lien 2.3</a></li>          
	   </ul>
	   <li class="sousmenu"><a href="page3.php">Lien 3</a>    
               <ul class="niveau2">
		    <li><a href="page6.php">Sous-Lien 3.1</a></li>
		    <li><a href="page6.php">Sous-Lien 3.2</a></li>
		    <li><a href="page6.php">Sous-Lien 3.3</a></li>
		</ul>
</div>

CSS

Code :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
div#menu { 
           width: 100px;  } 
div#menu ul { 
              padding: 0 0px; 
              width: 100px; 
              border:1px solid; 
              margin:0px; 
             } 
/*On positionne les elements du menu */ 
div#menu ul li {       
                  position:relative; 
                 list-style: none; /*on enleve les icones de liste */ 
                 border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/ 
                } 
div#menu ul ul { 
                 position: absolute; 
                 top: 0; 
                 left: 100px; /*100px correspond au d calage a droite, on d cale de la taille du ul de base*/ 
                }   
div#menu li a { 
                text-decoration: none; /* plus de soulignement pour les liens */ 
               } 
/* fichier pour internet explorer */ 
body 
      { 
         behavior: url(csshover.htc); 
      } 
/* On cache tous les sous menu avec la propri t display none */ 
div#menu ul ul 
{ 
         position: absolute; 
         top: -1px; 
         left: 100px; 
         display:none
 } 
/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */ 
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 { display:block;}
/* fond blanc pour le menu */ 
div#menu a 
{ 
             color:#000000 } 
/* fond different au survol de la souris entre les sous-menu et les "basiques"*/ 
div#menu li:hover 
{ 
                    background: #EDD } 
div#menu li.sousmenu:hover 
{                     
  background: grey; } 
/* Rajout d'une petite fleche pour les sous menu (j'ai pioch cette astuce sur le web ;) )*/ 
div#menu li.sousmenu 
{           
  background: url(fleche.gif) 95% 50% no-repeat;  } 
/* on rajoute une bordure a gauche et des padding, on doit donc r ajuster la taille 100-(8 de bordure + 8 de padding) =84 */ 
div#menu li a {      
  text-decoration: none; 
                padding: 4px 0 4px 8px; 
                display:block; 
                border-left: 0px solid #BBB; width:95px } 
/* la bordure de chaque hauteur a une couleure de survol*/ 
div#menu li a:hover 
{ 
                      border-left-color: red; } 
div#menu ul ul li a:hover 
{ 
                            border-left-color: blue;    } 
div#menu ul ul ul li a:hover 
{  border-left-color: yellow; }

Merci