Дорогие форумчане! Помогите найти решение 5 проблем. Скрин во вложении.
1. Как плашку с верхним меню расширить на всю ширину экрана? Как изменить ее цвет?
2. Как 5 кнопок располагающихся в верхнем меню распределить равномерно по ширине плашки?
3.Как строку поиска и корзину опустить до верхнего меню, но так чтобы поиск и корзина были над ним, выше на 1 см?
4. Как сделать разрыв между названием компании и верхним меню? слишком близко
5. Как залить фоном место сверху, до верхнего меню??? Целиком, не оставляя белых полос по бокам.
Заранее спасибо!
0
Как Изменить Шапку В Осени? Помогите!
Автор Марина2014, 14 марта 2014 16:35
верхнее меню логотип шапка
В теме одно сообщение
#1
Отправлено 14 Март 2014 - 16:35
#2
Отправлено 14 Март 2014 - 22:42
Марина2014 (14 Март 2014 - 16:35) писал:
Дорогие форумчане! Помогите найти решение 5 проблем. Скрин во вложении.
1. Как плашку с верхним меню расширить на всю ширину экрана? Как изменить ее цвет?
2. Как 5 кнопок располагающихся в верхнем меню распределить равномерно по ширине плашки?
3.Как строку поиска и корзину опустить до верхнего меню, но так чтобы поиск и корзина были над ним, выше на 1 см?
4. Как сделать разрыв между названием компании и верхним меню? слишком близко
5. Как залить фоном место сверху, до верхнего меню??? Целиком, не оставляя белых полос по бокам.
Заранее спасибо!
1. Как плашку с верхним меню расширить на всю ширину экрана? Как изменить ее цвет?
2. Как 5 кнопок располагающихся в верхнем меню распределить равномерно по ширине плашки?
3.Как строку поиска и корзину опустить до верхнего меню, но так чтобы поиск и корзина были над ним, выше на 1 см?
4. Как сделать разрыв между названием компании и верхним меню? слишком близко
5. Как залить фоном место сверху, до верхнего меню??? Целиком, не оставляя белых полос по бокам.
Заранее спасибо!
По остальным.
Если верхнее меню растянуть на всю ширину экрана и пункты этого меню равномерно распределить по ней, то на широких экранах это будет выглядеть некрасиво. Давайте лучше мы их по центру меню выведем и просто увеличим между ними отступы.
Для этого в шаблоне 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 анонимных