Перейти к содержимому

Фотография
- - - - -

Сделать логотип посередине с помощью CSS


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 5

#1 MirKuz

MirKuz

    Прохожий

    Топикстартер
  • Новичок
  • 0
    3 сообщ.

Отправлено 21 Июль 2017 в 18:22

Здравствуйте, решил сделать меню сайта с логотипом посередине вот так:

    }
	.hmenuA li:nth-child(2) {
	width: 264px;
	height: 86px;
	background: url(http://s48.radikal.ru/i122/1707/40/7bfce4569380.png) no-repeat center center;

Но теперь мой логотип появляется в выпадающем меню:
WKcqLJUp.png
Что нужно сделать, чтобы логотип был только в меню,а не там и там.


  • 0

Спонсор

#2 Volly

Volly

    Увлеченный

  • Участник
  • 96
    469 сообщ.

Отправлено 21 Июль 2017 в 18:55

Дайте уникальное название тэгу, в который надо вставить логотип и напишите для него правило как-то так:

html

<li id="unikumName">

css

#unikumName {
    background: url(http://s48.radikal.ru/i122/1707/40/7bfce4569380.png) no-repeat center center;
}

  • 0

#3 MirKuz

MirKuz

    Прохожий

    Топикстартер
  • Новичок
  • 0
    3 сообщ.

Отправлено 21 Июль 2017 в 19:50

Дайте уникальное название тэгу, в который надо вставить логотип и напишите для него правило как-то так:
html

<li id="unikumName">
css
#unikumName {
    background: url(http://s48.radikal.ru/i122/1707/40/7bfce4569380.png) no-repeat center center;
}

Получается, что картинка - background для кнопки, а не логотип
N4LoK65P.png
  • 0

#4 Pichs

Pichs

    Прохожий

  • Новичок
  • 0
    3 сообщ.

Отправлено 22 Июль 2017 в 19:27

<ul class="header">
    <li>магазин</li>
    <li class="logo"><img src="http://s48.radikal.ru/i122/1707/40/7bfce4569380.png"</li>
    <li>помощь</li>
</ul>
.header {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header li {
    width: 200px;
    height: 50px;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    width: 150px;
}

MirKuz
 
Как могло получиться подобное? если задний фон присваивается нескольким блокам, после таких селекторов ".hmenuA li:nth-child(2)", значит, вероятнее всего, у вас класс .hmenuA присвоен нескольким списками, через него он и добирается до второго дочернего элемента li у обоих списков и задает задний фон, сверху был вариант с присвоением идентификатора нужному блоку списка, не знаю, что могло пойти не так, а вообще, если вы хотите сделать логотип, то можно добавить изображение через тег <img> в нужный блок, и стилизовать его, как нужно. к примеру:


  • 0

#5 Pichs

Pichs

    Прохожий

  • Новичок
  • 0
    3 сообщ.

Отправлено 22 Июль 2017 в 20:58

Здравствуйте, решил сделать меню сайта с логотипом посередине вот так:

    }
	.hmenuA li:nth-child(2) {
	width: 264px;
	height: 86px;
	background: url(http://s48.radikal.ru/i122/1707/40/7bfce4569380.png) no-repeat center center;

Но теперь мой логотип появляется в выпадающем меню:
WKcqLJUp.png
Что нужно сделать, чтобы логотип был только в меню,а не там и там.

ну или посмотри здесь, я сделал шапку по быстрому, селекторы применяются и для вложенного списка, такова спецификация https://codepen.io/p...XP?editors=1100


  • 0

#6 GTAlex

GTAlex

    Прохожий

  • Участник
  • 0
    16 сообщ.

Отправлено 22 Август 2017 в 09:07

я так понимаю - вопрос решён?

по указанной ссылке всё нормально - лого посредине, в выпадающем нет


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей