Un ascenseur horizontal apparait lorsque j'utilise un paragraphe

**awalter1** · 20/04/2023, 12h01

Bonjour,
Sur mon site https://peintres-expo.fr, j'ai ajouté une nouvelle page (pour y accéder : rubrique A PROPOS DU SITE, lien Caractéristiques techniques).
Je me suis aperçu qu'un ascenseur horizontal apparait. Après élimination de composants, je me suis aperçu que c'est le composant <P> qui induit cet ascenseur.
Voici mon code HTML :

Code :

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

1
2
3
4
5
6
7
    <section id="caract">
        <h2>Caractéristiques techniques du site</h2>
        <div id="divcaract">
        <P>Le site est développé en HTML, PHP et javascript.
        </P>
        </div>
    </section>

Code css :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
#caract h2 {
  padding-top: 50px;
}
#divcaract {
  text-align: left;
  font-size: 1em;
  margin-left: 10%;
  margin-right: 10%;
  width: 100%;
}

Quelqu'un voit t'il une directive qui force une largeur supérieure à ma fenêtre?
Y a t'il un moyen de le comprendre avec l'inspecteur du navigateur?
merci

**PrincessLoiseau** · 22/04/2023, 20h23

Considérant que x = 100

Et que margin est un ajout et non un tout.

Tu as x 10 + 100 + 10 = x 120 %

Supprimer le <p> vide la <div> la rendant visuellement inexistante.

Donc en résolutions multiples

Code CSS :

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

1
2
3
4
5
6
#divcaract {
  text-align: left;
  font-size: 1em;
  margin-left: 10%; /* + 10% */
  margin-right: 10%; /* + 10% */
  width: 80%;}

ou

Code CSS :

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

1
2
3
4
5
6
#divcaract {
  text-align: left;
  font-size: 1em;
  padding-left: 10%; /* -10% de marge interne */
  padding-right: 10%; /* -10% de marge interne */
  width: 100%;}

**awalter1** · 29/04/2023, 12h48

Mais oui merci, je me suis déjà fait avoir. J'ai gardé les margin à 10% et j'ai mis le width à 80%? plus d'ascenseur

Remarque : le code suivant fait apparaitre aussi l'ascenseur (à partir de width 81%):

Code CSS :

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

1
2
3
4
5
6
#divcaract {
  text-align: left;
  font-size: 1em;
  padding-left: 10%; /* -10% de marge interne */
  padding-right: 10%; /* -10% de marge interne */
  width: 100%;}

**PrincessLoiseau** · 29/04/2023, 23h01

Dans ce cas, vous pouvez utiliser ainsi :

Code css :

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

1
2
3
4
5
#divcaract {
  text-align: left;
  font-size: 1em;
  padding-left: 10%; /* -10% de marge interne */
  padding-right: 10%; /* -10% de marge interne */}

**NoSmoking** · 30/04/2023, 10h18

Bonjour,
au passage il est inutile de préciser une width:100% pour un élément de type block, celui-ci prendra par défaut la largeur de son parent en tenant compte des marges extérieures.

Un autre propriété à ne pas négliger est box-sizing, qui peut rendre de grand service

Ressources :

↪ Le modèle de boîte
↪ box-sizing

**PrincessLoiseau** · 30/04/2023, 11h57

Envoyé par NoSmoking

il est inutile de préciser une width:100% pour un élément de type block

Entre la théorie :

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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Titre</title>
    <style>
      body { margin: 0; }
      #container { display: flex; }
      #divcaract {
        display: block;
        text-align: left;
        font-size: 1em;
        padding-left: 10%; /* -10% de marge interne */
        padding-right: 10%; /* -10% de marge interne */
        height: 100px; background-color: aqua; }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="divcaract"></div>
    </div>
  </body>
</html>

Et la pratique.

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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Titre</title>
    <style>
      body { margin: 0; }
      #container { display: flex; width: 100%; background-color: blueviolet;}
      #divcaract {
        display: block;
        text-align: left;
        font-size: 1em;
        padding-left: 10%; /* -10% de marge interne */
        padding-right: 10%; /* -10% de marge interne */
        height: 100px; background-color: aqua; }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="divcaract"></div>
    </div>
  </body>
</html>

Mais encore ; display: flex; et débordement.

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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Titre</title>
    <style>
      #divcaract {
        display: flex;
        text-align: left;
        font-size: 1em;
        padding-left: 10%; /* -10% de marge interne */
        padding-right: 10%; /* -10% de marge interne */
        width: 100%; height: 100px; background-color: aqua; }
    </style>
  </head>
  <body>
      <div id="divcaract"></div>
  </body>
</html>

**NoSmoking** · 30/04/2023, 18h57

Oui mais non car tu as intégré un élément nouveau à savoir un conteneur en display:flex, pour lequel il n'est également pas utile de lui ajouter une déclaration width:100%, contrairement à display: inline-flex.

Lorsque l'on utilise display: flex sur un élément conteneur cela fait que les éléments fils deviennent des éléments flexibles donc ils perdent leur faculté d'occuper l'espace disponible sur l'axe en ligne, en clair exit l'occupation de 100% de la largeur du parent.
Par défaut leur flex-grow vaut 0 donc l'élément ne prend pas toute la largeur, il faut lui déclarer un flex-grow:1 pour que celui-ci occupe l'espace maximum disponible.

**PrincessLoiseau** · 30/04/2023, 19h48

Je ne sais si, ou, comment il est possible de citer un utilisateur sans en reprendre une partie de post.

Merci NoSmoking pour toute cette somme de contrôles.

Je n'avais jamais testé un display-flex conteneur vide sans renseigner le width à 100%.

Je profite au passage en testant ce flex-grow:1; sur un <div> enfant et; en plein dedans, je ne m'étais pas non plus rendu compte qu'il agissait aussi en couvrant le height du parent.

Un ascenseur horizontal apparait lorsque j'utilise un paragraphe

HTML

Discussions similaires

Partager

Partager