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


Помогите С Установкой Css3 Вкладок (Табов)

Автор NaLeeWay, 13 дек. 2012 11:37
css3 установка описание товар

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

#21 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 25 Январь 2013 - 21:07

Просмотр сообщенияНаталья C. (24 Январь 2013 - 20:18) писал:

Уважаемый Koderhan! Спасибо Вам огромное за помощь в столь сложной для меня работе! ))
Все сделала, как хотела!
Без Вашей помощи бы никогда не справилась....
До новых встреч в "эфире" ;)  :)

Добрый вечер.
Сегодня поняла, что необходимо добавить пятую вкладку "Оплата".
Скопировала, все сделала по аналогии.
Вкладка появилась.

Но вот наполнение почему-то нет.
Мой сайт.
Посмотрите, в чем проблема в коде?
Спасибо!

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

  • Оплата.jpg

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


#22 Vaccina

Vaccina

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

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

Отправлено 26 Январь 2013 - 02:25

Вам необходимо в файле стилей style2.css найти

.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 {
	opacity: 1;
	transform: translateX(0px);
	transition: all 0.2s ease-out 0.1s;
	z-index: 100;
}

и заменить на

.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4, .tabs input.tab-selector-5:checked ~ .content .content-5 {
	opacity: 1;
	transform: translateX(0px);
	transition: all 0.2s ease-out 0.1s;
	z-index: 100;
}

далее добавьте

.tabs input#tab-5 {
	left: 480px;
}

#23 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 26 Январь 2013 - 10:14

Просмотр сообщенияVaccina (26 Январь 2013 - 02:25) писал:

Вам необходимо в файле стилей style2.css найти

.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 {
opacity: 1;
transform: translateX(0px);
transition: all 0.2s ease-out 0.1s;
z-index: 100;
}

и заменить на

.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4, .tabs input.tab-selector-5:checked ~ .content .content-5 {
opacity: 1;
transform: translateX(0px);
transition: all 0.2s ease-out 0.1s;
z-index: 100;
}

далее добавьте

.tabs input#tab-5 {
left: 480px;
}

Доброе утро!
Сделала. Не вышло. Теперь все остальные колонки сбились. Только одна "Оплата" в порядке ((
Скриншоты во вложении.

Могли бы вы подправить в файлике сразу?
В моем файле Style2.css немного другой код был, чем Вы писали.

Я пока восстановила шаблон из бэк апа.
Спасибо и хорошего дня! :)

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

  • Все сбилось.jpg
  • Все сбилось2.jpg

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

  • Прикрепленный файл  Style2.doc   35,5К   191 Количество загрузок:

#24 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 26 Январь 2013 - 10:29

Просмотр сообщенияНаталья C. (26 Январь 2013 - 10:14) писал:

Доброе утро!
Сделала. Не вышло. Теперь все остальные колонки сбились. Только одна "Оплата" в порядке ((
Скриншоты во вложении.

Могли бы вы подправить в файлике сразу?
В моем файле Style2.css немного другой код был, чем Вы писали.

Я пока восстановила шаблон из бэк апа.
Спасибо и хорошего дня! :)


В файле style2.css сразу после блока
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
transition: all ease-out 0.2s 0.1s;
}

вставьте
.tabs input.tab-selector-5:checked ~ .content .content-5 {
opacity: 1;
	 transform: translateX(0px);
	 transition: all 0.2s ease-out 0.1s;
	 z-index: 100;
}
.tabs input#tab-5 {
left: 480px;
}

Сообщение отредактировал support 2.0: 26 Январь 2013 - 11:02
добавлен еще один блок

#25 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 26 Январь 2013 - 18:58

Просмотр сообщенияsupport 2.0 (26 Январь 2013 - 10:29) писал:

В файле style2.css сразу после блока
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
transition: all ease-out 0.2s 0.1s;
}

вставьте
.tabs input.tab-selector-5:checked ~ .content .content-5 {
opacity: 1;
	 transform: translateX(0px);
	 transition: all 0.2s ease-out 0.1s;
	 z-index: 100;
}
.tabs input#tab-5 {
left: 480px;
}

Спасибо, все получилось!

Хорошая форма с табами.

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

Это так и останется?

Нельзя ли придумать какое-то "лекарство", чтобы загружалось так же быстро, как и до установки форм?
Может это из-за "двигающихся эффектов"?

Спасибо!

#26 Koderhan

Koderhan

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

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

Отправлено 27 Январь 2013 - 08:49

Это нормально. Ведь к сайту подключились дополнительные скрипты.
Можно попробовать сделать так чтобы скрипты загрузились только для страницы товара.
Из файла "HTML".
Удалить код:
<script type="text/javascript" src="{ASSETS_JS_PATH}modernizr.custom.04022.js"></script>
В файл "Товар".
Добавить код:
<script type="text/javascript" src="{ASSETS_JS_PATH}modernizr.custom.04022.js"></script>

#27 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 27 Январь 2013 - 09:51

Просмотр сообщенияKoderhan (27 Январь 2013 - 08:49) писал:

Это нормально. Ведь к сайту подключились дополнительные скрипты.
Можно попробовать сделать так чтобы скрипты загрузились только для страницы товара.
Из файла "HTML".
Удалить код:
<script type="text/javascript" src="{ASSETS_JS_PATH}modernizr.custom.04022.js"></script>
В файл "Товар".
Добавить код:
<script type="text/javascript" src="{ASSETS_JS_PATH}modernizr.custom.04022.js"></script>

Доброе утро, Koderhan. Сделала, как Вы написали.
Все так же медленно.

А этот код <scripttype="text/javascript"src="{ASSETS_JS_PATH}modernizr.custom.04022.js"></script> в файле "Товар" можно ставить в любое место?
Я в самый конец поставила перед </div>

#28 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 28 Январь 2013 - 09:38

Просмотр сообщенияНаталья C. (27 Январь 2013 - 09:51) писал:

Доброе утро, Koderhan. Сделала, как Вы написали.
Все так же медленно.

А этот код <scripttype="text/javascript"src="{ASSETS_JS_PATH}modernizr.custom.04022.js"></script> в файле "Товар" можно ставить в любое место?
Я в самый конец поставила перед </div>


В прицепи, да, в любое место, но может быть у Вас ошибка в том, что Вы немного не так написали эту строчку? У Вас не стоит прjбел между словами script и type

<script type="text/javascript" src="{ASSETS_JS_PATH}modernizr.custom.04022.js"></script>

#29 Sergey Ushakov

Sergey Ushakov

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

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

Отправлено 30 Январь 2013 - 21:05

Здравствуйте, помогите и мне немного.

1)   Характеристики во вкладке стали не ровно, нужно их сделать как были по умолчанию, например: " Размер................полуторный " ит.д. , только в 1 столбик.

2) Как передвинуть кнопку " В корзину" , что бы она была на одном уровне с ценой товара?

3) После того как переписал код в шаблоне "Товар" , для того что бы встроить данное меню, подвал стал подниматься наверх. Как это исправить?

4) Дополнительные фото товара сделать фиксированного размера, например 65х65 пикселей

evropostel.com

Изображение

#30 mikola

mikola

    Good soo good

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

Отправлено 30 Январь 2013 - 21:18

Просмотр сообщенияSergey Ushakov (30 Январь 2013 - 21:05) писал:

Здравствуйте, помогите и мне немного.

1)   Характеристики во вкладке стали не ровно, нужно их сделать как были по умолчанию, например: " Размер................полуторный " ит.д. , только в 1 столбик.

2) Как передвинуть кнопку " В корзину" , что бы она была на одном уровне с ценой товара?

3) После того как переписал код в шаблоне "Товар" , для того что бы встроить данное меню, подвал стал подниматься наверх. Как это исправить?

evropostel.com

добрый вечер
если правильно я вас понял то http://forum.storela...тики/#entry7299

#31 Sergey Ushakov

Sergey Ushakov

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

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

Отправлено 30 Январь 2013 - 22:53

Просмотр сообщенияMikola (30 Январь 2013 - 21:18) писал:

добрый вечер
если правильно я вас понял то http://forum.storela...тики/#entry7299

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

#32 Vaccina

Vaccina

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

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

Отправлено 31 Январь 2013 - 00:38

Добавьте в ваш файл стилей main.css

.goodsDataFeatures p {
	background: url("/web/upload/assets/images/10/9976/grey_dotted.gif") repeat-x scroll 0 100% transparent;
	float: left;
	line-height: 1.2em;
	margin: 0.2em 0 0;
	padding: 0;
	width: 100%;
}

#33 Sergey Ushakov

Sergey Ushakov

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

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

Отправлено 31 Январь 2013 - 10:50

Просмотр сообщенияVaccina (31 Январь 2013 - 00:38) писал:

Добавьте в ваш файл стилей main.css

.goodsDataFeatures p {
background: url("/web/upload/assets/images/10/9976/grey_dotted.gif") repeat-x scroll 0 100% transparent;
float: left;
line-height: 1.2em;
margin: 0.2em 0 0;
padding: 0;
width: 100%;
}

Добавил. К сожалению ничего не изменилось (

#34 Koderhan

Koderhan

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

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

Отправлено 31 Январь 2013 - 11:02

Попоробуйте данный код:
.goodsDataFeatures p {
		background: url("{ASSETS_IMAGES_PATH}grey_dotted.gif") repeat-x scroll 0 100% transparent;
		float: left;
		line-height: 1.2em;
		margin: 0.2em 0 0;
		padding: 0;
		width: 100%;
}

#35 Sergey Ushakov

Sergey Ushakov

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

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

Отправлено 31 Январь 2013 - 11:13

Просмотр сообщенияKoderhan (31 Январь 2013 - 11:02) писал:

Попоробуйте данный код:
.goodsDataFeatures p {
	 background: url("{ASSETS_IMAGES_PATH}grey_dotted.gif") repeat-x scroll 0 100% transparent;
	 float: left;
	 line-height: 1.2em;
	 margin: 0.2em 0 0;
	 padding: 0;
	 width: 100%;
}

Тоже ничего.
Может тогда пока пройтись по двум другим вопросам:

2) Как передвинуть кнопку " В корзину" , что бы она была на одном уровне с ценой товара?

3) После того как переписал код в шаблоне "Товар" , для того что бы встроить данное меню, подвал стал подниматься наверх. Как это исправить?

evropostel.com

#36 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 31 Январь 2013 - 12:09

Просмотр сообщенияSergey Ushakov (31 Январь 2013 - 11:13) писал:

Тоже ничего.
Может тогда пока пройтись по двум другим вопросам:

2) Как передвинуть кнопку " В корзину" , что бы она была на одном уровне с ценой товара?

3) После того как переписал код в шаблоне "Товар" , для того что бы встроить данное меню, подвал стал подниматься наверх. Как это исправить?

evropostel.com

1. в Первом пункте у Вас должно получиться так, как на моем скриншоте

2. В шаблоне Товар (Сайт -> Редактор тем) найдите строчку
<div class="vmCartContainer1" style="float: left; width: 135px;">

перед ней стоит <br>. Уберите этот тег

Теперь чуть ниже найдите строчку (возможно небольшие отличия есть)
<input type="submit" style="margin:10px; position:relative;" onclick="$('.goodsDataForm').submit(); return false;" class="addtocart_button" value="В корзину" title="Добавить товар в корзину покупок">

в ней есть 
style="margin:10px; position:relative;"
измените это на
style="margin:10px; margin-top-0px; position:relative;"

#37 Koderhan

Koderhan

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

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

Отправлено 31 Январь 2013 - 12:18

Цитата

2) Как передвинуть кнопку " В корзину" , что бы она была на одном уровне с ценой товара?
В файле "Товар".
Найти код:
style="float: left; width: 135px;"
Заменить:
style="float: left; width: 100%;"

Найти примерно такой код:
<input type="submit" style="margin:10px;position:relative;" onclick="$('.goodsDataForm').submit(); return false;" class="addtocart_button" value="В корзину" title="Добавить товар в корзину покупок">
Заменить:
<input type="submit" style="margin:10px; margin-left: 0px;position:relative;" onclick="$('.goodsDataForm').submit(); return false;" class="addtocart_button" value="В корзину" title="Добавить товар в корзину покупок">


Не забудьте сделать резервную копию шаблона перед изменениями.

#38 Sergey Ushakov

Sergey Ushakov

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

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

Отправлено 31 Январь 2013 - 13:44

Просмотр сообщенияKoderhan (31 Январь 2013 - 12:18) писал:

В файле "Товар".
Найти код:
style="float: left; width: 135px;"
Заменить:
style="float: left; width: 100%;"

Найти примерно такой код:
<input type="submit" style="margin:10px;position:relative;" onclick="$('.goodsDataForm').submit(); return false;" class="addtocart_button" value="В корзину" title="Добавить товар в корзину покупок">
Заменить:
<input type="submit" style="margin:10px; margin-left: 0px;position:relative;" onclick="$('.goodsDataForm').submit(); return false;" class="addtocart_button" value="В корзину" title="Добавить товар в корзину покупок">


Не забудьте сделать резервную копию шаблона перед изменениями.

Спасибо! не совсем так, но с горем пополам передвинул, с помощью абсолютного позиционирования.
Осталось:

1) Характеристики во вкладке стали не ровно, нужно их сделать как были по умолчанию, (только чтобы осталось как сейчас в один столбик) например: " Размер................полуторный
Бренд..................Tango
итд.

2) После того как переписал код в шаблоне "Товар" , для того что бы встроить данное меню, подвал стал подниматься наверх. Как это исправить?

evropostel.com

#39 Koderhan

Koderhan

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

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

Отправлено 31 Январь 2013 - 13:57

В файле "style2.css".
Найти код:
.content div {
position: absolute;
top: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
transition: all linear 0.3s;
}
Заменить:

.content div {
position: absolute;
top: 0;

width: 100%;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
transition: all linear 0.3s;
}
Затем вставьте код из этого сообщения в main.csstemplate . http://forum.storela...__20#entry41341

#40 Sergey Ushakov

Sergey Ushakov

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

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

Отправлено 31 Январь 2013 - 14:33

Просмотр сообщенияKoderhan (31 Январь 2013 - 13:57) писал:

В файле "style2.css".
Найти код:
.content div {
position: absolute;
top: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
transition: all linear 0.3s;
}
Заменить:

.content div {
position: absolute;
top: 0;

width: 100%;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
transition: all linear 0.3s;
}
Затем вставьте код из этого сообщения в main.csstemplate . http://forum.storela...__20#entry41341


Появилось расстояние, но точек нет (скрин1)

Описание теперь выезжает за рамки (скрин2)

Изображение


Изображение
Обратно в Страница товара


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Страница товара
  6. Privacy Policy