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


Как Изменить Шапку В Осени? Помогите!

верхнее меню логотип шапка

  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 Марина2014

Марина2014

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 14 Март 2014 - 16:35

Дорогие форумчане! Помогите найти решение 5 проблем. Скрин во вложении.

1. Как плашку с верхним меню расширить на всю ширину экрана? Как изменить ее цвет?

2. Как 5 кнопок располагающихся в верхнем меню распределить равномерно по ширине плашки?

3.Как строку поиска и корзину опустить до верхнего меню, но так чтобы поиск и корзина были над ним, выше на 1 см?

4. Как сделать разрыв между названием компании и верхним меню? слишком близко

5. Как залить фоном место сверху, до верхнего меню??? Целиком, не оставляя белых полос по бокам.

Заранее спасибо!

Прикрепленные изображения

  • 11.png


#2 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 14 Март 2014 - 22:42

Просмотр сообщенияМарина2014 (14 Март 2014 - 16:35) писал:

Дорогие форумчане! Помогите найти решение 5 проблем. Скрин во вложении.

1. Как плашку с верхним меню расширить на всю ширину экрана? Как изменить ее цвет?

2. Как 5 кнопок располагающихся в верхнем меню распределить равномерно по ширине плашки?

3.Как строку поиска и корзину опустить до верхнего меню, но так чтобы поиск и корзина были над ним, выше на 1 см?

4. Как сделать разрыв между названием компании и верхним меню? слишком близко

5. Как залить фоном место сверху, до верхнего меню??? Целиком, не оставляя белых полос по бокам.

Заранее спасибо!
Здравствуйте. Судя по всему с 3-м и 4-м вопросами вы уже справились.
По остальным.
Если верхнее меню растянуть на всю ширину экрана и пункты этого меню равномерно распределить по ней, то на широких экранах это будет выглядеть некрасиво. Давайте лучше мы их по центру меню выведем и просто увеличим между ними отступы.
Для этого в шаблоне HTML код меню
		{% IFNOT menu_empty %}
		  <ul id="megamenu">
			{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
				  <li class="root_menu {% IF menu.header.links.SELECTED %}active{% ENDIF %}" >
					<a href="{menu.header.links.URL}" class="root_link" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} >{menu.header.links.NAME}</a>
				  </li>
			  {% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
		  </ul>
		{% ENDIF %}
вырежьте и вставьте ниже, после кода
		<!-- END Блок навигации --> 
	  </div>
	</div>
Так ширина меню не будет ограничиваться шириной шапки.

Далее изменения в шаблоне style.css.
Найдите код
#megamenu{position: relative;clear: both;left: 15px;background: #FFEFEB; padding-top: 2px;border-radius: 10px; }
в нем удалите
left: 15px;
И добавьте в него код для выравнивания пунктов меню по центру
text-align: center;
Получится такая строка
#megamenu{position: relative;clear: both;left: 15px;background: #FFEFEB; padding-top: 2px;border-radius: 10px; text-align: center; }
В ней, кстати, #FFEFEB - код цвета фона верхнего меню.

Далее замените код
#megamenu li.root_menu{padding: 5px 8px 5px 8px;float:left;position:relative; height:23px;line-height:23px;}
на такой
#megamenu li.root_menu{padding: 5px 8px;display: inline-block;position:relative; height:23px;line-height:23px;}
Это последнее изменение, необходимое для того, чтобы пункты меню отображались по центру.
В этой строке теперь следует изменить значение
8px
допустим, до
30px
это увеличит отступы между пунктами меню.

И, наконец, пятый вопрос. Добавьте в style.css такой код
#header-fluid {background: yellow;}
Это зальет шапку нужным цветом.





Темы с аналогичным тегами верхнее меню логотип, шапка

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

0 пользователей, 0 гостей, 0 анонимных