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


Верхнее Меню И Хедер


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

#1 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 06 Июнь 2013 - 04:41

Меню:
Как подвинуть его теперь вправо?
При наведении на пустые кнопки верхнего меню, почему-то появляется пустое подменю в виде полоски горизонтальной светлой, как убрать баг?
Как убрать белый контур (radius) кнопок в выпадающем подменю верхнего меню, например, первое подменю, это: о компании, сертификаты, конфеденциальность, гарантия и т.п.
Как уменьшить высоту header-а? поднять вверх блок cpages и строчку с корзиной и суммы в ней получается, а вот поднять остальные элементы header-а: меню верхнее и меню верхнее-два (каталог) никак. помогите?

Строка поиска:
Как назначить в строке поиска иконку для нажатия мышкой и поиска товара?

#2 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 06 Июнь 2013 - 12:28

что бы подвинуть верхнюю часть меню найдите в блоке Main.css код
.pad-box {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}

меняйте в нем параметр в большую сторону  
margin-left: 10px;

что бы подвинуть нижнюю часть верхнего меню найдите в html код
<li><a href="http://otdyh-i-son.ru/catalog/РАСПРОДАЖА" title="Распродажи">Распродажи</a>

и замените его на код

<li id="space"><a href="http://otdyh-i-son.ru/catalog/РАСПРОДАЖА" title="Распродажи">Распродажи</a>

далее в конец файла Main.css допишите

#space
{
margin-left: 191px;
}

Цитата

При наведении на пустые кнопки верхнего меню, почему-то появляется пустое подменю в виде полоски горизонтальной светлой, как убрать баг?

в каком браузере у вас появляется этот баг ? в хороме и FF никаких полосок не возникает


Цитата

Как убрать белый контур (radius) кнопок в выпадающем подменю верхнего меню, например, первое подменю, это: о компании, сертификаты, конфеденциальность, гарантия и т.п.


не совсем понятно что имеется в виду - не могли бы вы приложить скрины (картинки) как это должно выглядеть?

#3 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 06 Июнь 2013 - 12:52

такой баг появляется в опере и в хроме.

#4 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 06 Июнь 2013 - 13:20

Цитата

Как уменьшить высоту header-а? поднять вверх блок cpages и строчку с корзиной и суммы в ней получается, а вот поднять остальные элементы header-а: меню верхнее и меню верхнее-два (каталог) никак. помогите?

для того что бы поднять верхнюю часть верхнего меню найдите в main.css код

#header {
background: url({ASSETS_IMAGES_PATH}otdyhsonblue3-2.png?3099) no-repeat scroll 0 0 transparent;
padding: 0px;
margin: 0px auto;
width: 980px;
height: 237px;
background-size: cover;
float: left;
margin-left: 12px;
}


измените значение
height: 237px; на значение  height: 224px;

и код

#header_1 {
background: none repeat scroll 0 0 transparent;
height: 237px;
width: 100%;
}

измените значение   height: 237px;  на значение height: 224px;


обращаю ваше внимание что ранее в этом сообщении был другой код реализации этой задачи.. но в FF такой код будет работать некорректно.
поэтому используйте предложенный выше вариант.

#5 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 06 Июнь 2013 - 13:27

получилось вот так:

#top-menu {
height: 40px;
margin-top: -7px;
overflow: hidden;
}

верхнее меню при этом не поднимается вверх.

#6 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 06 Июнь 2013 - 13:57

Просмотр сообщенияotdyh-i-son.ru (06 Июнь 2013 - 13:27) писал:

получилось вот так:

#top-menu {
height: 40px;
margin-top: -7px;
overflow: hidden;
}

верхнее меню при этом не поднимается вверх.


все верно - работать этот код не будет .
пожалуйста выполните действия в сообщении выше

#7 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 06 Июнь 2013 - 14:13

Просмотр сообщенияTaisia (06 Июнь 2013 - 13:20) писал:

обращаю ваше внимание что ранее в этом сообщении был другой код реализации этой задачи.. но в FF такой код будет работать некорректно.
поэтому используйте предложенный выше вариант.

какой конкретно вариант-то теперь надо использовать в сообщении номер ....?
А
#top-menu {
height: 40px;
margin-top: -7px;
overflow: hidden;
}

поменять обратно на то, как было??

#8 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 06 Июнь 2013 - 15:36

сделайт так :
в коде

#top-menu {
height: 40px;
margin-top: -7px;
overflow: hidden;
}

удалите строку
margin-top: -7px;

далее проделайте действия в сообщении №4

#9 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 06 Июнь 2013 - 15:44

ок. спасиб.

#10 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 07 Июнь 2013 - 09:47

после внесенных изменений второе верхнее меню с каталогом не работает: при наведени мышкой на раздел матрасы, например, поймать мышкой выпадающее меню представляется нереальным, и так все разделы.

Помогите!!!

#11 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 08 Июнь 2013 - 00:24

Найдите в вашем файле стилей main.css

#mainmenu2 > li > ul {
		background: #3cc3c3;
background: -moz-linear-gradient(top, #3cc3c3 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
background: -webkit-linear-gradient(top, #3cc3c3 0%,#4e8c8a 100%);
background: -o-linear-gradient(top, #3cc3c3 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #3cc3c3 0%,#4e8c8a 100%);
background: linear-gradient(top, #3cc3c3 0%,#4e8c8a 100%);
		border: 2px solid grey;
		border-radius: 10px 45px 10px 45px;
		display: none;
		margin-top: -10px;
		position: absolute;
		top: 40px;
		width: auto;
		z-index: 200;
		padding: 10px;
}

и замените на

#mainmenu2 > li > ul {
		background: #3cc3c3;
background: -moz-linear-gradient(top, #3cc3c3 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
background: -webkit-linear-gradient(top, #3cc3c3 0%,#4e8c8a 100%);
background: -o-linear-gradient(top, #3cc3c3 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #3cc3c3 0%,#4e8c8a 100%);
background: linear-gradient(top, #3cc3c3 0%,#4e8c8a 100%);
		border: 2px solid grey;
		border-radius: 10px 45px 10px 45px;
		display: none;
		margin-top: -10px;
		position: absolute;
		top: 34px;
		width: auto;
		z-index: 200;
		padding: 10px;
}


#12 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 08 Июнь 2013 - 02:25

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

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

  • вид сайта 3.jpg


#13 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 08 Июнь 2013 - 02:42

Ваши меню будут накладываться на фон шапки, и изображение шапки при изменении размера обрежется. Размер можно уменьшить только до текста корзины. Вас устроит такой вариант?

#14 Flor@@

Flor@@

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

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 09 Июнь 2013 - 13:57

меня очень устроит такой вариант, так как шапку я тогда уберу, то есть заменю на какой-то фон, и надпись корзина я знаю как поднять и куда переместить.

#15 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 09 Июнь 2013 - 15:03

Просмотр сообщенияotdyh-i-son.ru (09 Июнь 2013 - 13:57) писал:

меня очень устроит такой вариант, так как шапку я тогда уберу, то есть заменю на какой-то фон, и надпись корзина я знаю как поднять и куда переместить.

Допустим поднимаем на 30px вверх.

Найдите код в main.css:
#logo {
height: 196px;
text-indent: -9999px;
}
и заменяем на:
#logo {
height: 166px;
text-indent: -9999px;
}
(из height каждый раз вычитаем 30)

Далее найдите код:
#header {
background: url(http://otdyh-i-son.ru/web/upload/assets/images/21/20306/otdyhsonblue3-2.png?3099) no-repeat scroll 0 0 transparent;
padding: 0px;
margin: 0px auto;
width: 980px;
height: 238px;
background-size: cover;
float: left;
margin-left: 12px;
}
измените строку - height: 238px; на такую height: 208px;

Далее найдите код:
#header_1 {
background: none repeat scroll 0 0 transparent;
width: 100%;
height: 237px;
}
и замените на:
#header_1 {
background: none repeat scroll 0 0 transparent;
width: 100%;
height: 207px;
}


#16 Theweatherisgood

Theweatherisgood

    Продвинутый пользователь

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

Отправлено 07 Август 2013 - 22:07

Здравствуйте!
Такие вопросы:

1. Как сделать кнопку в шапке сайта. Точнее нужно сделать с лева от основного меню в шапке сайта, кнопку (или же место для кнопки и задать ему определенный размер, саму картинку могу нарисовать на jpg файле шапки сайта), при чем так что бы она была ссылкой на страницу вида "связь с администрацией" (по умолчанию), т.е. кроме кнопки , которая будет выполнять функцию ссылки, сделать еще страницу, отображаемую только при нажатии этой кнопки, и что бы там конечный пользователь (клиент) мог  ввести номер телефона, представиться, указать почту, прикрепить файл и оставить комментарий. Необходима такая кнопка-ссылка на страницу, для того что бы клиент мог отправлять заказ, если он уже иммет готовый файл Exel, psd и прочие.

2. Аналогичную кнопку-ссылку необходимо сделать с правой стороны от основного меню в шапке сайта, так же ее фунцией будет переход на страницу. Сама страница нужна следующего вида: на ней будут логотипы производителей, коих товар будет выставлен на продажу, выглядеть должно как "категории" на странице "каталог" , но так что бы при клике на логотип производителя (вложеность) открывалась страница с категориями товаров, но только данного производителя.

Дополнение:
При минимальном разрешении экрана 800х600 эти места обрезаются, если актуально учитывать данное разрешение на сегодняшний день  , то вариант с такими кнопками переносится на нижнюю часть шапки (где оторажается название страниц, под основным меню), но в таком случае дополнительный вопрос. Как убрать названия страниц там где они отображаются и + как сделать так что бы кнопка названия страницы в основном меню (например "Каталог", имеются ввиду сами буквы) меняли свой цвет , например, на красный, после нажатия на нее и оставалась в этом цвете до перехода на другую страницу?

Шаблон "сияние", ссылка http://centrinstrument.storeland.ru/ (производители с шапки уберутся ) , номер акк SL-228001

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

#17 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 08 Август 2013 - 02:02

1) Не совсем понятен вопрос. Чем вас не устраивает кнопка в меню навигации "Связь с администрацией" которая и будет открывать данный раздел? Если вам все же нужна именно отдельная кнопка, то вы можете в шаблоне "HTML" после строки

<div id="header" class="container">

добавить

<div style="position: absolute; top: 10px; right: 10px;"><a href="Адрес вашей страницы" style="display: block; width: 100px; height: 30px;"></a></div>

после указать положение данной кнопки изменяя top и right относительно шапки, а так же вам необходимо задать адрес ссылки. В качестве изображения можно вставить тег <img> внутрь ссылки вида

<div style="position: absolute; top: 10px; right: 10px;"><a href="Адрес вашей страницы" style="display: block; width: 100px; height: 30px;"><img src="Адрес изображения кнопки" alt="" /></a></div>

Для второго вашего вопроса - действителен ответ на первый вопрос. В данном луче вам необходимо просто продублировать кнопку

<div style="position: absolute; top: 10px; right: 10px;"><a href="Адрес вашей страницы" style="display: block; width: 100px; height: 30px;"></a></div>

и задать уже другие параметры ей. Страницу вы можете сделать только в разделе Сайт -> Страницы, путем внесения текста и другой информации вручную. (изображения, ссылки, текст)

#18 Theweatherisgood

Theweatherisgood

    Продвинутый пользователь

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

Отправлено 08 Август 2013 - 22:55

Спасибо! Частично помогло.

Кнопка, точнее страница связи с администрацией устраивает, но хотелось бы немного разнообразить сайт, кроме того она будет выполнять немного другую функцию. (Наглядно видно на редактируемом сайте)

1. Как вместо активной ссылки "ТОВАРОВ В КОРЗИНЕ НА" сделать активный квадрат прозрачный и подогнать его под изображение корзины на сайте.

2. Как вместо адреса на изображение кнопки, вставить файл готовой кнопки формата png
(><imgsrc="Адрес изображения кнопки"alt=""/></a></div>)
и переместить ее под основное меню шапки, и подогнать точно в то место где написано ОТПРАВИТЬ (png изображение точная копия ). Имеется ввиду изображение черной квадратной фигуры с закругленными углами и надписью "отправить".

3.Как изменить окно ввода email, на окно ввода номера телефона,  на странице "связь с администрацией"? Имеется ввиду именно поле ввода, а не его название.

4. И помогите с корзиной. Я немного там похимичил с px. Вообщем все сбилось... Нужно сделать так что бы значек корзины выполнял роль активной ссылки В КОРЗИНЕ ТОВАРОВ НА,(сам значок просто изображение на фоне шапки, хотелось бы сделать что бы это был все таки отдельный вставляемый в шаблон значок, png изображение у меня есть) а справа было написано количество товаров и на какую сумму. Вообщем хотелось бы получить все как на картинке

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

  • shapka с корзиной89.jpg


#19 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 09 Август 2013 - 00:23

1) У вас это уже реализовано на вашем сайте.

2) Вы вставили некорректный код в шаблон, а именно

<div style="position: absolute; top: 30px; right: 10px;"><a href="http://centrinstrument.storeland.ru/feedback" style="display: block;
	width: 100px; height: 40px;"></a><img src= alt= otpravit.png /></a></div>

необходимо заменить на
<div style="position: absolute; top: 190px; right: 15px; width: 130px; z-index: 2;"><a href="http://centrinstrument.storeland.ru/feedback" style="display: block; width: 100px; height: 40px;"></a><img src="{ASSETS_IMAGES_PATH}otpravit.png" alt="" /></a></div>

3) К сожалению, этого сделать нельзя, так как поле email является обязательным для ввода, а так же проверяется на стороне сервера. В вести другую информацию кроме email адреса в данное поле нельзя.

#20 Theweatherisgood

Theweatherisgood

    Продвинутый пользователь

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

Отправлено 09 Август 2013 - 00:56

Блин короче не правильно сформулировал все... :( посплю напишу позже))




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

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