Как правильно разместить блоки?

465

01 февраля 2018, 16:23

Здравствуйте! Скажите, как сделать так, как в макете? Надпись "Мы хотим сделать этот мир лучше" становится посередине, а нужно как в макете.

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
header { 
  height: 700px; 
  background-image: url(img/header-background.jpg); 
  background-size: 100% 100%; 
} 
 
.header__logo { 
  width: 232px; 
  float: left; 
  padding-left: 170px; 
  padding-top: 60px; 
} 
 
.header__logo img { 
  float: left; 
} 
 
.header__logo p { 
  color: #ffffff; 
  font-family: Roboto, sans-serif; 
  font-size: 14px; 
  font-weight: 500; 
  float: right; 
  padding-top: 9px; 
} 
 
.header__menu { 
  width: 336px; 
  float: right; 
  padding-right: 170px; 
  padding-top: 70px; 
} 
 
.header__menu li { 
  margin-left: 18px; 
} 
 
.header__menu li:nth-child(1) { 
  margin-left: 0; 
} 
 
.header__menu a { 
  color: #ffffff; 
  font-family: "Open Sans", sans-serif; 
  font-size: 14px; 
  font-weight: 400; 
} 
 
.header__title { 
  width: 425px; 
  float: left; 
  color: #ffffff; 
  font-family: Roboto, sans-serif; 
  font-size: 48px; 
  font-weight: 500; 
  padding-top: 257px; 
}

<header> 
  <div class="header__logo"> 
    <img src="img/header-logo.png" alt="header-logo"> 
    <p>Южный волонтёрский центр</p> 
  </div> 
  <nav class="header__menu"> 
    <ul> 
      <li><a href="#">О нас</a></li> 
      <li><a href="#">Новости</a></li> 
      <li><a href="#">Проекты</a></li> 
      <li><a href="#">Личный кабинет</a></li> 
    </ul> 
  </nav> 
  <div class="header__title">Мы хотим сделать этот мир лучше</div> 
</header>

Answer 1

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
header { 
  height: 700px; 
  background-image: url(img/header-background.jpg); 
  background-size: 100% 100%; 
} 
 
.header__logo { 
  width: 232px; 
  float: left; 
  padding-left: 170px; 
  padding-top: 60px; 
  position:relative; 
} 
 
.header__logo img { 
  float: left; 
} 
 
.header__logo p { 
  color: #ffffff; 
  font-family: Roboto, sans-serif; 
  font-size: 14px; 
  font-weight: 500; 
  float: right; 
  padding-top: 9px; 
} 
 
.header__menu { 
  width: 336px; 
  float: right; 
  padding-right: 170px; 
  padding-top: 70px; 
} 
 
.header__menu li { 
  margin-left: 18px; 
} 
 
.header__menu li:nth-child(1) { 
  margin-left: 0; 
} 
 
.header__menu a { 
  color: #ffffff; 
  font-family: "Open Sans", sans-serif; 
  font-size: 14px; 
  font-weight: 400; 
} 
 
.header__title { 
  width: 425px; 
  float: left; 
  color: #ffffff; 
  font-family: Roboto, sans-serif; 
  font-size: 48px; 
  font-weight: 500; 
  padding-top: 257px; 
  position: absolute; 
  left: 30px; 
  bottom: 250px; 
}

<header> 
  <div class="header__logo"> 
    <img src="img/header-logo.png" alt="header-logo"> 
    <p>Южный волонтёрский центр</p> 
  </div> 
  <nav class="header__menu"> 
    <ul> 
      <li><a href="#">О нас</a></li> 
      <li><a href="#">Новости</a></li> 
      <li><a href="#">Проекты</a></li> 
      <li><a href="#">Личный кабинет</a></li> 
    </ul> 
  </nav> 
  <div class="header__title">Мы хотим сделать этот мир лучше</div> 
</header>

Answer 2

С помощью позиционирования, для header задать position:relative;, а для header__title: position: absolute; и с помощью right и bottom выставить надпись согласно размеров макета, это одно из решений.

Answer 3

Добавьте

text-align: left;
margin-left: 30px;

Answer 4

header { 
  height: 700px; 
  padding: 50px 0px; 
  background-image: url(https://via.placeholder.com/1366x768); 
  background-size: 100% 100%; 
} 
 
.header__logo { 
  float: left; 
  padding-left: 30px; 
} 
 
.header__logo img { 
  float: left; 
} 
 
.header__logo p { 
  color: #ffffff; 
  font-family: Roboto, sans-serif; 
  font-size: 14px; 
  font-weight: 500; 
  float: right; 
  padding-top: 9px; 
} 
 
.header__menu { 
  float: right; 
  padding-right: 30px; 
} 
 
.header__menu li { 
  float: left; 
  list-style-type: none; 
  padding-left: 15px; 
} 
 
.header__menu li:nth-child(1) { 
  margin-left: 0; 
} 
 
.header__menu a { 
  color: #ffffff; 
  font-family: "Open Sans", sans-serif; 
  font-size: 14px; 
  font-weight: 400; 
} 
 
.header__title { 
  width: 425px; 
  color: #ffffff; 
  font-family: Roboto, sans-serif; 
  font-size: 48px; 
  font-weight: 500; 
  padding: 250px 0px 0px 30px; 
}

<body> 
  <header> 
    <div class="header__logo"> 
      <img src="img/header-logo.png" alt="header-logo"> 
      <p>Южный волонтёрский центр</p> 
    </div> 
    <nav class="header__menu"> 
      <ul> 
        <li><a href="#">О нас</a></li> 
        <li><a href="#">Новости</a></li> 
        <li><a href="#">Проекты</a></li> 
        <li><a href="#">Личный кабинет</a></li> 
      </ul> 
    </nav> 
    <div class="header__title">Мы хотим сделать этот мир лучше</div> 
  </header> 
</body>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Одинаковая высота блоков в Swiper 4.1.x (Firefox)

Для сайта понадобилась адаптивная карусель элементов, взял за основу Swiper последней версии 41+, в итоге получилось так, что в Chrome все блоки одной...

814

CSS