Salut à tous je suis un peu nouveau j'ai démarré le CSS cet été et là pour mettre en pratique tout ce qui est j'ai appris cet été j'ai démarré un projet perso de site et j'essaye d'y intégrér un menu déroulant avec des parties qui s'affichent quand on passe sur une catégorie mais ça ne s'affiche tout simplement pas voilà le
voila le code CSS
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 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="tempcss.css"> </head> <body> <nav> <table id="menu" style="border-collapse:collapse;"> <thead> <tr> <td><img alt="logo" id ="logo" src="loog.png"></td> <td>News</td> <td id="match">Matchs</td> <td id="transmark">Transfert</td> <td>Stats</td> <td id="cluub">Club</td> <td id="histom">Histoire</td> <td>Médias</td> </tr> </thead> <tbody = "submenu"> <tr> <td colspan="2"></td> <td class="games">Ligue 1</td> <td class="marktom">Officialisation</td> <td></td> <td class="cluub">Organisation du staff</td> <td class="histom">Histoire du club</td> <td></td> </tr> <tr> <td colspan="2"></td> <td class="games">Coupe de France</td> <td class="marktom">Rumeurs</td> <td></td> <td class="cluub">Infrastructures</td> <td class="histom">Joueurs emblématiques</td> <td></td> </tr> <tr> <td colspan="2"></td> <td class="games">Coupe de la Ligue</td> <td colspan="2"></td> <td class="cluub">Les supporters</td> <td class="histom">Matchs historiques</td> <td></td> </tr> <tr> <td colspan="2"></td> <td class="games">Coupe d'Europe</td> <td colspan="3"></td> <td class="histom">évolution du stade de l'OM</td> <td></td> </tr> </tbody> </table> </nav> <header> <img alt="bannière" src="ban.jpg"> </header> <section id="fil"> <div id="filactu"> <h3><a href="#">Fil d'actualité</a></h3><br> <ul> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> <li><a href="#"></a></li><br> </ul> </div> <a class="twitter-timeline" href="https://twitter.com/OM_Officiel?ref_src=twsrc%5Etfw" data-height="700">Tweets by OM_Officiel</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><br><br> </section> <article> </article> <footer> </footer> </body> </html>
en plus d'une solution au problème si vous avez des solutions pour améliorer le code (qui n'est pas fini) le rendre plus optimisé plus simple à lire ou des techniques à utiliser je suis preneur
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 body { font-family: 'Open Sans', arial; background-color: aliceblue; } /*******************************************************/ nav { width: 100%; top: -1%; position: relative; height: 10%; background-color: dodgerblue; color: white; font-weight: bolder; display: inline-block; font-size: 20px; text-align: center; text-transform: uppercase; position: fixed; z-index: 1; } nav a:visited { color: inherit; text-decoration: inherit; font-style: inherit; } nav a { color: inherit; text-decoration: inherit; font-style: inherit; } #menu td{ margin: 0px; padding: 0px; width: 12.5%; } #menu { background-color: dodgerblue; } #logo{ width: 50%; } #menu > tbody{ display: none; } #match:hover .games{ display: block; } #transmark:hover .marktom{ display: block; } #cluub:hover .cluub{ display: block; } #histom:hover .histom{ display: block; } /**********************************************************/ header > img{ width: 100%; } /*******************************************************/ #fil { float: right; width: 30%; } #filactu > ul > li{ list-style-type: none; } /*******************************************************/ article { background-color: ghostwhite; float: left; padding-left: 5%; width: 60%; } a:visited { color: inherit; text-decoration: inherit; }![]()
Partager