Lien ne marche pas avec la vue mobile (responsive design)

**Marc_27** · 22/10/2022, 14h35

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 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
<!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 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
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

**mathieu** · 22/10/2022, 16h03

il y a une balise invisible au dessus du lien. pour voir ça, utilisez la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + C et passez la souris sur le lien comme expliqué ici :
https://developer.mozilla.org/fr/docs/Outils/inspecteur

**Marc_27** · 24/10/2022, 07h12

Bonjour Mathieu,

Merci de votre réponse.

Effectivement j'ai vu que #header-image-menu bloque le dernier lien du menu. J'ai donc cherché un peu et j'ai trouvé qu'il fallait utiliser des positions "relatives", c'est qui est déjà mon cas.

J'ai donc essayé le plus simple :
Passer la propriété *top* de 40px à 70px. Cela a effectivement décalé le div, mais j'ai eu 2 conséquences :
- l'image maintenant bloquée le texte au dessous
- il y a un grand espace entre le menu et l'image

J'ai essayé aussi d'enlever "top": le div a monté au début de la page et a bloqué tout le menu

La question : comment bien corriger ce comportement ?

**mathieu** · 24/10/2022, 09h47

j'ai l'impression que c'est l'abus de "float" qui fait cela.

repartez de ce code où j'ai mis plusieurs choses en commentaires.

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
#menu ul
{
	background: #0074D9;
}
 
/*
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 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;
}

à la place des "float", il y a maintenant les modèles "flex" et "grid" qui permettent de faire beaucoup de choses de façon plus claire :
https://developer.mozilla.org/fr/doc...ble_Box_Layout
https://developer.mozilla.org/fr/doc...SS_Grid_Layout

**Marc_27** · 24/10/2022, 14h21

Merci beaucoup !

J'ai adapté un peu votre CSS :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/* 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: 70px;
    position: relative;
}
*/
 
#header-image-menu img{
    width: 100%;
    margin: none;
    padding: none;
}
 
#image-text{
	position: absolute;
	top: 50%;
	left: 60%;
	font-family: 'Roboto';
	font-size: 2vw;
	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
}

Maintenant il me semble que tout marche correctement sur mobile, mais quand je redimensionne la page dans mon PC, le texte qu'est dans l'image de l'entête #image-text (lignes 83 à 92) il sort du cadre de l'image vers le bas...

Il y a un moyen d'éviter cela ? J'ai rajouté le "font-size: 2vw;" mais cela n'a pas trop aidé...

**mathieu** · 24/10/2022, 14h28

je n'ai pas les images donc je ne vois pas ce que vous cherchez à faire.
pouvez vous mettre une archive en pièce-jointe avec les fichiers html, css et les images ?

Lien ne marche pas avec la vue mobile (responsive design)

HTML

Discussions similaires

Partager

Partager