Сообщений в теме: 6

[xomyd]

Привет форумчанам. 1/Вопрос такой, можно ли при наведении на верхнее меню сделать такой же еффект, как на сайте apple
2/ Уменьшить ширину header

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

• 

[Vaccina]

Пожалуйста, сообщите подробнее о каком именно эффекте идет речь? Вы хотите реализовать меню такого же вида (стиля)?

[xomyd]

Vaccina (06 Ноябрь 2013 - 06:51) писал:

Пожалуйста, сообщите подробнее о каком именно эффекте идет речь? Вы хотите реализовать меню такого же вида (стиля)?

да как на сайте apple

[ne_yana]

xomyd (06 Ноябрь 2013 - 06:54) писал:

да как на сайте apple

Здравствуйте, необходимо заменить в файле main.css

#mainmenu li a:hover {
background: url(http://design.happy54.ru/tm_link_border.gif) repeat-x center bottom;
}

на

#mainmenu li a:hover {
background: url('{ASSETS_IMAGES_PATH}img1.png') repeat-x 0 0, url('{ASSETS_IMAGES_PATH}img2.png') repeat-y 100% 0, url('{ASSETS_IMAGES_PATH}img3.png') repeat-y 0 0, rgba(0, 0, 0, .4);
}

Предварительно закачав эти файлы на сайт.

Уменьшить ширину:

.b_page {
background: url(http://design.happy54.ru/header_page.png) no-repeat center top;
}

на

.b_page {
background: url(http://design.happy54.ru/header_page.png) no-repeat center top;
width: 1800px;
margin-left: 60px;
}

но лучше будет изменить это изображение в графическом редакторе, сделав нужную ширину и высоту.

Прикрепленные файлы

•  appleMenu.zip   653байт   91 Количество загрузок:

[xomyd]

ne_yana (06 Ноябрь 2013 - 10:11) писал:

img2.png img1.png img3.png
Здравствуйте, необходимо заменить в файле main.css

#mainmenu li a:hover {
background: url(http://design.happy54.ru/tm_link_border.gif) repeat-x center bottom;
}

на

#mainmenu li a:hover {
background: url('{ASSETS_IMAGES_PATH}img1.png') repeat-x 0 0, url('{ASSETS_IMAGES_PATH}img2.png') repeat-y 100% 0, url('{ASSETS_IMAGES_PATH}img3.png') repeat-y 0 0, rgba(0, 0, 0, .4);
}

Предварительно закачав эти файлы на сайт.

Уменьшить ширину:

.b_page {
background: url(http://design.happy54.ru/header_page.png) no-repeat center top;
}

на

.b_page {
background: url(http://design.happy54.ru/header_page.png) no-repeat center top;
width: 1800px;
margin-left: 60px;
}

но лучше будет изменить это изображение в графическом редакторе, сделав нужную ширину и высоту.

Спасибо! вроде получилось, не подскажете нижнюю прокрутку как убрать?

[ne_yana]

xomyd (06 Ноябрь 2013 - 11:12) писал:

Спасибо! вроде получилось, не подскажете нижнюю прокрутку как убрать?

Откатите изменения, касающиеся .b_page, т.е. нужно удалить

width: 1800px;
margin-left: 60px;

[xomyd]

ne_yana (06 Ноябрь 2013 - 12:26) писал:

Откатите изменения, касающиеся .b_page, т.е. нужно удалить

width: 1800px;
margin-left: 60px;

Спасибо!