J'essaie de concevoir mon premier site Web et j'ai du mal à aligner ma barre supérieure css pour l'aligner avec mon logo, j'ai le sentiment que je ne le fais pas correctement car en fonction de la taille de l'écran de l'utilisateur, il aura également un aspect différent avec une hauteur fixe valeur css.

Voici à quoi je veux que cela ressemble sur toutes les résolutions d'écran: entrez la description de l'image ici

Voici à quoi cela ressemble sur un écran inférieur res:

enter image description here

Ci-dessous est mon balisage:

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  min-width: 100%;
  width: auto;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}
<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>

Ou vous pouvez le visionner en direct sur cet emplacement en ligne

0
Dean 27 juil. 2017 à 11:00

2 réponses

Il vous suffit d'augmenter la hauteur de .logo de la même manière que la hauteur de .topbar + padding. Ensuite, en utilisant transform aligner l'image au centre de .logo, vous devrez peut-être utiliser une requête multimédia à une certaine résolution d'écran, si nécessaire.

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  width: 100%;
  height: 50px;
  background-color: #EEB84F;
}

.logo > img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}
<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>
0
frnt 27 juil. 2017 à 08:21

Si vous voulez que le logo soit toujours au-dessus sans chevauchement, vous pouvez définir une hauteur spécifique pour cette image de logo à environ height: 50px. Sinon, utilisez la requête multimédia pour définir sa hauteur spécifiquement pour les résolutions inférieures.

0
kmg 27 juil. 2017 à 08:13