Menu HTML et feuilles de style

**Jinx_** · 19/03/2007, 18h27

Hello,

Je souhaite incorporer un menu sur mes page web. J'ai essayé de pomper celui de winamp (http://www.todae.fr/). J'ai sauvegardé la page web complete de www.todae.fr (j'ai aussi utilisé le menu contextule e IE7: regarder la source) et puis je suis allé voir dans le code source de la page. Les menu sont en fait des liste LI et UL.

J'ai ouvert la page web "off line" mais le menu ne s'affiche pas correcteemnt (simple LI eu UL). Je suis allé voir dans les feuille de style menu.css mais je n'arrive pas a reproduire ce menu.

Comment prendre ce menu, SVP ?

**Jinx_** · 19/03/2007, 18h58

Jai presque réussit a "exporter" les menus sur ma page web...

**Jinx_** · 19/03/2007, 20h10

Je suis arrivé a quelque chose. Ce quelque chose fonctionne admirablement bien sous FireFox. En revance il ne fonctionne pas sous IE7. ZUT!

Si qq'un est interessé de voir je peux poster mes feuilles de style et le code HTML.

**Jinx_** · 19/03/2007, 20h25

Ca fonctionne bien sous Opera!

Pour IE7 cela reste un probleme. Voial le code source HTLM:

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<HTML>
<HEAD>
<TITLE>Todae | Winamp</TITLE>
<STYLE type=text/css>
@import url(base.css );
@import url(default.css );
@import url(menu.css );
</STYLE>
</HEAD>
 
<BODY topMargin=5 marginheight="5">
 
<TABLE cellSpacing=1 cellPadding=0 width="100%" align=center bgColor=#FFFFFF border=0>
  <TR>
    <TD>
                  <DIV class=menu>
 
 
                  <UL>
 
                    <!-- PREMIER MENU PRINCIPAL -->
                    <LI><A href="">Welcome</A>
                        <UL>
                            <LI><A href="description.php">Descrition</A></LI>
                            <LI><A href="login/login.php">Login</A></LI>
                            <LI><A href="login/register.htm">Register</A></LI>
 
                            <LI><A href="legal/privaty.php">Privaty Statement</A></LI>
                            <LI><A href="legal/legal.php">Legal Mater</A></LI>
                            <LI><A href="contact/contact.php">Contact</A></LI>
                         </UL>
                     </LI>
 
 
                    <!-- SECOND MENU PRINCIPAL 
                    <LI><A href="http://www.tocomplete.fr/">Login</A>
                        <UL>
                            <LI><A href="login/login.php">Login</A></LI>
                            <LI><A href="../login/register.htm">Register</A></LI>
                            <LI><A href="legal/privaty.php">Privaty Statement</A></LI>
                            <LI><A href="legal/legal.php">Legal Mater</A></LI>
                        </UL>
                     </LI>
                     -->
 
 
                    <!-- 3th MENU PRINCIPAL
                    <LI><A href="ism/ism_description.htm">ISM (French)</A>
                        <UL>
                            <LI><A href="ism/ism_description.htm">Description</A></LI>
                            <LI><A href="ism/evs.htm">Electronic vs. Papier</A></LI>
                            <LI><A href="ism/photo_list.php">Photos de classe</A></LI>
                        </UL>
                     </LI>
                      -->
 
 
                    <!-- 4th MENU PRINCIPAL -->
                    <LI><A href="">News & Board</A>
                        <UL>
                            <LI><A href="news/read_news.php">News</A></LI>
                            <LI><A href="news/post_news.php">Post a New</A></LI>
                            <LI><A href="board/show_board.php">Board</A></LI>
 
                        </UL>
                     </LI>
 
 
                    <!-- 5th MENU PRINCIPAL -->
                    <LI><A href="">South Pole Test</A>
                        <UL>
                            <LI><A href="south_pole_test/south_pole_test.php">Description</A></LI>
                            <LI><A href="south_pole_test/show_south_pole_test.php">Take The S.P. Test</A></LI>
 
                        </UL>
                     </LI>
 
 
                    <!-- 6th MENU PRINCIPAL -->
                    <LI><A href="">My Favorite Girls</A>
                        <UL>
                            <LI><A href="mygirls/Catherine_Bell/page.html">Catherine Bell</A></LI>
                            <LI><A href="mygirls/Yasmine_Bleeth/page.html">Yasmine Bleeth</A></LI>
 
                            <LI><A href="mygirls/Sarah_Michelle_Gelar/page.html">Sarah Michelle Gelar</A></LI>
                            <LI><A href="mygirls/Alyssa_Milano/page.html">Alyssa Milano</A></LI>
                            <LI><A href="mygirls/Tiffany_Thiessen/page.html">Tiffany Thiessen</A></LI>
                            <LI><A href="mygirls/Uma_Thurman/page.html">Uma Thurman</A></LI>
                        </UL>
                     </LI>
 
                    <!-- 7th MENU PRINCIPAL -->
                    <LI><A href="">Administration</A>
                        <UL>
                            <LI><A href="administration/administration.php">Administration</A></LI>
                        </UL>
                    </LI>
 
                    </TD>   
                 </TR>   
        </TABLE>   
 
 
</BODY>
</HTML>
 
 
</body>
</html>

Voila la feuille de style pour les menus:

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
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
 
 
.menu {
	FONT-SIZE: 0.85em; Z-INDEX: 100; WIDTH: 750px; POSITION: relative
}
.menu UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menu UL UL {
	WIDTH: 150px
}
.menu LI {
	FLOAT: left; WIDTH: 150px; POSITION: relative
}
.menu A {
	BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #618fcf; BORDER-LEFT: #ffffff 0px solid; WIDTH: 139px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #ffffff 0px solid; HEIGHT: 20px; TEXT-DECORATION: none
}
.menu A:visited {
	BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #618fcf; BORDER-LEFT: #ffffff 0px solid; WIDTH: 139px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #ffffff 0px solid; HEIGHT: 20px; TEXT-DECORATION: none
}
* HTML .menu A {
	WIDTH: 139px
}
* HTML .menu A:visited {
	WIDTH: 139px
}
.menu UL UL A.drop {
	BACKGROUND: #618fcf
}
.menu UL UL A.drop:visited {
	BACKGROUND: #618fcf
}
.menu UL UL A.drop:hover {
	BACKGROUND: #bed6f3
}
.menu UL UL :hover > A.drop {
	BACKGROUND: #bed6f3
}
.menu UL UL UL A {
	BACKGROUND: #618fcf
}
.menu UL UL UL A:visited {
	BACKGROUND: #618fcf
}
.menu UL UL UL A:hover {
	BACKGROUND: #bed6f3
}
.menu UL UL {
	LEFT: 0px; VISIBILITY: hidden; WIDTH: 150px; POSITION: absolute; TOP: 21px; HEIGHT: 0px
}
* HTML .menu UL UL {
	TOP: 21px
}
.menu UL UL UL {
	LEFT: 150px; WIDTH: 150px; TOP: 0px
}
.menu UL UL UL.left {
	LEFT: -150px
}
.menu TABLE {
	LEFT: 0px; POSITION: absolute; TOP: 0px
}
.menu UL UL A {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #618fcf; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto
}
.menu UL UL A:visited {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #618fcf; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto
}
* HTML .menu UL UL A {
	WIDTH: 129px
}
.menu A:hover {
	BACKGROUND: #bed6f3; COLOR: #fff
}
.menu UL UL A:hover {
	BACKGROUND: #bed6f3; COLOR: #fff
}
.menu :hover > A {
	BACKGROUND: #bed6f3; COLOR: #fff
}
.menu UL UL :hover > A {
	BACKGROUND: #bed6f3; COLOR: #fff
}
.menu UL LI:hover UL {
	VISIBILITY: visible
}
.menu UL A:hover UL {
	VISIBILITY: visible
}
.menu UL :hover UL UL {
	VISIBILITY: hidden
}
.menu UL :hover UL :hover UL {
	VISIBILITY: visible
}

Des idées pour rendre ca compatible avec IE7 ?

Merci.

**Jinx_** · 19/03/2007, 20h38

J'ai juste ajouté ca au debut de ma page:

Code HTML :

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

1
2
 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

Et ca marche sous IE7 !!!!!!!!!!!!!!!!!!!!!!!!!!

Menu HTML et feuilles de style

HTML

Discussions similaires

Partager

Partager