1

Ребят, такая проблема. Хочу чтобы лого был на одной строке с меню, я это сделал. Но меню очень низко сидит на странице (т.к. на одном уровне с эмблемой). Как сделать так, чтобы лого осталось на этой же позиции, а блок меню поднялся чуть выше?

.header {
  color: #22D99F;
  background-color: #052230;
  border: 3px solid #6593E1;
  border-radius: 30px;
  font-size: 40px;
  margin-top: 50px;
  margin-left: 200px;
  margin-right: 10px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: center;
  width: 1100px;
}

.news {
  margin-right: 30px;
  display: inline-block;
  font-size: 30px;
  background-color: #6593E1;
  border: 5px solid #382C49;
  border-radius: 30px;
  color: #D2C2E1;
  padding-left: 10px;
  padding-right: 10px;
  width: 200px;
  text-align: center;
}

.news:hover {
  background-color: #78527E;
  color: lime;
}

.hood {
  display: inline-block;
}

.lab {
  margin-left: 50px;
  margin-top: 50px;
  width: 200px;
  height: 250px;
  background-image: url('http://russia-assault.ru/files/forums_imgs/1506001407.png');
  background-position: center;
}
<div class="lab hood"></div>
<div class="header hood">
  <div class="news">
    <B>Новости</B>
  </div>
  <div class="news">
    <B>Статистика</B>
  </div>
  <div class="news">
    <B>Турниры</B>
  </div>
  <div class="news">
    <B>Матчи</B>
  </div>
</div>

Если не совсем поняли суть вопроса - пишите. Спасибо.

2
  • Добавьте, пожалуйста, полный код, не вижу в примере класса .lab
    – meine
    Commented 7 янв. 2019 в 23:34
  • @meine добавил,извини,что так некрасиво табуляцию произвел,надеюсь поймешь.
    – Elus1ve
    Commented 8 янв. 2019 в 5:24

1 ответ 1

4

Хочу чтобы лого был на одной строке с меню, я это сделал.

Не подумайте, что это оскорбление, но я не увидел картинку и меню на одной строке.

Здесь я привел пример как Вы можете выстроить свой код, а снизу я расскажу в общем о выстраивании элементов в 1 линию/строку.

Все рассматривать не буду, расскажу только об основных, которые чаще всего используются на практике и хорошо себя зарекомендовали, для каждой задачи подход может быть разным.

Выровнить элементы в одну строку можно несколькими способами:

  1. display: inline-block; - данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. ВНИМАНИЕ! Если не установить свойство width, блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством.

Пример:

.block {
  height: 100px;
  width: 100px;
  border: 3px solid red;
  display: inline-block;
}
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

  1. float: left/right; - Аналогичное по результату display: inline-block, но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Если мы изменим наш предыдущий пример, то результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа <p> с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-right

Пример:

.block {
  height: 100px;
  width: 100px;
  border: 3px solid red;
  float: left;
  margin-right: 30px;
}
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

  1. display: flex; - c помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю. Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси. Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float, clear и vertical-align, а так же свойства, задающие колонки в тексте. И теперь родительскому(.container) элементу добавляем display: flex;. Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

Пример:

.container {
  display: flex;
}

.block {
  height: 100px;
  width: 100px;
  border: 3px solid red;
  margin-right: 30px;
}
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Главную суть выстраивания элементов я передал, подробнее Вы сможете почитать в интернете. Снизу я приложу ссылки.

Подробнее о свойстве display: flex; Вы можете почитать перейдя по этой ссылке.

Свойство display: inline-block; ссылка

Свойство float: left/right; ссылка

4
  • А как же grid?
    – De.Minov
    Commented 8 янв. 2019 в 7:50
  • @CbIPoK2513, Хорошо подметили, но, к сожалению, или к счастью, я не так часто вижу его в применении, поэтому и не стал указывать.
    – meine
    Commented 8 янв. 2019 в 7:53
  • @meine слушай, а как уменьшить картинку в css?Я уменьшаю width и height, а изображение только обрезается
    – Elus1ve
    Commented 8 янв. 2019 в 12:14
  • @Elus1ve, а как Вы вставляете изображение?
    – meine
    Commented 9 янв. 2019 в 4:47

Ваш ответ

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

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