0

Почему .logo располагается не посередине? И если добавить position: absolute к .iphone-6, то он пропадает, почему так?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header-bg {
  background-image: url(images/bg/header.png);
  height: 1000px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 45% 50%;
  border: 1px solid transparent;
  width: 100%;
}

.layout {
  width: 1170px;
  margin: 0 auto;
}

.burger-menu div {
  width: 20px;
  height: 2px;
  background-color: red;
  margin-bottom: 4px;
}

.logo {
  position: absolute;
  left: 50%;
  top: 0;
}

.top-menu {
  margin-top: 60px;
  position: relative;
  border: 1px solid red;
}

.top-menu a {
  text-decoration: none;
  color: #26272d;
}

.top-menu span {
  margin-left: 40px;
}

.top-menu span:first-of-type {
  margin-left: 0;
}

.menu1 {
  position: absolute;
  top: 0;
  left: 50px;
}

.menu2 {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -10px;
}

.menu2 button {
  background-color: #267df4;
  width: 125px;
  height: 40px;
  border-radius: 18px;
  color: white;
  background-image: url(images/icons/apple-icon.png);
  background-repeat: no-repeat;
  background-position: 16px 8px;
  border: none;
}

.menu2 button a {
  color: white;
  margin-left: 5px;
}

.top-text {
  text-align: center;
  margin-top: 140px;
}

.top-text h2 {
  font-size: 62px;
  margin-bottom: 50px;
}

.top-text p {
  margin-bottom: 65px;
}

.top-text button {
  width: 205px;
  height: 50px;
  border-radius: 22px;
  border: 2px solid #dadcdf;
  background-color: transparent;
}

.Iphone-6 {
  background-image: url(images/icons/iphone-6.png);
  background-repeat: no-repeat;
  height: 450px;
  margin-top: 70px;
  margin-left: 380px;
}
<div class="header-bg">
  <div class="layout">
    <div class="top-menu">
      <div class="burger-menu">
        <div class="burger-menu-top"></div>
        <div class="burger-menu-middle"></div>
        <div class="burger-menu-middle"></div>
      </div>
      <div class="menu1">
        <span><a href="#">Tour</a></span>
        <span><a href="#">Features</a></span>
        <span><a href="#">Pricing</a></span>
      </div>
      <div class="logo"><a href="#">NewProvidence</a></div>
      <div class="menu2">
        <span><a href="#">Help</a></span>
        <span><a href="#">Contacts</a></span>
        <span><button><a href="#">Get  App</a></button></span>
      </div>
    </div>
    <div class="top-text">
      <h2>What happens tomorrow?</h2>
      <p>The sight of the tumblers restored Bob Sawyer to a degree of eq</p>
      <button>Watch video</button>
    </div>
    <div class="Iphone-6">
    </div>


  </div>

</div>

2 ответа 2

2
  1. Почему .logo располагается не посередине?

Потому что position: absolute + left: 50% не устанавливают элемент по центру, а двигают его на 50% ширины родителя вправо. Получается, что он двигается вправо слишком сильно и его нужно вернуть немного назад с помощью transform: translateX(-50%)

  1. Если добавить position: absolute к .iphone-6, то он пропадает, почему так?

На самом деле он никуда не пропадает, но так как и контента у него никакого нет, то у него нет ширины. Можно задать ширину строго, например так: width: calc(100% - 380px) где 380px - ширина заданная margin-left. Но сейчас блок .iphone-6 позиционируется относительно ширины <body>, чтобы он позиционировался относительно своего прямого родителя .layout, ему (родителю) нужно задать position: relative

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header-bg {
  background-image: url(images/bg/header.png);
  height: 1000px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 45% 50%;
  border: 1px solid transparent;
  width: 100%;
}

.layout {
  width: 1170px;
  margin: 0 auto;
  position: relative;
}

.burger-menu div {
  width: 20px;
  height: 2px;
  background-color: red;
  margin-bottom: 4px;
}

.logo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.top-menu {
  margin-top: 60px;
  position: relative;
  border: 1px solid red;
}

.top-menu a {
  text-decoration: none;
  color: #26272d;
}

.top-menu span {
  margin-left: 40px;
}

.top-menu span:first-of-type {
  margin-left: 0;
}

.menu1 {
  position: absolute;
  top: 0;
  left: 50px;
}

.menu2 {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -10px;
}

.menu2 button {
  background-color: #267df4;
  width: 125px;
  height: 40px;
  border-radius: 18px;
  color: white;
  background-image: url(images/icons/apple-icon.png);
  background-repeat: no-repeat;
  background-position: 16px 8px;
  border: none;
}

.menu2 button a {
  color: white;
  margin-left: 5px;
}

.top-text {
  text-align: center;
  margin-top: 140px;
}

.top-text h2 {
  font-size: 62px;
  margin-bottom: 50px;
}

.top-text p {
  margin-bottom: 65px;
}

.top-text button {
  width: 205px;
  height: 50px;
  border-radius: 22px;
  border: 2px solid #dadcdf;
  background-color: transparent;
}

.Iphone-6 {
  background-image: url(images/icons/iphone-6.png);
  background-repeat: no-repeat;
  height: 450px;
  margin-top: 70px;
  margin-left: 380px;
  position: absolute;
  width: calc(100% - 380px);
  background: rebeccapurple;
}
<div class="header-bg">
  <div class="layout">
    <div class="top-menu">
      <div class="burger-menu">
        <div class="burger-menu-top"></div>
        <div class="burger-menu-middle"></div>
        <div class="burger-menu-middle"></div>
      </div>
      <div class="menu1">
        <span><a href="#">Tour</a></span>
        <span><a href="#">Features</a></span>
        <span><a href="#">Pricing</a></span>
      </div>
      <div class="logo"><a href="#">NewProvidence</a></div>
      <div class="menu2">
        <span><a href="#">Help</a></span>
        <span><a href="#">Contacts</a></span>
        <span><button><a href="#">Get  App</a></button></span>
      </div>
    </div>
    <div class="top-text">
      <h2>What happens tomorrow?</h2>
      <p>The sight of the tumblers restored Bob Sawyer to a degree of eq</p>
      <button>Watch video</button>
    </div>
    <div class="Iphone-6">
    </div>
  </div>
</div>

2
  • как .logo разместить по середине тогда?
    – bad code
    Commented 27 мар. 2018 в 17:52
  • @Vlad467 не знаю, как еще понятнее написать. Добавь ему transform: translateX(-50%)
    – Cheslab
    Commented 27 мар. 2018 в 18:01
0

Потому-что флексы надо использовать

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header-bg {
  background-image: url(images/bg/header.png);
  height: 1000px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 45% 50%;
  border: 1px solid transparent;
  width: 100%;
}

.layout {
  width: 1170px;
  margin: 0 auto;
}
.burger-menu {
 float: left;
  padding: 11px 10px;
}
.burger-menu div {
  width: 20px;
  height: 2px;
  background-color: red;
  margin-bottom: 4px;
}



.top-menu {
  margin-top: 60px;
  position: relative;
  border: 1px solid red;

}

#top-menu-flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-menu a {
  text-decoration: none;
  color: #26272d;
}

.top-menu span {
  margin-left: 40px;
}

.top-menu span:first-of-type {
  margin-left: 0;
}




.menu2 button {
  background-color: #267df4;
  width: 125px;
  height: 40px;
  border-radius: 18px;
  color: white;
  background-image: url(images/icons/apple-icon.png);
  background-repeat: no-repeat;
  background-position: 16px 8px;
  border: none;
}

.menu2 button a {
  color: white;
  margin-left: 5px;
}

.top-text {
  text-align: center;
  margin-top: 140px;
}

.top-text h2 {
  font-size: 62px;
  margin-bottom: 50px;
}

.top-text p {
  margin-bottom: 65px;
}

.top-text button {
  width: 205px;
  height: 50px;
  border-radius: 22px;
  border: 2px solid #dadcdf;
  background-color: transparent;
}

.Iphone-6 {
  background-image: url(images/icons/iphone-6.png);
  background-repeat: no-repeat;
  height: 450px;
  margin-top: 70px;
  margin-left: 380px;
}
<div class="header-bg">
  <div class="layout">
    <div class="top-menu">
      <div class="burger-menu">
        <div class="burger-menu-top"></div>
        <div class="burger-menu-middle"></div>
        <div class="burger-menu-middle"></div>
      </div>
      <div id="top-menu-flex">
         <div class="menu1">
        <span><a href="#">Tour</a></span>
        <span><a href="#">Features</a></span>
        <span><a href="#">Pricing</a></span>
      </div>
      <div class="logo"><a href="#">NewProvidence</a></div>
      <div class="menu2">
        <span><a href="#">Help</a></span>
        <span><a href="#">Contacts</a></span>
        <span><button><a href="#">Get  App</a></button></span>
      </div>
      </div>
     
    </div>
    <div class="top-text">
      <h2>What happens tomorrow?</h2>
      <p>The sight of the tumblers restored Bob Sawyer to a degree of eq</p>
      <button>Watch video</button>
    </div>
    <div class="Iphone-6">
    </div>

  </div>

</div>

10
  • Флексы конечно здорово использовать, но в приведенном выше коде лого все равно не по центру.
    – Cheslab
    Commented 27 мар. 2018 в 18:04
  • что значит не по центру? все по центру
    – user245150
    Commented 27 мар. 2018 в 18:06
  • filepic.ru/file/1522174032.jpg
    – Cheslab
    Commented 27 мар. 2018 в 18:09
  • Не знаю что в коде у вас а у меня на примере работает
    – user245150
    Commented 27 мар. 2018 в 18:13
  • Это скрин работы вашего же кода. На 4к мониторе так выглядит
    – Cheslab
    Commented 27 мар. 2018 в 18:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.