国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Réécrivez le titre comme suit?: Comment placer mon logo dans le coin supérieur gauche de l'en-tête??
P粉595605759
P粉595605759 2023-09-07 18:11:37
0
2
694

Je con?ois un en-tête pour mon projet universitaire où le logo doit être dans le coin supérieur gauche. J'ai essayé d'utiliser la propriété float en CSS mais rien ne s'est passé. Comment déplacer mon logo dans le coin supérieur gauche de la barre de titre ? J'ai essayé plusieurs fois mais le code n'est pas exécuté. 

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap')

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
}

.logo {
  position: relative;
  float: left;
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
  left: 20px;
  top: 0px;
  bottom: 40px;
}
<header class="header">
  <img class="logo" src="img/pharmapp.png" alt="logo">
  <p class="p">Medcines on your Doorstep</p>
  <nav class="nav__links">
    <ul>
      <li><a href="#">Login</a></li>
      <li><a href="#">SignUp</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#" <button>Contact</button></a>
</header>

P粉595605759
P粉595605759

répondre à tous(2)
P粉296080076

Mettez simplement votre balise .logo元素和p dans un div. Il triera automatiquement.

Vous avez également oublié de fermer la balise a autour du bouton.

N'utilisez pas de flotteurs ou de positionnement absolu dans les mises en page à moins que vous sachiez ce que vous faites... 

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap')

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

/* p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
} */

.logo {
/*  position: relative;
  float: left;*/
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
/*  left: 20px;
  top: 0px;
  bottom: 40px;*/
}
<header class="header">
  <div>
    <img class="logo" src="img/pharmapp.png" alt="logo">
    <p class="p">Medicines on your Doorstep</p>
  </div>
  <nav class="nav__links">
    <ul>
      <li><a href="#">Login</a></li>
      <li><a href="#">SignUp</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#"><button>Contact</button></a>
</header>
P粉277464743

Votreheader具有padding: 30px 10%，這意味著header的左右兩側會有10%的填充，然后在.logo中，您將起始位置設置為距離左側20px.

Une fa?on de "réparer" ce problème est de left: calc(-10% + 20px);來使.logo的leftêtre dans une position négative. 

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap') * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
}

.logo {
  position: relative;
  float: left;
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
  /*you can play with the numbers here*/
  left: calc(-10% + 20px);
  top: 0px;
  bottom: 40px;
}
<header class="header">
  <img class="logo" src="img/pharmapp.png" alt="logo">
  <p class="p">Medcines on your Doorstep</p>
  <nav class="nav__links">
    <ul>
      <li><a href="#">Login</a></li>
      <li><a href="#">SignUp</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#"> <button>Contact</button></a>
</header>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal