@sweeet1337

Как сделать логотип на одном уровне с меню?

Всем привет! Нужна помощь. У меня есть на сайте меню.
<div class="container">
 <img class="logo" src="http://d98889qc.beget.tech/images/logo.png" >

	<nav class="nav right">
		<ul>
			<li class="current"><a href="#">Главная</a></li>
			<li ><a href="#">Услуги</a></li>
			<li><a href="#">Цены</a></li>
			<li><a href="#">О нас</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Новости</a></li>
		</ul>
	</nav>
</div>

Прилагаю так же к нему css
/* меню */
.nav {
	margin: 20px 0;
	z-index: 101;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	*display:inline; /* ie7 */
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #c75b5b;
	line-height: 100%;
}
.nav a:hover {
	color: black;
}
.nav .current a {
	background: #c75b5b;
	color: #fff;
	border-radius: 3px;
}

/* меню справа */
.nav.right ul {
	text-align: right;
}

/* меню по центру */
.nav.center ul {
	text-align: center;
}

@media screen and (max-width: 600px) {
	.nav {
		position: relative;
		min-height: 40px;
	}	
	.nav ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #c75b5b;
		background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: none; /* скрыть все <li> пункты */
		margin: 0;
	}
	.nav .current {
		display: block; /* показывать только текущие активные <li> пункты */
	}
	.nav a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.nav .current a {
		background: none;
		color: #c75b5b;
	}
	.nav .current:hover a {
		background: none;
		color: black;
	}
	/* при наведении на пункты меню */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		background: url(images/icon-check.png) no-repeat 10px 7px;
	}

	/* адаптивное меню справа */
	.nav.right ul {
		left: auto;
		right: 0;
	}

	/* адаптивное меню по центру */
	.nav.center ul {
		left: 50%;
		margin-left: -90px;
	}
	
}

Итог: Нужно сделать вот эту картинку logo.png На одном уровне с меню. Помогите пожалуйста!
  • Вопрос задан
  • 5787 просмотров
Решения вопроса 1
@archelon
блин, тут вариантов 5-6 сходу придумывается.
флекс, флоаты, инлайн-блок, таблицей, в конце-концов.
Но быстрый ответ дать не получится, потому что нужно более-менее четко представлять, ЧТО должно получиться в итоге.
самое быстрое:
.container {
display:flex;
}

подробнее: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
только у вас там .nav ul в медиа-запросах абсолютно спозиционирован, это надо переделать.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Karpion
Картинку Вам тут никто не нарисует.

Что значит "на одном уровне с меню"? Картинка слева, меню справа? Ну, например, так:
{TABLE}{TR}
{TD}картинка{/TD}
{TD}меню{/TD}
{/TR}{/TABLE}
(фиг.скобки заменить на меньше/больше)
Слова внутри таблицы - заменить на то. что Вам туда нужно поместить.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы