Bordure sur image non désirée

25 mai 2022 à 14:49:21

Bonjour,

je souhaite insérer l'image sans la bordure (je ne sais pas pourquoi j'en ai une ici), quelqu'un à une idée ?

voici la preview du code : https://preview-903066.playcode.io

Merci beaucoup,

Jérôme

Lamecarlate

25 mai 2022 à 15:00:34

Bonjour,

la page que tu montres est vide. Peux-tu poster ton code ici ? Ou bien héberger ta page quelque part ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JérômeAlbrecht2

25 mai 2022 à 15:47:47

Voici, merci, il s'agit de la bordure jaune sous subscribe

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="src/style.css" />
    <link rel="stylesheet" href="src/mobile-devices.css" />
  </head>
  <body>
    <div class="openWrapper">
      <div class="presignWrapper">
        <div class="signWrapper">
          <h1>Task Manager</h1>

          <button>Subscribe</button>

          <img
            class="womenImg"
            
          />
        </div>
      </div>
    </div>

    <script src="src/script.js"></script>
  </body>
</html>

body {
  width: 100%;
  height: 100%;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.openWrapper {
  width: 100%;
}

.presignWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signWrapper {
  width: 40rem;
  height: 80vh;
  background-color: #5065c386;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-box-shadow: 7px 6px 7px -3px rgba(0, 0, 0, 0.27);
  box-shadow: 7px 6px 7px -3px rgba(0, 0, 0, 0.27);
}

h1 {
  color: #9e63ab;
  text-align: center;
  margin: 0 auto;
  margin-top: 1.5rem;
}

button {
  width: 25%;
  height: 3rem;
  border: none;
  border-radius: 0.4rem;
  background-color: #5066c3;
  color: white;
  margin-top: 1rem;
  font-size: 1.5rem;
  -webkit-box-shadow: 7px 6px 7px -3px rgba(0, 0, 0, 0.27);
  box-shadow: 7px 6px 7px -3px rgba(0, 0, 0, 0.27);
  cursor: pointer;
}

.womenImg {
  width: 100%;
  height: 100%;
  background-image: url('./Images/women2.png');
  background-size: contain;
  background-repeat: no-repeat;
}

-
Edité par JérômeAlbrecht2 25 mai 2022 à 15:49:23

Lamecarlate

25 mai 2022 à 16:18:17

Alors, soit tu mets une <img> avec un attribut src, et un attribut alt (qui contient une description de l'image) ; soit tu mets un background, pas les deux

Autre point :

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

c'est inutile.

Tu peux mettre juste

* {
  box-sizing: border-box;
}

En effet :

il y a extrêmement peu d'éléments qui ont margin ou padding par défaut dans le style des navigateurs - je suggère grandement de ne mettre ces propriétés qu'au cas par cas
font-familey est héritable : mets-la sur body, ça suffit amplement

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JérômeAlbrecht2

25 mai 2022 à 16:27:07

merci !

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

par contre le padding et margin si je les retire j'ai automatiquement une barre de scroll...

-
Edité par JérômeAlbrecht2 25 mai 2022 à 16:27:41

Lamecarlate

25 mai 2022 à 16:54:30

C'est parce que tu mets un width: 100% non nécessaire sur body (le height n'est peut-être pas nécessaire non plus), et qu'il y a souvent une marge sur body. body { margin: 0 } suffit dans la plupart des cas.

Pas d'aide concernant le code par MP, le forum est là pour ça :)