Définir la largeur d'une page

**Campanule** · 18/07/2025, 09h33

Bonjour,

Je suis en train d'apprendre le développement web et j'essaie de créer un site pour remplacer mon site actuel (CMS) afin d'être complètement autonome au niveau informatique et de mieux gérer la promotion de mon travail (artiste plasticien).

J'ai créé la page d'accueil puis d'autres pages (contact et collections) basées sur la première page, mais elle est trop large et je n'arrive pas à résoudre ce problème.

Bien sûr, j'ai beaucoup de problèmes de codage à ce stade. Pour commencer, j'aimerais savoir comment déterminer la largeur d'une page ?

Voici la capture d'écran :

https://xmrrwallet.com/cmx.pi.postimg.cc/7LNR8psf/Captur...8-09-38-35.png

Bonne journée,
Hakan

**NoSmoking** · 18/07/2025, 19h29

Bonjour et bienvenue sur DVP.

Ta question est trop vague et il nous manque le contexte et du code éventuellement.

Cependant la lecture de : Les fondamentaux du Responsive Web Design, devrait t'apporter une première aide.

**Campanule** · 18/07/2025, 20h51

Bonsoir et merci pour l’accueil.

Il s'agit d'un site de vente d'œuvres d'art, plus ou moins semblable à mon site actuel : https://xmrrwallet.com/cmx.phakanportakal.com (ou simplement un site de vente).

Le problème est que le site est, transversalement, inutilement trop large.

Une autre capture d'écran peut être plus explicite :

https://xmrrwallet.com/cmx.ppostimg.cc/PN7z2XK8.

Merci pour le lien.

Hakan

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html lang="fr">
<head>
<link href="/home/h/hakanportakal.com/styles/style.css" rel="stylesheet" type="text/css">
 
<link href="https://xmrrwallet.com/cmx.pfonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="preconnect" href="https://xmrrwallet.com/cmx.pfonts.gstatic.com" crossorigin>
<link href="https://xmrrwallet.com/cmx.pfonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <meta name="robots" content="index">
    <meta name="author" content="Hakan Portakal">
    <meta name="description" content="Vente directe d'œuvres d'art en ligne">
    <meta name="keywords" content="arts, abstraits, peintures, dessins, sculptures, céramiques, poteries, assiettes décorées, tebleaux, acrylique">
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="theme-color" content="black">
         <meta name="apple-mobile-web-app-status-bar-style" content="black">
         <meta name="format-detection" content="telephone=no">
         <meta property="fb:app_id" content="123456789">
         <meta property="og:url" content="https://xmrrwallet.com/cmx.pexample.com/page.html">
         <meta property="og:type" content="website">
         <meta property="og:title" content="Content Title">
         <meta property="og:image" content="https://xmrrwallet.com/cmx.pexample.com/image.jpg">
         <meta property="og:description" content="Description Here">
         <meta property="og:site_name" content="Site Name">
         <meta property="og:locale" content="en_US">
        <meta property="article:author" content="">
 
<title>Hakan Portakal | Artiste Plasticien</title>
</head>
 
<!-- ############################################################## -->
 
<body>
<header>
 
<div class="page">
 
 
 
    <div class="bouton-de-connexion">
 
          <img src="/home/h/hakanportakal.com/images/icones/icones-webp/bouton-de-connexion.webp" alt="Bouton de connexion" width ="30" height="30"/><a href=""></a></div>
 
    <div class="slogan-bandeau">
          <h1>ESTHÉTISEZ VOTRE ARGENT | INVESTISSEZ MAINTENANT</h1></div>
 
    <div class="bouton-bendeau-newsletter" href="">Newsletter</a></div>
<div class="search">
 
         <form id="searchFormTop" action="#" method="get">
         <input type="text" class="searchbox" name="q" id="q" placeholder="">
         <button class="recherche-boutton" type="submit"><i class="fa fa-search"></i></button>
         </form>
</div>
 
 
 
 
 
 
<!-- Menu -->
 
<div class="hakan-portakal">
    <h2>Hakan Portakal</h2>
</div>
 
 
<div>
     <ul>
        <li><a href="">COLLECTIONS</a></li>
        <li><a href="">MANIFESTE</a></li>
        <li><a href="">À PROPOS</a></li>
        <li><a href="">ACTUALITÉ</a></li>
        <li><a href="">LIVRE D'OR</a></li>
        <li><a href="">BLOG</a></li>
        <li><a href="">CONTACT</a></li>
    </ul>
  </div>
 
<div class="chevalet"><img src="/home/h/hakanportakal.com/images/icones/icones-webp/chevalet.webp" alt="Icône Accueil" width="30"/> <a href=""></a></div>
 
 
<div class="icone-partage">
<img src="/home/h/hakanportakal.com/images/icones/icones-webp/icone-partage.webp" alt="Icône de partage" width="25"/><a href=""></a></div>
</div>
 
</header>
 
<main>
 
 
 
 
<!-- Introduction -->
<div class="intro">
    <div class="phrase">
      <h2>
        <span>ABSTRAIT |</span>
        <span>BRUT |</span>
        <span>ORIGINAL</span>
      </h2>
</div>
 
 
<!-- Bouton de collections -->
<div>
   <a class="bouton-collections" href="#">COLLECTIONS</a>
</div>
 
 
<footer>
 
<!-- Pied de page -->
 
<div class="footer">
 <p>| Copyright © 2025 | hakanportakal.com | Tous droits réservés |</p>
</div>
 
 
</footer>
 
 
 
 
 
 
 
 
<script src="#"></script>
 
 
  </body>
 
  </div>
 
</html>

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.bouton-de-connexion {   /* Icône de connexion */
    position: absolute;
    top: 20px;
    left: 20px;
}
.slogan-bandeau {    /* Esthétisez Votre Argent | Invesstissez Maintenant */
    position: absolute;
    top: 30px;
    left: +300px;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 0.5em;
    color: #4a5b7d;
}
.bouton-bendeau-newsletter {  /* Icône de newsletter */
    position: absolute;
    top: +2px;
    background-color: #4a5b7d;
    left: +1100px;
    border-radius: 30px 30px 0px 0px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 1em;
    padding: 10px 40px;
    margin: 10px 4px;
    text-align: center;
    text-decoration: none;
}
.search {         /* Boîte de rechche */
    position: relative;
}
.searchbox {
    z-index: 1;
    position: relative;
    width: 300px;
    height: 40px;
    float: right;
    top: 10px;
    right: 10px;
    margin:0;
    padding: 0 35px 0 20px;
    border-radius: 30px 30px 0px 0px;
    background-color: #fff;
    background-image: none;
    color: #000;
    font-family: "Montserrat", sans-serif;
    font-size: 1em;
}
.recherche-boutton {
   position: absolute;
   display: block;
   z-index: 2;
   top: 18px;
   right: 30px;
   float: right;
   width: 30px;
   height: 30px;
   border-width: 15px;
   border: 10px solid #414f6d;
   background-color: transparent;
   border-radius: 30px;
   cursor: pointer;
}
::placeholder {
  color: #cbcbcb;
  font-size: 1em;
}
.hakan-portakal {    /* Nom / prénom du propriètaire */
    position: relative;
    top: +100px;
    left: 80px;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    color: #4f6286;
}
.logo {       /* Logo du propriètaire */
    position: absolute;
    top: +60px;
    left: 550px;
}
.chevalet {     /* Icône d'acueil */
    position: relative;
    top: -60px;
    right: -780px;
}
ul {  /* Menu */
    position: relative;
    top: +40px;
    right: -380px;
    width: 1000px;
    margin: 40px auto;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: bold;
}
ul li {
    list-style:none;
    display:inline-block;
    padding:15px;
}
a {
    color: #2a3548;
    text-decoration:none;
    position:relative;
    padding: 12px 0;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
* {
    padding: 0;
    margin: 0;
}
.icone-partage {   /* Icône de partage */
    position: relative;
    top: -85px;
    right: -1750px;
}
 
/* ########################################## */
 
 
.intro h2 {   /* Introduction */
    text-align: center;
    transform: scale(0.94);
    animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
.phrase {
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-family: "Montserrat", sans-serif;
    max-width: 200ch;
    color: #4f6286;
}
@keyframes scale {
    100% {
    transform: scale(2);
}
}
span {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
}
span:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(2) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(3) {
    animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
}
}
.bouton-collections {   /* Bouton collections */
    position: relative;
    top: -20px;
    background-color: #323e55;
    left: +860px;
    border-radius: 30px 30px 0px 0px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 40px;
    margin: 10px 4px;
    text-align: center;
    text-decoration: none;
}
.bouton-collections:hover {
    font-size: 18px;
}
body {     /* Pied de page */
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 10%;
   background-color: #1a202c;
   color: white;
   text-align: center;
}
p {
    position: relative;
    top: +40px;
    left: 0px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9em;
    color: #fff;
}

**mathieu** · 19/07/2025, 00h03

comme NoSmoking je n'avais pas compris votre 1er message et je viens juste de remarquer la barre de défilement horizontale. vous avez bien fait de nous montrer le code de la page.

le souci vient de 3 éléments que vous avez placé avec position: relative; left : ....
si vous enlevez cela pour les classes hakan-portakal, chevalet et icone-partage vous verrez que vous n'aurez plus ces éléments qui sortent vers la droite de l'affichage classique.

une autre chose à prendre en compte est que, depuis plusieurs années, une grande partie des visiteurs de sites publics le font avec leur téléphone et il faudra donc tester comment s'affiche votre site dans une fenêtre moins large.
si vous regardez votre site actuellement en ligne, vous verrez qu'en réduisant la largeur de la fenêtre jusqu'à 790 pixels, tous les éléments s'adaptent et rien ne dépasse en largeur. cela se fait principalement avec le modèle de boite flex dont vous pouvez trouver des informations là :
https://xmrrwallet.com/cmx.pdeveloper.mozilla.org/fr/doc...ble_box_layout
ce modèle de boite vous permettra de placer les éléments qui posait un souci de largeur.

ensuite quand la largeur de l'affichage est encore plus petite, vous aurez besoin d'effets responsifs qui vont modifier la disposition des éléments en fonction de la largeur. vous pouvez voir cela sur cette page :
https://xmrrwallet.com/cmx.pdeveloper.mozilla.org/fr/doc..._media_queries

**Campanule** · 19/07/2025, 10h52

Bonjour et merci mathieu.

Je m'excuse si ma question n'était pas claire.

Cela fonctionne, donc c'est résolu.

En fait, par défaut, mon site en ligne n'était pas adapté aux autres appareils, j'ai donc dû faire le nécessaire. Avec un CMS, c'est relativement facile et je ne savais pas encore comment le faire sur le site que je prévoyais. Maintenant, je sais (boîte/flex). Jusqu'à aujourd'hui, j'essayais de construire le « squelette » de mon site. Je vais jeter un coup d'œil à ces liens.

Merci encore et bonne journée,
Hakan

Définir la largeur d'une page

Dimensionnement en CSS

Discussions similaires

Partager

Partager