0

Верстаю макет, и столкнулся с проблемой выравнивания <span class="caption"><sup>El</sup>Artista</span> в один ряд с навигационными ссылками.

введите сюда описание изображения

Как ни старался, не получается. Надеюсь на вашу помощь! Заранее благодарю.

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

.header {
  background: url("../images/header-img.png") no-repeat center top/cover;
  height: 700px;
}

.header .caption {
  color: #bb1b55;
  margin-top: 0;
  font-size: 3rem;
  font-family: "SCRIPTIN";
}

.header .menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: 41%;
  padding-top: 50px;
  font-family: "Titillium Web", sans-serif;
}

.header .menu a {
  text-decoration: none;
  color: #000;
}

.header .menu li {
  list-style-type: none;
  text-transform: uppercase;
}

.header .container {
  margin: 150px auto;
  text-align: center;
}

.header .container h1 {
  font-family: "SCRIPTIN";
  font-size: 5rem;
  color: #bb1b55;
  font-weight: 100;
}

.header .btn {
  display: block;
  padding: 15px;
  border-radius: 15px;
  text-decoration: none;
  font-family: 'Titillium Web', sans-serif;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(55deg, #f75644 1%, #a0015d 99%);
  width: 150px;
  color: #fff;
}
<header class="header">
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Idea</a></li>
      <li><a href="#">Crew</a></li>
      <li><a href="#">Benefits</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Showreel</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <span class="caption"><sup>El</sup>Artista</span>
  <div class="container">
    <h1 class="big-caption">Catching the spirit</h1>
  </div>
  <a class="btn" href="#">Contact us</a>
</header>

1
  • Какой версии bootstrap сетку Вы используете?
    – SVE
    8 мая 2019 в 7:11

3 ответа 3

0

Позиционирование

static - дефолтное значение. Один блок идёт под другим в порядке их появления в хтмл, за исключением не блочных элементов, таких как span.

relative: если просто его установить, то ничего не поменяется. Но если дать ему значения top или left, то блок сдвинется.

absolute: если блок, который мы так позиционируем, находится в неспозионированном блоке, (то есть, который имеет позиционирование static), то позиционирование будет происходить относительно боди, кажется. Но если мы дадим родительскому компоненту какое-то НЕ ДЕФОЛТНОЕ позиционирование, то абсолют будет позиционироваться относительно родительского объекта.

fixed, sticky разбирать вообще не стоит. Там и так всё понятно.

Как я вижу, ваш хедер не спозиционирован никак. Надо дать ему позиционирование relative, а спану назначить display: block; position: absolute; top: XXpx; left: XXpx, и, по идее, это должно вылечить проблему.

0

Пример в полноэкранном режиме смотрите. Добавил в nav ваш спан с логотипом и задал flex для nav.

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

.header {
  background: url("../images/header-img.png") no-repeat center top/cover;
  height: 700px;
}
.header nav {
  
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  height: 100px;
  width: 100%;
}
.header .caption {
  color: #bb1b55;
  font-size: 3rem;
  font-family: "SCRIPTIN";
  
}

.header .menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-family: "Titillium Web", sans-serif;
}

.header .menu a {
  text-decoration: none;
  color: #000;
}

.header .menu li {
  list-style-type: none;
  text-transform: uppercase;
  margin-right: 15px;
}

.header .container {
  margin: 150px auto;
  text-align: center;
}

.header .container h1 {
  font-family: "SCRIPTIN";
  font-size: 5rem;
  color: #bb1b55;
  font-weight: 100;
}

.header .btn {
  display: block;
  padding: 15px;
  border-radius: 15px;
  text-decoration: none;
  font-family: 'Titillium Web', sans-serif;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(55deg, #f75644 1%, #a0015d 99%);
  width: 150px;
  color: #fff;
}
<header class="header">
  <nav>
    <span class="caption"><sup>El</sup>Artista</span>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Idea</a></li>
      <li><a href="#">Crew</a></li>
      <li><a href="#">Benefits</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Showreel</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="container">
    <h1 class="big-caption">Catching the spirit</h1>
  </div>
  <a class="btn" href="#">Contact us</a>
</header>

0

К примеру если разделить на части логотип то есть сделать одну часть родительским то вторую часть мы сможем поставить абсолютно.

Посмотреть на мои тренировки то как делал это можно: здесь

Выглядеть это будет как в снипете ..чуть чуть адаптировал даже

*{
  margin:0;
  padding:0;
}

.menu .item p{
  font-family: 'Great Vibes', cursive;
  font-size:90px;
  position: relative;
  
}

.menu .item p span{
  position:absolute;
  left:100%;
  top:20px;
}
.menu{
  display:flex;
  align-items: center;
  justify-content: space-around;
  line-height:20px;
  height:100px;
}

.menu a{
  text-decoration:none;
  margin-left:6px;
}

@media(max-width: 768px){
  .menu{
    display:flex;
    align-items: flex-start;
    height:150px;
    margin-top:40px;
  }
  .menu .item a{
    display:block;
  }
  .mnav{
    display:none;
  }
  span.trigger{
    display:block;
    width:50px;
    height:50px;
    cursor:pointer;
  }
  span.trigger i{
    display:block;
    width:70%;
    height:6px;
    margin-top:4px;
    background:#000;
  }
}
<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="menu">
  <div class="item">
    <p>
      el
      <span>artista</span>
    </p>
  </div>
  <div class="item">
    <span class="trigger">
      <i></i>
      <i></i>
      <i></i>
    </span>
    <div class="mnav">
      <a href=""><a href="">item1</a></a>
      <a href=""><a href="">item2</a></a>
      <a href=""><a href="">item3</a></a>
      <a href=""><a href="">item4</a></a>
      <a href=""><a href="">item5</a></a>
      <a href=""><a href="">item6</a></a>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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