Positionnement avec margin /padding

**Lenawel** · 02/06/2018, 22h10

Bonjour ,

Je débute en html CSS et je suis confrontait a un problème je souhaite comprendre le fonctionnemd'encapsulation des block et je me retrouve avec une petite incohérence dans ma compréhension.

Je souhaite obtenir cette image :

Nom : 15278778014646_attendu.png
Affichages : 228
Taille : 2,6 Ko

Nom : 15278778014646_attendu.png
Affichages : 228
Taille : 2,6 Ko

malheureusement j'obtiens une autre version a la fin

Nom : 15278778144448_reel.png
Affichages : 204
Taille : 3,0 Ko

Pourriez situer mon erreur et m'aider s'il vous plait je vous pressente mon humble code :

index.php

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
<html>
    <header>
    <link rel="stylesheet" href="style.css" />
    </header>
 
    <body>
        <div id= un >
            <div id= deux>
                <div id =trois>
                </div>
            </div>
        </div>
 
        <div id = quatre>
        </div>
 
        <div id =cinq>
        </div>
 
        <div id =six>
        </div>
 
    </body>
 
</html>

style.css

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
body
{
    overflow-x: hidden;
    width: 100%;
    height: 100%
}
 
#un
{
    background-color: red;
    width: 100%;
    height: 15%;
}
 
#deux
{
    margin-top: 25%;
    background-color: green;
    width: 100%;
    height: 50%;
}
 
 
#trois
{
    margin-left: 25%;
    background-color: blue;
    width: 50%;
    height: 100%;
}
 
 
#quatre
{
    background-color: pink;
    width: 100%;
    height: 5%;
}
 
 
#cinq
{
    background-color: black;
    width: 100%;
    height: 70%;
}
 
 
#six
{
    background-color: yellow;
    width: 100%;
    height: 10%;
}

**ProgElecT** · 02/06/2018, 22h30

Salut

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
<html>
    <header>
    <link rel="stylesheet" href="style.css" />
    </header>
 
    <body>
        <div id="un">
            <div id="deux">
                <div id="trois">
                </div>
            </div>
        </div>
 
        <div id="quatre">
        </div>
 
        <div id="cinq">
        </div>
 
        <div id="six">
        </div>
 
    </body>
 
</html>

**Lenawel** · 02/06/2018, 22h53

@ProgElecT Merci pour ta reponse . J'ai recopier le code aucun changement cela reste comme sur l'image 2 et non la premiere

**psychadelic** · 03/06/2018, 00h12

l'encapsulation des block div en utilisant des % ne marche vraiment qu'avec le modèle Flexbox,
dans ton cas, si tu veux rester en "classique" :

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
    html { height: 100%;  }
    * { margin:0; padding: 0; border:0; box-sizing: border-box; }
    body {
      width: 100%;
      height: 100%
    }
    div { display:block;}
    #rouge {
      background-color: red; 
      position:absolute;
      width: 100%;
      height: 15%;
    }
    #vert {
      background-color: green;
      position:relative;
      top:25%;
      left: 0;
      width: 100%;
      height: 50%;
    }
    #bleu {
      background-color: blue;
      position:relative;
      top:0;
      left: 25%;
      width: 50%;
      height: 100%;
    }
    #pink {
      position:absolute;
      top: 15%;
      left:0;
      background-color: pink;
      width: 100%;
      height: 5%;
    }
    #black {
      background-color: black;
      position:absolute;
      top: 20%;
      left:0;
      width: 100%;
      height: 70%;
      color: white;
    }
    #yellow {
      background-color: yellow;
      position:absolute;
      top: 90%;
      left:0;
      width: 100%;
      height: 10%;
    }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
  <div id="rouge">
    <div id="vert">
      <div id="bleu">
      </div>
    </div>
  </div>
  <div id="pink">
  </div>
  <div id="black">
  </div>
  <div id="yellow">
  </div>

**Lenawel** · 03/06/2018, 00h33

@psychadelic merci de tes precission je vais regarder sa de ce pas mais les codes fournis ne marche toujours pas ^^

**psychadelic** · 03/06/2018, 00h49

?
relis mieux :
j'ai changé les ID des DIV en rouge . vert, bleu, etc...

et j'ai bien sur testé avant de poster

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
<!doctype html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <title>blocks couleurs</title>
  <style>
    html {
      height: 100%;
    }
 
    * {
      margin: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box;
    }
 
    body {
      width: 100%;
      height: 100%
    }
 
    div {
      display: block;
    }
 
    #rouge {
      background-color: red;
      position: absolute;
      width: 100%;
      height: 15%;
    }
 
    #vert {
      background-color: green;
      position: relative;
      top: 25%;
      left: 0;
      width: 100%;
      height: 50%;
    }
 
    #bleu {
      background-color: blue;
      position: relative;
      top: 0;
      left: 25%;
      width: 50%;
      height: 100%;
    }
 
    #pink {
      position: absolute;
      top: 15%;
      left: 0;
      background-color: pink;
      width: 100%;
      height: 5%;
    }
 
    #black {
      background-color: black;
      position: absolute;
      top: 20%;
      left: 0;
      width: 100%;
      height: 70%;
      color: white;
    }
 
    #yellow {
      background-color: yellow;
      position: absolute;
      top: 90%;
      left: 0;
      width: 100%;
      height: 10%;
    }
  </style>
</head>
 
<body>
 
  <div id="rouge">
    <div id="vert">
      <div id="bleu">
      </div>
    </div>
  </div>
  <div id="pink">
  </div>
  <div id="black">
  </div>
  <div id="yellow">
  </div>
</body>
 
</html>

**danielhagnoul** · 03/06/2018, 01h08

Il faut travailler avec un système de mise en page (Flex ou Grid).

Voici un exemple utilisant Grid et des dimensions en rem.

Nom : Capture.PNG
Affichages : 180
Taille : 4,3 Ko

Nom : Capture.PNG
Affichages : 180
Taille : 4,3 Ko

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
#wrap {
    position: relative;
    width: 40rem;
    height: 3rem;
    display: grid;
    grid-template-columns: 10rem 20rem 10rem;
    grid-template-rows: 1rem 1rem 1rem;
}
 
#sup {
    grid-column: 1 / span 3;
    grid-row: 1;
    background-color: red;
    color: white;
    font-size: 50%;
}
 
#gauche {
    grid-column: 1;
    grid-row: 2;
    background-color: rgb(83, 146, 83);
    color: white;
    font-size: 50%;
}
 
#centre {
    grid-column: 2;
    grid-row: 2;
    background-color: rgb(46, 46, 146);
    color: white;
    font-size: 50%;
}
 
#droit {
    grid-column: 3;
    grid-row: 2;
    background-color: rgb(83, 146, 83);
    color: white;
    font-size: 50%;
}
 
#inf {
    grid-column: 1 / span 3;
    grid-row: 3;
    background-color: red;
    color: white;
    font-size: 50%;
}
 
#principale {
    position: relative;
    background-color: rgb(117, 113, 113);
    width: 40rem;
    height: 10rem;
    color: white;
}
 
#pied {
    position: relative;
    background-color: yellow;
    width: 40rem;
    height: 1rem;
    color: black;
    font-size: 50%;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="wrap">
    <div id="sup">Supérieure</div>
    <div id="gauche">Gauche</div>
    <div id="centre">Centre</div>
    <div id="droit">Droit</div>
    <div id="inf">Inférieure</div>
</div>
<div id="principale">Principale</div>
<div id="pied">Pied</div>

**Lenawel** · 03/06/2018, 08h21

Merci pour vos précision ! du cou pour un site qui soit compatible all résolution il vaut mieu utiliser quel unité de mesure ?

**psychadelic** · 03/06/2018, 13h52

Tous les chemins mènent à Rome.

( manière polie de dire qu'il n'y a pas de ligne droite, et que les détours éventuels peuvent être aussi riches en apprentissage )

Positionnement avec margin /padding

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager