Lien ne marche pas avec la vue mobile (responsive design)
Bonjour à tous,
J'essaie de faire un simple site web, HTML et CSS.
Après quelques jours dans trouver de solution, je reviens vers vous pour essayer de trouver de l'aide.
Avant de poser la question, je vous montre le code HTML de une de mes pages :
Code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset='UTF-8'">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/jpg" href="files/fav.jpg"/>
<title>Accueil</title>
<link rel="stylesheet" href="mystyle.css">
<!-- Top header menu containing
logo and Navigation bar -->
<div id="top-header">
<!-- Logo -->
<div id="logo">
<img src="files/pic.jpg" />
</div>
<!-- Navigation Menu -->
<nav>
<div id="menu">
<ul>
<li class="active clearfix"><a href="accueil.html">Accueil</a></li>
<li class="active clearfix"><a href="tarifs.html">Tarifs</a></li>
<li class="active clearfix"><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- Image menu in Header to contain an Image and
a sample text over that image -->
<div id="header-image-menu">
<img src="files/top.jpg">
<h2 id = "image-text">
Title
</h2>
</div>
</head>
<!-- Main content between Header and Footer -->
<main>
<!-- Section 1 of Main content -->
<section>
<div class="main">
<p>A continuer...</p>
</div>
</section>
<!-- Section 2 of Main content -->
<section>
</section>
<!-- Section 3 of Main content -->
<section>
</section>
</main>
<!-- Footer Menu -->
<footer id="footer">
<div class="address">
<p>
Dernière mise-à-jour le mardi 18 octobre 2022<br>
Contact : <a href="mailto:postmaster@">postmaster@</a>
</p>
</div>
</footer>
</html> |
Maintenant mon fichier CSS:
Code:
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
111
112
| /* general tags */
header{
overflow: hidden;
}
#top-header{
text-align: center;
height: 30px;
}
#logo{
float: left;
padding: none;
margin: none;
height: 60px;
width: 20%;
}
#logo img{
width: 50%;
float: left;
padding: 10px 0px;
}
#menu{
float: left;
width: 70%;
height: 100%;
margin: none;
}
#menu ul{
text-align: center;
float: left;
margin: none;
background: #0074D9;
}
#menu li{
display: inline-block;
padding: none;
margin: none;
}
#menu li a, #menu li span{
display: inline-block;
padding: 0em 1.5em;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
line-height: 30px;
}
#menu li a{
color: #FFF;
}
#menu li:hover a, #menu li span{
background: #FFF;
color: #0074D9;
border-left: 1px solid #0074D9;
text-decoration: none;
}
#header-image-menu{
top: 40px;
position: relative;
}
#header-image-menu img{
width: 100%;
margin: none;
padding: none;
}
#image-text{
position: absolute;
top: 50%;
left: 60%;
font-family: 'Roboto';
color: #000;
transform: translate(-30%, -30%);
text-align: center;
}
.main{
margin-top: 20px;
margin-bottom: 0px;
padding: 20px;
text-align: left;
}
.content{
margin-top: 0px;
padding: 20px;
text-align: left;
}
.address {
float: left;
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}
.clearfix {
overflow: auto;
} |
Mon problème :
Quand je suis sur la vue PC, tout fonctionne correctement. Par contre, dès que je passe en vue mobile, le menu de navigation (accueil, tarifs, contact) devient vertical (super, c'est l'idée), mais le dernier lien (contact) ne marche plus...
J'ai essayé de rajouter la classe "clearfix", mais elle n'a rien changé...
Avez-vous une idée de comment régler ce soucis ?
Je vous remercie par avance de toute votre aide,
Cordialement,
Marc
