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


Как Же Это Сделать? =)

Фон меню дизайн

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

#1 Story

Story

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений
  • ГородСанкт-Петербург

Отправлено 28 Май 2013 - 21:48

Доброго времени суток!

Перейду сразу к делу.

1) Есть рамка меню показанная в квадрате "1", как сделать так чтобы эта рамка была на блоках 2,3,4,5,6, если есть такая возможность, достаточно будет помощи с 1 блоком, остальное сделаю по примеру
2) Если можно сделать рамку как в меню на блок "6" где расположен контент сайта, то как выравнять  его по отношению к меню (указано стрелками), сделать так сказать какую то грань к которой и меню будет привязано и блок контента, чтобы не уезжали не куда и находились на одной линии (надеюсь понятно выразился) =)
3) Меню : при выборе категории "Каталог" идет список наименований "Сверла...." при наведение курсора скрывается весь каталог,  видимо как то задевает блок слайдера, как сделать так чтобы меню работало поверх слайдера? выше поднимать меню не хочу, если есть возможность сделать поверх.
4) Каталог : возможно ли сделать подобный каталог? как показано на рисунке "Katalog" взятый с сайта http://www.baltoptto...u/catalogue/70/,  т.е нужен свернутый список товара, и при открытие товара показывается другой список с доступным "размером" и т.д, рядом пишется кол-во штук  и сразу можно прописать нужное покупателю кол-во, а при нажатие на определенный вид показывается его фото с описанием.



Буду рад любой помощи, ну а сам пока буду гуглить и гуглить...и пробовать методом тыка =)
Заранее спасибо за потраченное время.

С Уважением Дмитрий.

SL-207982
http://cuttools-shop.storeland.ru/

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

  • Magazin.jpg
  • Katalog.jpg


#2 Vaccina

Vaccina

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

  • Модераторы
  • 23 593 сообщений

Отправлено 29 Май 2013 - 04:38

1. Данная рамка вставлена у вас картинкой:

#nav {
background: url("http://wallaby.ucoz.ru/images_site/menu_bg.png") 0px 0px no-repeat transparent;
clear: both;
font-size: 12px;
height: 100px;
margin-left: 20%;
padding: 0px 100px 0px 9px;
position: relative;
width: 957px;
}
2.сайт - редактор шаблонов - main.css - найдите:
#nav {
background: url("http://wallaby.ucoz.ru/images_site/menu_bg.png") 0px 0px no-repeat transparent;
clear: both;
font-size: 12px;
height: 100px;
margin-left: 20%;
padding: 0px 100px 0px 9px;
position: relative;
width: 957px;
}
.container {
margin: 0px auto;
max-width: 1280px;
overflow: visible;
position: relative;
width: 90%;
}
замените на:
#nav {
background: url("http://wallaby.ucoz.ru/images_site/menu_bg.png") 0px 0px no-repeat transparent;
clear: both;
font-size: 12px;
height: 100px;
margin: 0px auto;
position: relative;
width: 957px;
}
.container {
margin: 0px auto;
max-width: 1280px;
overflow: visible;
position: relative;
width: 960px;
}

3. тот же файл, найдите:

#nav ul {
background-color: #222222;
border-bottom: 1px solid #222222;
border-left: 1px solid #222222;
border-radius: 0px 5px 5px;
border-right: 1px solid #222222;
border-top: 0px solid #222222;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.506);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
transform: scaleY(0);
transform-origin: 0px 0px;
transition: transform 0.1s cubic-bezier(0, 0, 1, 1) 0;
z-index: 2;
}
увеличьте значение z-index

4. Раскрывающийся каталог в стиле аккордеон:
http://forum.storela...ени/#entry16214
Вывод товара таблицей как в exel например:
http://forum.storela...дификация-цена/

#3 Story

Story

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений
  • ГородСанкт-Петербург

Отправлено 29 Май 2013 - 17:16

Спасибо! за предоставленные ответы, пользуюсь потихоньку.

Сейчас возникли некоторые проблемы ....

1) Куда пропали другие контакты (ICQ Skype номера телефонов) остался только 1 номер, где ошибка?   (Восстанавливать более старую версию не хотелось бы, пытался копипастить старые коды, не вышло, или выходит, но версия слишком старая по отношению к этой).

2) Как сделать такие же края в блоке "поиск", где указано, как с другой стороны этого блока ?


http://cuttools-shop.storeland.ru/

SL-207982




С Уважением Дмитрий.

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

  • Magazin2.jpg


#4 Taisia

Taisia

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

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

Отправлено 29 Май 2013 - 20:41

все контакты и скайп у вас не пропали они выводятся но скрыты блоком слайдера  (те. находятся под слайдером)
что бы они показывались поверх блока слайдера сделайте следующее

1. сделайте бэкап вашего сайта
2. в фале htm найдите код и удалите его

<ul id="contacts">
		  <div class="contacts">
			<div class="phone" title="Есть вопросы или хотите сделать заказ? Звоните!">
			  <!-- Первый контактный телефон -->
			  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
				<span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
				{% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %}
				{SETTINGS_STORE_PHONE_NUMBER1}
			  {% ENDIF %}
			 
			  <!-- Второй контактный телефон -->
			  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
				<br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
				{% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
				{SETTINGS_STORE_PHONE_NUMBER2}
			  {% ENDIF %}
			 
			  <!-- Третий контактный телефон -->
			  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}
				<br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span>
				{% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %}
				{SETTINGS_STORE_PHONE_NUMBER3}
			  {% ENDIF %}
			</div>
		   
			<!-- Время работы магазина -->
			{% IF SETTINGS_STORE_WORK_TIME %}
			  <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}">
				{SETTINGS_STORE_WORK_TIME}
			  </div>
			{% ENDIF %}
		   
			<!-- Skype номер -->
			{% IF SETTINGS_STORE_SKYPE %}
			  <div class="contentTableHeadMainSkype">
				<a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype">
				  <img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" />
				  <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span>
				</a>
			  </div>
			{% ENDIF %}
		   
			<!-- ICQ номер -->
			{% IF SETTINGS_STORE_ICQ %}
			  <div class="contentTableHeadMainIcq">
				<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус" width="16" height="16" />
				<span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
			  </div>
			{% ENDIF %}
		  </div>
		{% ENDIF %}
	  </div>

перед строками

<!-- Nyvo слайдер который отображается на главной -->
{% IF index_page %}

вставьте код

		  <div class="contacts">
			<div class="phone" title="Есть вопросы или хотите сделать заказ? Звоните!">
			  <!-- Первый контактный телефон -->
			  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
				<span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
				{% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %}
				{SETTINGS_STORE_PHONE_NUMBER1}
			  {% ENDIF %}
			 
			  <!-- Второй контактный телефон -->
			  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
				<br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
				{% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
				{SETTINGS_STORE_PHONE_NUMBER2}
			  {% ENDIF %}
			 
			  <!-- Третий контактный телефон -->
			  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}
				<br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span>
				{% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %}
				{SETTINGS_STORE_PHONE_NUMBER3}
			  {% ENDIF %}
			</div>
		   
			<!-- Время работы магазина -->
			{% IF SETTINGS_STORE_WORK_TIME %}
			  <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}">
				{SETTINGS_STORE_WORK_TIME}
			  </div>
			{% ENDIF %}
		   
			<!-- Skype номер -->
			{% IF SETTINGS_STORE_SKYPE %}
			  <div class="contentTableHeadMainSkype">
				<a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype">
				  <img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" />
				  <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span>
				</a>
			  </div>
			{% ENDIF %}
		   
			<!-- ICQ номер -->
			{% IF SETTINGS_STORE_ICQ %}
			  <div class="contentTableHeadMainIcq">
				<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус" width="16" height="16" />
				<span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
			  </div>
			{% ENDIF %}
		  </div>
		{% ENDIF %}
	  </div>

в файле style.css

найдите код

.contacts {
	float: left;
	position: relative;
}

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

.contacts {
	clear: both;
	float: right;
	font-size: 21px;
	position: relative;
	right: 193px;
	top: -32px;
}


#5 Taisia

Taisia

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

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

Отправлено 29 Май 2013 - 20:52

что бы закруглить края поиска найдите в файле style.css код

#Search {
background: url("http://wallaby.ucoz.ru/images_site/menu_bg.png") 0px 0px no-repeat transparent;
clear: both;
font-size: 12px;
height: 60px;
margin-left: 60px;
padding: 0px 100px 0px 9px;
position: relative;
width: 300px;
}

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

#Search {
background: url("http://wallaby.ucoz.ru/images_site/menu_bg.png") 0px 0px no-repeat transparent;
 border-radius: 15px 15px 15px 15px;
clear: both;
font-size: 12px;
height: 60px;
margin-left: 60px;
padding: 0px 100px 0px 9px;
position: relative;
width: 300px;
}


#6 Story

Story

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений
  • ГородСанкт-Петербург

Отправлено 29 Май 2013 - 21:15

Благодарю за помощь!

#7 Story

Story

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений
  • ГородСанкт-Петербург

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

Доброго времени суток!

Прошу помощи в осуществление задуманного!

1) Нужно сделать подвижное меню с контактами и корзиной которое будет двигаться при прокрутке сайта (зеленая рамка)

2) Каталог :  нужен список каталога справа свернутый с основными категориями и который можно развернуть на подкатегории, (синея рамка)

3) В желтых рамках расположить главные категории

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

т.е мы получаем такую картину, идут главные категории и под ними идут списком подкатегории  с наименованием товара


Не хочу злоупотреблять вашей помощью, но все же если возможно опишите подробнее, как для полного "чайника".

С уважением Дмитрий.


SL 207982

http://cuttools-shop.storeland.ru

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

  • magazin4.png


#8 Vaccina

Vaccina

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

  • Модераторы
  • 23 593 сообщений

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

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





Темы с аналогичным тегами Фон, меню, дизайн

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

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