Un ascenseur horizontal apparait lorsque j'utilise un paragraphe

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

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, 19h23

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, 11h48

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, 22h01

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, 09h18

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, 10h57

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>

Un ascenseur horizontal apparait lorsque j'utilise un paragraphe

HTML

Vue hybride

Discussions similaires

Partager

Partager