Rendre responsive des positions relative

**Jeremy_prt** · 16/11/2022, 23h57

Bonjour, j'ai encore beaucoup de mal à rendre responsive des div avec la propriétés "css position: relative", quelqu'un pourrait m'aider à rendre cette page responsive.

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
  <body>
    <section id="Page1">
      <h1>Antoni Gaudi</h1>
      <div class="form1"></div>
      <div class="form2"></div>
      <div class="form3">
        <div class="All_separators">
          <div class="separator"></div>
          <div class="separator"></div>
          <div class="separator"></div>
        </div>
      </div>
    </section>
  </body>
</html>

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
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
:root {
  --bleu: #00c3ff;
}
 
body {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}
 
#Page1 {
  min-height: 100vh;
  background-color: rgb(255, 255, 255);
}
 
#Page1 .form1 {
  position: relative;
  width: 800px;
  height: 750px;
  left: 250px;
  top: 130px;
  z-index: 0;
  background-color: var(--bleu);
}
 
#Page1 .form2 {
  position: relative;
  width: 700px;
  height: 650px;
  background: url("https://www.dosde.com/discover/wp-content/uploads/2017/02/antoni-gaudi-anciano-mayor-biografia.jpg");
  background-repeat: no-repeat;
  background-position: center;
  left: 950px;
  top: -700px;
  z-index: 1;
}
 
#Page1 .form3 {
  position: relative;
  width: 1084px;
  height: 303px;
  left: 400px;
  top: -800px;
  z-index: 2;
  background-color: var(--bleu);
  border-width: 10px 10px 0px 10px;
  border-style: solid;
  border-color: #ffffff;
}
 
#Page1 .form3 .All_separators {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}
 
#Page1 .form3 .All_separators .separator {
  background-color: white;
  height: 150px;
  width: 3px;
}
 
h1 {
  font-size: 5em;
  color: white;
  position: absolute;
  z-index: 500;
  top: 200px;
  left: 520px;
}

Nom : Capture d’écran 2022-11-16 235150.png
Affichages : 165
Taille : 523,9 Ko

**gesualda** · 17/11/2022, 08h43

hello Jeremy_prt,

2 conseils si tu le permets bien sur pour la page que tu devrais reprendre en totalité :

- T'orienter vers les mises en page type flexbox ou grid pour la mise en page
- Eviter d'utiliser dans la mise en page les ID(#) et utiliser les "class". Les id étant surtout utiliser pour cibler un élément javascript ou autres.

Bon courage

Rendre responsive des positions relative

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager