Partage
  • Partager sur Facebook
  • Partager sur Twitter

Marge de droite inconnue et impossible a enlever

Sujet résolu
DtfF11
    18 mars 2018 à 14:38:48

    Bonjour,

    je n'arrive pas a enlever une marge a droite de mon site j'ai beau essayer de supprimer chaque ligne une par une, je ne trouve pas la solution a ce problème.

    Merci a tout ceux qui m'aiderons

    Mon code: https://codepen.io/anon/pen/NYbxRy?editors=1100#0

    Si le lien ne fonctionne pas:

    <!DOCTYPE html>
<html lang="en">
<header>
  <link rel="apple-touch-icon" sizes="57x57" href="../IMG/favicons/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="../IMG/favicons/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="../IMG/favicons/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="../IMG/favicons/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="../IMG/favicons/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="../IMG/favicons/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="../IMG/favicons/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="../IMG/favicons/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="../IMG/favicons/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192"  href="../IMG/favicons/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="../IMG/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="../IMG/favicons/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="../IMG/favicons/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#fff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#fff">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../../CSS/style_manga.css">
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <title>Le refuge à mangas</title>
</header>
<body>
  <header class="wrapper">
    <nav>
      <ul>
        <h1><a id="LRAMH1" href="../index.html">Le refuge à mangas</a></h1>
        <li><a class="li-h1" href="../index.html">Accueil</a></li>
        <li><a class="li-h1" href="../mangas.html">Mangas</a></li>
        <li><a class="li-h1" href="../faq.html">Faq</a></li>
        <li><a class="li-h1" href="../contact.html">À propos</a></li>
      </ul>
    </nav>
  </header>
      <h1 id="small">Votre écran est de trop petite taille et ne permet pas un bon affichage de la page</h1>
    <section class="wrapper-manga">
      <h1>One Piece</h1>
      <h2>T1 - T85</h2>
      <img src="../../IMG/Mangas/op/op.jpg" alt="converture du manga">
      <p>Auteur(s): <a target="_blank" href="https://fr.wikipedia.org/wiki/Eiichir%C5%8D_Oda">Eiichirō Oda</a></p>
      <p>Date de sortie: <span class="red">1997</span></p>
      <p>Genre: <span class="red"></span></p>
      <p>Statut: </p>
    </section>
   <!-- <footer>
    <h1><a id="kat" href="kat.html">Kat'</a>Le <span id="r">refuge</span> <span id="g">à</span> <span id="b">mangas</span>
      - <span title="le saviez vous ? ce message ne sert à rien en France">Tous droits réservés</span></h1>
  </footer> -->
</body>
</html>

    *
{
  margin: 0;
  padding: 0;
}

br, #kat
{
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

body
{
  background-color: #1b1b1b;
}

header
{
  background-color: #ba3434;
  font-family: 'Fjalla One', sans-serif;
  border-radius: 5px;
}

#LRAMH1
{
   font-family: 'Permanent Marker', serif;
   border-bottom: 1px solid #ba3434;
   font-size: 30px;
}

#LRAMH1:hover
{
  border-bottom: 7px solid #ba3434;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

header a
{
  color: #fff;
  text-decoration: none;
}

header ul
{
  list-style: none;
}

.li-h1
{
  display: table-cell
  display: inline-block;
  float: right;
  position: relative;
  border-bottom: 1px solid #ba3434;
  top: -37px;
  margin: 0px 10px;
  padding: 5px 5px;
}

.li-h1:hover
{
  text-decoration: underline;
}

.wrapper
{
    width: 1200px;
    margin: 15px auto;
    padding: 0 25px;
}

.wrapper-manga
{
  width: 1175px;
  margin: 15px auto;
  padding: 0 25px;
}

@media screen and (max-width: 1300px)
{
 header, footer, section
 {
   display: none
 }

 #small
 {
   color: #ba3434;
   margin: 50px;
   font-family: sans-serif;
   font-size: 50px;
   text-align: center;
   border: 5px solid #ba3434;
   padding: 15px;
   border-radius: 15px;
 }
}

@media screen and (min-width: 1300px)
{
  #small
  {
    display: none;
  }
}

section
{
  color: #fff;
  line-height: 1.7;
  /*border: 5px solid #ba3434;*/
  border-radius: 5px;
}

section h1
{
  font-size: 30px;
  padding-top: 25px;
  padding-bottom: 25px;
  font-family: 'Fjalla One', sans-serif;
  text-decoration: underline;
  transition: 0 1s ease-in-out;
  text-align: center;
}

section h2
{
  font-size: 25px;
  font-family: 'Fjalla One', sans-serif;
  position: relative;
  top: -10px;
  left: 100px;
}

section p
{
  position: relative;
  right: -500px;
  font-family: 'Fjalla One', sans-serif;
}

section a
{
  color: #ba3434;
  font-family: 'Fjalla One', sans-serif;
  text-decoration: none;
}

section a:hover
{
  border-bottom: 3px solid #ba3434;
  border-radius: 2px;
  transition: all 0.25s ease;
}

section img
{
  border: 3px solid #ba3434;
  width: 300px;
  border-radius: 7px;
  margin-bottom: 17px;
  float: left;
}

section img:hover
{
  filter: hue-rotate(360deg);
  transform: scale(1.05);
  transition: all 0.5s ease;
}

footer
{
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #ba3434;
  border-radius: 5px;
  cursor: default;
}

footer h1
{
  text-align: center;
  padding: 5px;
  color: #fff;
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
}

#kat
{
  color: #ba3434;
  text-decoration: none;
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  bottom: 5px;
  left: 5px;
}

#kat:hover
{
  color: #fff;
  text-decoration: none;
}

#r:hover{color: #ff0000;}
#g:hover{color: #00ff29;}
#b:hover{color: #0012ff;}




    • Partager sur Facebook
    • Partager sur Twitter
    EmmanuelBeziat
    • HTML / CSS
      18 mars 2018 à 14:42:20

      Salut,

      En premier lieu, ça, c'est à proscrire :

      *
{
  margin: 0;
  padding: 0;
}

      Ensuite, ton problème c'est que tu utilises right: -500px; pour positionner tes éléments, alors ils font ce que tu leur dit : ils dépassent de 500px sur la droite.

      Ne fais pas ça, tout simplement. Fais des colonnes de façon normale, avec flexbox ou grid. Je te renvoie au cours html/css du site.

      • Partager sur Facebook
      • Partager sur Twitter

      Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

      DtfF11
        18 mars 2018 à 14:56:13

        Merci mais pourquoi *{margin:0;padding:0;} est a proscrire ? Et meme en suppriment cette partie le site reste quand meme a droite

        -
        Edité par DtfF11 18 mars 2018 à 14:57:48

        • Partager sur Facebook
        • Partager sur Twitter
        EmmanuelBeziat
        • HTML / CSS
          18 mars 2018 à 15:08:51

          Je t'ai donné la solution, lis mon message en entier : tu appliques un right avec des proportions énormes sur tes paragraphes.

          Et pour ce qui est du reset à proscrire, voici: https://www.emmanuelbeziat.com/blog/les-resets-css-a-la-poubelle 

          • Partager sur Facebook
          • Partager sur Twitter

          Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

          kenankar1
            18 mars 2018 à 15:12:29

            Salut,

            Je viens de testé ton code sans trop regarder le code et je n'ai pas de marge a droite.

            Si ta question est pourquoi, le texte "

            Votre écran est de trop petite taille et ne permet pas un bon affichage de la page"

            ne va pas jusqu'au bout, c'est tout simplement qu'il est plus court que la taille de l'ecran, en y ajoutant du texte, cela va jusqu'à la bordure droite de l'écran.

            ou alors j'ai pas compris ta question ....

            • Partager sur Facebook
            • Partager sur Twitter
            EmmanuelBeziat
            • HTML / CSS
              18 mars 2018 à 15:15:09

              @kenankar1 : Le dépassement se passe avant l'affichage de ce texte, dans des résolutions assez basses.
              • Partager sur Facebook
              • Partager sur Twitter

              Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

              kenankar1
              EmmanuelBeziat
              • HTML / CSS
                18 mars 2018 à 15:27:09

                Je crois que tu as oublié de prendre en compte le CSS ; sans ça, il est évident que tu ne verras pas de problème de mise en page…

                -
                Edité par EmmanuelBeziat 18 mars 2018 à 15:27:49

                • Partager sur Facebook
                • Partager sur Twitter

                Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

                kenankar1
                  18 mars 2018 à 15:30:07



                  effectivement
                  • Partager sur Facebook
                  • Partager sur Twitter
                  EmmanuelBeziat
                  • HTML / CSS
                    18 mars 2018 à 15:48:06

                    Non, ce n'est pas non plus de ça qu'il parle. Là :

                    https://images.emmanuelbeziat.com/18.03.18-ilnp5.jpg 

                    Et comme je le disais, c'est parce qu'au lieu d'avoir deux colonnes, les paragraphes sont décalés à coup de right: 500px, qu'il faut enlever.

                    -
                    Edité par EmmanuelBeziat 18 mars 2018 à 15:49:18

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

                    DtfF11
                      18 mars 2018 à 16:34:47

                      mais je l'ai enlever mais sa n'a rien fait
                      • Partager sur Facebook
                      • Partager sur Twitter
                      EmmanuelBeziat
                      • HTML / CSS
                        18 mars 2018 à 16:40:59

                        Poste ton nouveau code sur codepen, histoire de comparer.

                        Mais ça marche, je te l'assure : https://images.emmanuelbeziat.com/18.03.18-vdeha.mp4 

                        • Partager sur Facebook
                        • Partager sur Twitter

                        Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

                        DtfF11
                          18 mars 2018 à 19:30:18

                          J'ai un nouveau problème, j'ai mis un border a ma section sauf que l'image a l'interieur dépasse de la bordure 

                          le code:

                          *
{
  margin: 0;
  padding: 0;
}

::selection
{
  background-color: #ff4d4d;
  color: #fff;
}

br, #kat
{
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

body
{
  background-color: #1b1b1b;
}

header
{
  background-color: #ba3434;
  font-family: 'Fjalla One', sans-serif;
  border-radius: 5px;
}

#LRAMH1
{
   font-family: 'Permanent Marker', serif;
   border-bottom: 1px solid #ba3434;
   font-size: 30px;
}

#LRAMH1:hover
{
  border-bottom: 7px solid #ba3434;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

header a
{
  color: #fff;
  text-decoration: none;
}

header ul
{
  list-style: none;
}

.li-h1
{
  display: table-cell
  display: inline-block;
  float: right;
  position: relative;
  border-bottom: 1px solid #ba3434;
  top: -37px;
  margin: 0px 10px;
  padding: 5px 5px;
}

.li-h1:hover
{
  text-decoration: underline;
}

.wrapper
{
    width: 1200px;
    margin: 15px auto;
    padding: 0 25px;
}

.wrapper-manga
{
  width: 1175px;
  margin: 15px auto;
  padding: 0 25px;
}

@media screen and (max-width: 1300px)
{
 header, footer, section
 {
   display: none
 }

 #small
 {
   color: #ba3434;
   margin: 50px;
   font-family: sans-serif;
   font-size: 50px;
   text-align: center;
   border: 5px solid #ba3434;
   padding: 15px;
   border-radius: 15px;
 }
}

@media screen and (min-width: 1300px)
{
  #small
  {
    display: none;
  }
}

section
{
  color: #fff;
  line-height: 1.7;
  border: 5px solid #ba3434;
  border-radius: 5px;
}

section h1
{
  font-size: 30px;
  padding-top: 25px;
  padding-bottom: 25px;
  font-family: 'Fjalla One', sans-serif;
  text-decoration: underline;
  text-align: center;
}

section h2
{
  font-size: 25px;
  font-family: 'Fjalla One', sans-serif;
  position: relative;
  left: 150px;
}

section p
{
  font-family: 'Fjalla One', sans-serif;
  margin-left: 120px;
}

section a
{
  color: #ba3434;
  font-family: 'Fjalla One', sans-serif;
  text-decoration: none;
}

section a:hover
{
  border-bottom: 3px solid #ba3434;
  border-radius: 2px;
  transition: all 0.25s ease;
}

section img
{
  border: 3px solid #ba3434;
  width: 300px;
  border-radius: 7px;
  margin-bottom: 30px;
  float: left;
}

section img:hover
{
  filter: hue-rotate(360deg);
  transform: scale(1.05);
  transition: all 0.5s ease;
}

.red
{
  color: #ba3434;
}

.orange
{
   color: #ed821f;
}

footer
{
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #ba3434;
  border-radius: 5px;
  cursor: default;
}

footer h1
{
  text-align: center;
  padding: 5px;
  color: #fff;
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
}

#kat
{
  color: #ba3434;
  text-decoration: none;
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  bottom: 5px;
  left: 5px;
}

#kat:hover
{
  color: #fff;
  text-decoration: none;
}

#r:hover{color: #ff0000;}
#g:hover{color: #00ff29;}
#b:hover{color: #0012ff;}

                          <!DOCTYPE html>
<html lang="en">
<header>
  <link rel="apple-touch-icon" sizes="57x57" href="../IMG/favicons/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="../IMG/favicons/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="../IMG/favicons/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="../IMG/favicons/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="../IMG/favicons/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="../IMG/favicons/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="../IMG/favicons/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="../IMG/favicons/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="../IMG/favicons/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192"  href="../IMG/favicons/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="../IMG/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="../IMG/favicons/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="../IMG/favicons/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#fff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#fff">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../../CSS/style_manga.css">
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <title>Le refuge à mangas</title>
</header>
<body>
  <header class="wrapper">
    <nav>
      <ul>
        <h1><a id="LRAMH1" href="../index.html">Le refuge à mangas</a></h1>
        <li><a class="li-h1" href="../index.html">Accueil</a></li>
        <li><a class="li-h1" href="../mangas.html">Mangas</a></li>
        <li><a class="li-h1" href="../faq.html">Faq</a></li>
        <li><a class="li-h1" href="../contact.html">À propos</a></li>
      </ul>
    </nav>
  </header>
      <h1 id="small">Votre écran est de trop petite taille et ne permet pas un bon affichage de la page</h1>
    <section class="wrapper-manga">
      <h1>One Piece</h1>
      <img src="../../IMG/Mangas/op/op.jpg" alt="converture du manga">
      <h2>T1 - T85</h2>
      <p>Auteur(s): <a target="_blank" href="https://fr.wikipedia.org/wiki/Eiichir%C5%8D_Oda">Eiichirō Oda</a></p>
      <p>Date de sortie: <span class="red">1997</span></p>
      <p>Type: <span class="red">Shōnen</span></p>
      <p>Genre: <span class="red"></span></p>
      <p>Statut: <span class="orange">en cours...</span></p>
    </section>
   <!-- <footer>
    <h1><a id="kat" href="kat.html">Kat'</a>Le <span id="r">refuge</span> <span id="g">à</span> <span id="b">mangas</span>
      - <span title="le saviez vous ? ce message ne sert à rien en France">Tous droits réservés</span></h1>
  </footer> -->
</body>

</html>




                          • Partager sur Facebook
                          • Partager sur Twitter
                          EmmanuelBeziat
                          • HTML / CSS
                            18 mars 2018 à 21:35:06

                            C'est parce que tu utilises float. Je t'avais suggéré flexbox et dirigé vers le cours du site, qui explique comment l'utiliser pour faire des colonnes. Float n'est pas fait pour ça…

                            Mets un overflow: auto; sur .wrapper-manga, mais il faudrait vraiment faire ça plus proprement, par exemple comme ça :

                            <section class="wrapper-manga">
    <h1>One Piece</h1>
                            

    <div class="manga-grid">
        <div class="manga-images">
            <img src="../../IMG/Mangas/op/op.jpg" alt="converture du manga">
        </div>
    
        <div class="manga-infos">
            <h2>T1 - T85</h2>
            <p>Auteur(s): <a target="_blank" href="https://fr.wikipedia.org/wiki/Eiichir%C5%8D_Oda">Eiichirō Oda</a></p>
            <p>Date de sortie: <span class="red">1997</span></p>
            <p>Type: <span class="red">Shōnen</span></p>
            <p>Genre: <span class="red"></span></p>
            <p>Statut: <span class="orange">en cours...</span></p>
        </div>
    </div>
</section>
                            .manga-grid {
    display: flex;
}

.manga-infos {
    margin-left: 1rem;
}

                            En enlevant float sur l'image, bien sûr.

                            -
                            Edité par EmmanuelBeziat 18 mars 2018 à 21:37:17

                            • Partager sur Facebook
                            • Partager sur Twitter

                            Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

                            DtfF11
                              18 mars 2018 à 21:47:30

                              Merci énormément !
                              • Partager sur Facebook
                              • Partager sur Twitter

                              Marge de droite inconnue et impossible a enlever

                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                              • Editeur ●
                              • Markdown