comment aligner mon menu : images les unes a coté des autres

**gaya102** · 06/03/2009, 16h44

cordialement
Voila je voudrais savoir comment je peux mettre toutes mes images sur la meme ligne

http://www.sandrineetgwen.fr/emelinepresentation.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
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
87
88
89
90
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
 
<title>Menu déroulant horizontal à plusieurs niveaux en DHTML</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="Robots" content="follow" />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
 
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
 
 <!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
 
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
    @import "design_emeline411.css";
</style>
 
 
 
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline411.css" />
</head><body>
 
 
 
<!-- liste imbriquée de liens qui fera office de menu -->
<div id="unite"> 
<a href="emeline_index.html"><img src="image/emeline_rub.jpg" /></a>
<ul id="menu">
    <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="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
		<li><img src="image/oiseau1_rub.jpg" style="float: left" /></li>
 
    </li>
    <li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>
 
        <ul>
 
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
		<li><img src="image/oiseau2_rub.jpg" /></li>
    </li>
    <li><a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
 
        <ul>
 
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
 
		<li><img src="image/oiseau3_rub.jpg"></li>
 
    </li>
	<li><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" style="float: left" class="rollOver" /></a>
	<li><img src="image/oiseau4_rub.jpg"></li>
 
    </li>
</ul>
</div>
<script type="text/javascript">
    initMenu();
</script>
<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>

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
87
88
89
90
91
92
93
94
95
96
97
98
body
{
 font: 11px verdana, sans-serif;
 background: #AFA99B;
 margin: 0;
 padding: 0;
}
 
 
#unite
{
width: 980px;
height: 542px;
margin: auto;
border :2px solid black;
}
 
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
border :2px solid black;
}
 
/* CSS du menu horizontal, bieler batiste */
 
.menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:500px;
    }
 
.menu ul{
    position:absolute;
    display:block;
    width:124px;
    /*margin:0;*/
    padding:0;
    }
 
.menu li ul{
    visibility:hidden;
    }
 
.menu li li ul{
    position:absolute;
    margin-left:124px;
    margin-top:-23px;
    }
 
.menu li{
    list-style:none;
    width:124px;
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
 
.menu li li{
    display:block;
    float:none;
    }
 
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }
 
.menu a{
    text-align:center;
    background-color: #9cf;
    border:0px #666 solid;
    color:#000;
    display:block;
    width:120px;
    text-decoration:none;
    padding:0px 0;
    margin:0spx;
    }
 
.menu a:hover{
    background-color: #eee;
     }
 
.menu a:focus{
    background-color: #aaf;
}
 
a.linkOver{
    background-color: #eee;
    }

merci d'avance

**desert** · 06/03/2009, 22h06

Ce qu'il faudrait faire :
- Supprimer les style="float: left" à l'intérieur de ton code html qui sont inutiles.
- Retirer les balises li qui sont à l'intérieur d'autres balises li et les mettre en dehors. Par exemple, ici, prendre ce qui est en rouge et le mettre à la place de ce qui est en vert :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
...
<li><a href="emelinepresentation.html"><img src="presentation_rub_off.jpg" alt="presentation_rub_on.jpg" class="rollOver" /></a>
    <ul>
        <li><a href="#">élément 1</a></li>
        <li><a href="#">élément 2</a></li>
        <li><a href="#">élément 1</a></li>
        <li><a href="#">élément 3</a></li>
    </ul>
    <li><img src="oiseau1_rub.jpg" /></li>
</li>
<li><img src="oiseau1_rub.jpg" /></li>
...

- Ajouter les attributs alt à toutes tes images qui n'en ont pas.
- Ajouter un id à ton logo-image.
- Remplacer tout ce qui concerne ton menu par ceci :

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
34
35
36
37
38
img { 
    border: 0; 
    display: block; 
}
 
#logo { /* mettre l'id choisi pour le logo */
    float: left;
}
 
#menu {
    padding: 0;
    margin: 0 0 0 229px;
}
 
#menu li {
    float: left;
    list-style: none;
}
 
#menu li ul {
    display: none;
}
 
#menu a {
    display: block;
    text-align: center;
    background-color: #9cf;
    color: #000;
    text-decoration: none;
}
 
#menu a:hover {
    background-color: #eee;
}
 
#menu a:focus {
    background-color: #aaf;
}

**gaya_102** · 07/03/2009, 09h30

merci de ton aide a quoi sert les les alt en fait.
Je dois en mettre aussi a mes images oiseaux?

**Alt157** · 07/03/2009, 09h56

bonjour,

cela sert a afficher un texte alternatif en cas d'impossibilité, pour le navigateur, d'afficher l'image. Tu peux également ajouter le title avec la même chose que dans le alt

petit lien utile sur les balses

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

ok donc en fait ca ne m'est pas du tout utile je peux donc les enlever. je préfère qu'il n'y ai rien qui s'affiche si mon image ne s'affiche pas

**Alt157** · 07/03/2009, 10h18

alt est une balise obligatoire normalement... donc si tu veux respecter un minimum les standards cet attribut est obligatoire mais c'est ton choix. penses aussi aux daltoniens, déficients visuels, et à l indexation de ton site...

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

Non je veux faire un code propre et respecter un minimum les standards. Ok je les laisse alors.

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

tu dis "Ajouter un id à ton logo-image"
c'est comme ca?

<li><id="logo"img src="image/emeline_rub.jpg" alt="image/emeline_rub"></li>

car dans se cas l'image ne s'affiche plus

**desert** · 07/03/2009, 14h54

Non. Le nom de la balise (ici img) doit toujours se trouver en premier.

Code css :

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

<img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" />

Mais je ne comprends pas pourquoi tu as mis ton logo à l'intérieur de ton menu.
Il suffisait juste de reprendre le code que tu avais précédemment donné et de faire les quelques modifications que j'avais postés.

**gaya_102** · 08/03/2009, 09h00

Désole j'avais oublié que cette photo était dans un <ul>
J'ai fait la modif comme tu m'as dis
Ca y est l'image apparait mais du coup le menu c'est mis dans une ligne en dessous
http://www.sandrineetgwen.fr/menu.html

**desert** · 08/03/2009, 13h41

Tu as oublié de supprimer la ligne qui contenait ton logo dans le menu, à savoir

Code html :

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

<li><id="logo"img src="image/emeline_rub.jpg" alt="image/emeline_rub"></li>

Tu peux remplacer tout ton code css par celui ci-dessous :

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
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
/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 229px;
	padding: 0;
	margin: 0;
}
 
#menuHorizon li {
	position: relative;
	float: left;
	list-style: none;
}
 
 
#menuHorizon li a {
	display: block;
	line-height: 25px;
	text-decoration: none;
	color: black;
}
 
#menuHorizon li a:hover{
	background-color: black;
	color: white;
} 
 
#menuHorizon li ul {
	position: absolute;
	display: none;
	left: 0;
	padding: 0;
	margin: 0;
	border: 1px solid #000;
}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 150px;
}
 
#menuHorizon li ul li a {
	padding: 0 5px;
}

**gaya_102** · 08/03/2009, 14h06

merci pour ton ca y est ca marche. Juste pour pouvoir l'améliorer. En fait je voudrais que les sous menu soit plus haut. Juste sous présentation par exemple. En tout cas merci vraiment de ton aide.

**Erwan31** · 08/03/2009, 14h35

Bonjour,
le alt sert aussi dans les navigateurs texte comme lynx, aux lecteurs d'écrans (pour les déficient visuels) ou dans le cas ou les images ne seraient pas chargées pour une raison ou une autre.
Veillez à la cohérence et à la bonne compréhension de la page une fois les images déscativées.

Il te faut aussi mettre les attributs height et width, non pas pour la validité de ton document mais pour des raisons d'ergonomie et d'accessibilité.

**gaya_102** · 08/03/2009, 20h48

Envoyé par gaya_102

merci pour ton ca y est ca marche. Juste pour pouvoir l'améliorer. En fait je voudrais que les sous menu soit plus haut. Juste sous présentation par exemple. En tout cas merci vraiment de ton aide.

snif en fait ça marche pas sous internet exploreur

. Comment je peux faire?

**desert** · 09/03/2009, 08h35

Il faut passer par Javascript.
Dans ta balise head, tu dois supprimer ce qu'il y a à l'intérieur de la balise script et le remplacer par ce code :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {
            this.getElementsByTagName("ul")[0] = "block";
        }
        sfEls[i].onmouseout = function() {
            this.getElementsByTagName("ul")[0] = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

**gaya_102** · 09/03/2009, 11h32

j'ai fait se que tu m'as dit mais ca ne marche pas

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

**desert** · 09/03/2009, 12h27

Houlà ! Je suis fatigué moi !

J'ai oublié de rajouter ceci dans le code :

Code javascript :

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

1
2
3
4
5
6
sfEls[i].onmouseover = function() {
    this.getElementsByTagName("ul")[0].style.display = "block";
}
sfEls[i].onmouseout = function() {
    this.getElementsByTagName("ul")[0].style.display = "none";
}

Normalement, ça devrait aller.

**gaya_102** · 09/03/2009, 12h29

snif toujours pas

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
    <script type="text/javascript">
      sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {
            this.getElementsByTagName("ul")[0] = "block";
        }
        sfEls[i].onmouseout = function() {
            this.getElementsByTagName("ul")[0] = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   sfEls[i].onmouseover = function() {
    this.getElementsByTagName("ul")[0].style.display = "block";
}
sfEls[i].onmouseout = function() {
    this.getElementsByTagName("ul")[0].style.display = "none";
}
 
   </script>

**desert** · 09/03/2009, 12h38

Évidemment, si tu les rajoutes (ce que je n'ai pas dis de faire) et en plus à la mauvaise place...

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {
            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

**gaya_102** · 09/03/2009, 12h42

Ca y est cette fois ci c'est la bonne. merci merci

me reste plus qu'a fignoler les sous menu. Est ce que tu sais comment je peux faire pour remonter le sous menu?

comment aligner mon menu : images les unes a coté des autres

Positionnement en CSS

Discussions similaires

Partager

Partager