comment mettre une marge a mon sous menu

**gaya_102** · 07/03/2009, 10h42

bonjour
Je voudrais que mon sous menu s'affiche sous mes boutons

et je ne me souviens plus comment on fait pour eviter que mes boutons ont une bordure comme ca.

http://www.sandrineetgwen.fr/menu.html

voila le code

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
69
70
71
72
73
74
75
76
77
78
79
80
81
/**********************************************************
                  STYLES GENERAUX
**********************************************************/
 
body {
     font-family: arial, helvetica, serif;
     }
 
#premier{
        float: left;
        }
 
 
#second{
       float: left;
       margin-left: 0px; /* decalle tout le mmenu vers la droite*/
       }
 
 
 
#menu, #menu ul, #menuHorizon, #menuHorizon ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
                }
 
#menu a{
       /*width: 10em;*/
       text-decoration: none;
       }
 
#menu li{
        position: relative;
        /*float: left;*/
        width: 10em;
        border: 0px solid black;
        margin-bottom: -1px;/*évite la double bordure*/
        }
 
 
 
/***********************************************************
                     MENU HORIZONTAL
**********************************************************/
 
#menuHorizon a{
      text-decoration: none;
       }
 
#menuHorizon li{
        position: relative;
        float: left;
        width: 10em;
        border: 1px solid black;/* bordure des sous menu*/
        margin-bottom: -1px;/*évite la double bordure*/
        margin-left: -1px;/*idem*/
         }
 
#menuHorizon li ul{
           position: absolute;
           /*margin-left: 10em;
           margin-top: -1.60em;*/
           left: -999em; /* ne pas changer car rend le sous menu visible*/
           display: block;
           }
 
#menuHorizon li a{
          line-height: 25px;
          color: black;
          padding-left: 10px;
          display: block;;
          }
 
#menuHorizon li a:hover{
              background-color: black;
              color: white;
              } 
 
#menuHorizon li:hover ul{
                 left: auto;
                 }

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
  <head>
    <link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
 
    <script type="text/javascript">
      <!--
      sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
     }
     if (window.attachEvent) window.attachEvent("onload", sfHover);
     -->
   </script>     
 
 
  </head>
 
  <body>
<div id="second">
<ul id="menuHorizon">
	  <li><img src="image/emeline_rub.jpg" style="float: left"></li>
      <li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau1_rub.jpg" style="float: left" /></li>
 
      <li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" style="float: left" alt="image/jourj_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau2_rub.jpg" style="float: left" /></li>
 
 
      <li><a href="emelineinfospratiques.html"><img src="image/infospratiques_rub_off.jpg" style="float: left" alt="image/infospratiques_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau3_rub.jpg" style="float: left" /></li>
 
      <li><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" style="float: left" alt="image/contact_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau4_rub.jpg" style="float: left" /></li>
 
 
   </ul>
</div>
<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
 
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
 
			</script>
  </body>
</html>

merci d'avance

**gwinyam** · 07/03/2009, 11h22

Tu mets un lien autour d'une image, du coup il met automatiquement une bordure autour de l'image. Mets "border: 0px" dans le style de tes images de boutons. Tu devrais y voir plus clair

**desert** · 07/03/2009, 11h25

As-tu testé le code que je t'ai donné ici ? La résolution de ton problème s'y trouve pourtant...

**gaya_102** · 07/03/2009, 14h28

oui j'ai adapté les modifs que tu as m'as dit de faire. On y est presque mais y a encore quelque truc qui ne vont pas

Pour le id sur le logo du coup on ne le voit plus et si je met dans le css le style pour le logo j'ai tout qui se met en dessous l'un de l'autre et les sous menus qui s'affiche. Je comprend pas pourquoi.

Ensuite j'ai vu que mes bouton doivent une dimension mais je n'arrive pas à la trouver.
voila la page
http://www.sandrineetgwen.fr/menu.html

et je vous remet le code après certaines modifs

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**********************************************************
                  STYLES GENERAUX
**********************************************************/
 
body {
     font-family: arial, helvetica, serif;
     }
 
#premier{
        float: left;
        }
 
 
#second{
       float: left;
       margin-left: 0px; /* decalle tout le mmenu vers la droite*/
       }
 
 
 
#menu, #menu ul, #menuHorizon, #menuHorizon ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
                }
 
#menu a{
       /*width: 10em;*/
       text-decoration: none;
       }
 
#menu li{
        position: relative;
        /*float: left;*/
        width: 10em;
        border: 0px solid black;
        margin-bottom: -1px;/*évite la double bordure*/
        }
 
img { 
    border: 0; 
    display: block; 
}
 
 
 
/***********************************************************
                     MENU HORIZONTAL
**********************************************************/
 
#menuHorizon a{
      text-decoration: none;
       }
 
#menuHorizon li{
        position: relative;
        float: left;
        width: 10em;
        border: 1px solid black;/* bordure des sous menu*/
        margin-bottom: -1px;/*évite la double bordure*/
        margin-left: -1px;/*idem*/
         }
 
#menuHorizon li ul{
           position: absolute;
           /*margin-left: 10em;
           margin-top: -1.60em;*/
           left: -999em; /* ne pas changer car rend le sous menu visible*/
           display: block;
           }
 
#menuHorizon li a{
          line-height: 25px;
          color: black;
          padding-left: 10px;
          display: block;;
          }
 
#menuHorizon li a:hover{
              background-color: black;
              color: white;
              } 
 
#menuHorizon li:hover ul{
                 left: auto;
                 }

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
  <head>
    <link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
 
    <script type="text/javascript">
      <!--
      sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
     }
     if (window.attachEvent) window.attachEvent("onload", sfHover);
     -->
   </script>     
 
 
  </head>
 
  <body>
<div id="second">
<ul id="menuHorizon">
	  <li><id="logo"img src="image/emeline_rub.jpg" alt="image/emeline_rub"></li>
      <li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau1_rub.jpg" alt="image/oiseau1_rub"/></li>
 
      <li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau2_rub.jpg" alt="image/oiseau2_rub.jpg"></li>
 
 
      <li><a href="emelineinfospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau3_rub.jpg"alt="image/oiseau3_rub.jpg"/></li>
 
      <li><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>
 
 
   </ul>
</div>
<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
 
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
 
			</script>
  </body>
</html>

comment mettre une marge a mon sous menu

CSS

Discussions similaires

Partager

Partager