1

Добрый день! Столкнулся с проблемой, с которой бьюсь уже несколько дней и не могу никак решить. Есть резиновое по высоте меню. Задача: прижать элемент меню "Скачать прайс" к правому краю меню. Из обязательных условий это вертикальное центрирование содержимого всех пунктов меню, где бы они не находились, слева или справа (наш "Скачать прайс". Как только уже не делал и через float'ы, и через абс. позиционирование. Последнее было самое близкое решение к достижению цели, но были тоже косяки. При подстановке к пункту меню, который надо прижать, значений top: 50%; right: 0 пункт центрировался по высоте не совсем вертикально. Как будто, грубо говоря, было невидимые границы моего синего меню, по которым это значение top: 50% ориентировалось. position: relative выставил родителю #menu В общем, такая вот беда. Помогите, пожалуйста, покончить уже с этим. Заранее низкий поклон! :) Код, прилагается: введите сюда описание изображения

#menu_background { background: #0060c1; }
#menu { width: 1100px; margin: 0 auto; position: relative; }

#menu_left { display: table-cell; vertical-align: middle; }
#menu_left_content { list-style: none; padding: 10px 0; }
#menu_left_content li { display: table-cell; font-size: 1.2em; vertical-align: middle; text-align: center; padding: 0 10px; color: #fff; border-right: 1px solid #fff; }
#menu_left_content li:hover {  }
#menu_left_content li.menu_left_content_li_last { border-right: none; }
#menu_left_content li.menu_left_content_li_elem { border-right: none; position: absolute; right: 0; padding: 0; margin: 0; }

#menu_right { display: table-cell; vertical-align: middle; }
#menu_right_content { }
#menu_right_content li { list-style: none; }
#menu_right_content a { background: #fff; padding: 5px 10px; font-size: 1.2em; text-align: center; border-radius: 25px; color: red; display: block; }
#menu_right_content a:hover  { transition: all 0.2s; box-shadow: 0px 0px 0px 4px rgba(255,255,255,1); }
#menu_right_content img { width: 25px; vertical-align: middle; margin-right: 10px; }
<div id="menu_background">
<div id="menu">
	<div id="menu_left">
		<ul id="menu_left_content" >
			<li>Водоотливы<br/>Подоконники</li>
			<li>Инструмент</li>
			<li class="menu_left_content_li_last">Строительная<br/>химия</li>			
		</ul>
	</div>
	<div id="menu_right">
		<div id="menu_right_content">
			<li><a href="" ><img src="images/pdf.png"/>Скачать прайс</a></li>
		</div>
	</div>
	
</div>
</div>

3 ответа 3

1

.menu { background: #0060c1; min-width: 600px; max-width: 1100px; margin: 0 auto; overflow: hidden; position: relative; }

.menu nav { float: left; }
.menu ul { list-style: none; padding: 0; }
.menu nav li { display: inline-block; font-size: 1.2em; vertical-align: middle; text-align: left; padding: 0; color: #fff; }
.menu nav li:before { content: ""; position: absolute; top: 10px; bottom: 10px; border-right: 1px solid; }
.menu nav li:first-child:before { content: none; }
.menu nav a { display: block; text-align: center; padding: 0 10px; cursor: pointer; text-decoration: none; }
.menu nav a:hover { color: yellow; }

.download-pricelist { position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; height: 1em; transition: all 0.2s;  background: #fff; padding: 5px 10px; font-size: 1.2em; text-align: center; border-radius: 25px; color: red; display: block; }
.download-pricelist:hover  { box-shadow: 0px 0px 0px 4px rgba(255,255,255,1); }
.download-pricelist img { width: 25px; vertical-align: middle; margin-right: 10px; }
<div class="menu">
  <nav>
    <ul>
      <li><a>Водоотливы<br/>Подоконники</a></li>
      <li><a>Инструмент</a></li>
      <li><a>Строительная<br/>химия</a></li>
    </ul>
  </nav>
  <a href="#" class="download-pricelist"><img src="images/pdf.png"/>Скачать прайс</a>
</div>

Ну и картинку лучше убрать из img и поместить в background, добавив padding-left.

1

Лучше так пойдет

#menu_background { width: 100%; height: 90px; background: #0060c1; }
#menu { width: 1100px; height: 90px; background: #0060c1; margin: 0 auto;}

#menu_left { float: left;}
#menu_left_content { list-style: none; padding: 10px 0; }
#menu_left_content li { display: table-cell; font-size: 1.2em; vertical-align: middle; text-align: center; padding: 0 10px; color: #fff; border-right: 1px solid #fff; }
#menu_left_content li:hover {  }
#menu_left_content li.menu_left_content_li_last { border-right: none; }
#menu_left_content li.menu_left_content_li_elem { border-right: none; position: absolute; right: 0; padding: 0; margin: 0; }

#menu_right {float: right; padding: 25px;}
#menu_right_content { }
#menu_right_content li { list-style: none; }
#menu_right_content a { background: #fff; padding: 5px 10px; font-size: 1.2em; text-align: center; border-radius: 25px; color: red; display: block; }
#menu_right_content a:hover  { transition: all 0.2s; box-shadow: 0px 0px 0px 4px rgba(255,255,255,1); }
#menu_right_content img { width: 25px; vertical-align: middle; margin-right: 10px; }
<div id="menu_background">
<div id="menu">
	<div id="menu_left">
		<ul id="menu_left_content" >
			<li>Водоотливы<br/>Подоконники</li>
			<li>Инструмент</li>
			<li class="menu_left_content_li_last">Строительная<br/>химия</li>			
		</ul>
	</div>
	<div id="menu_right">
		<div id="menu_right_content">
			<li><a href="" ><img src="images/pdf.png"/>Скачать прайс</a></li>
		</div>
	</div>
	
</div>
</div>

0

Спасибо всем большое за вашу отзывчивость!

KYRAN, к сожалению, вариант, предложенный вами не подошел, потому что используется фиксированная высота для блока #menu. Но все равно спасибо, что откликнулись :)

Qwertiy, я даже не знаю, какими словами выразить свою благодарность :) Спасибо огромное! Ваш вариант то, что надо. Я немного подпилил кое-что на свое усмотрение. Несмотря на это ваша идея решения вопроса наконец-таки разрешила мою проблему. Спасибо еще раз!

Пример, измененного под себя кода Qwertiy:

#menu_background { background: #0060c1; }
#menu { width: 1100px; margin: 0 auto; overflow: hidden; position: relative; }

#menu ul { list-style: none;  }
#menu ul li { display: table-cell; font-size: 1.2em; vertical-align: middle; text-align: left; padding: 10px 0; color: #fff; }
#menu ul li:hover { background: red; }
#menu ul li:before { content: ""; position: absolute; top: 10px; bottom: 10px; border-right: 1px solid; }
#menu ul li:first-child:before { content: none; }
#menu ul a { display: block; color: #fff; text-align: center; padding: 0 10px; cursor: pointer; text-decoration: none; }
#menu ul a:hover { color: yellow;  }

.download-pricelist { position: absolute; right: 4px; top: 0; bottom: 0; margin: auto; height: 1.6em; transition: all 0.2s;  background: #fff; padding: 5px 10px; font-size: 1.2em; text-align: center; border-radius: 25px; color: red; display: block; }
.download-pricelist:hover  { color: red; box-shadow: 0px 0px 0px 4px rgba(255,255,255,1); }
.download-pricelist img { width: 25px; vertical-align: middle; margin-right: 5px; }
<div id="menu_background">
<div id="menu">
	<ul>
		<li><a>Водоотливы<br/>Подоконники<br/>Подоконники</a></li>
		<li><a>Инструмент</a></li>
		<li><a>Строительная<br/>химия</a></li>
	</ul>
	<a href="#" class="download-pricelist"><img src="images/pdf.png"/>Скачать прайс</a>
</div>
</div>

В модифицированном примере есть одно -двух -трехстрочные пункты меню, для наглядности сделал hover у menu li красным, поигрался с другими некоторыми значениями. Да, и важным моментом было, чтобы правый бордер был высотой с наибольший пункт меню.

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

4
  • Ну ладно всегда рад вам помочь! 17 июл 2015 в 12:55
  • Раз уж ответ вместо комментария разместил, то выложи код в нём. Хоть ответом будет (мне его удалять не хочется) :)
    – Qwertiy
    17 июл 2015 в 13:12
  • "потому что используется фиксированная высота для блока #menu", а в вопросе это нельзя было написать, чтобы всё можно было сделать проще и без лишних проблем???
    – Qwertiy
    17 июл 2015 в 13:15
  • Про фиксированную высоту я упомянал: "Есть резиновое по высоте меню".
    – APEXA
    17 июл 2015 в 14:01

Ваш ответ

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

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