Выравнивание Динамических Вкладок
#1
Отправлено 15 Август 2013 - 19:47
1 надписи поставить на свои места (пыталась увеличить кнопку больше, она увеличилась, а надпись все больше сьежает вправо)
2 почему то не появляется 4 вкладка "отзывы" (т е она прописана, но ее нет). почему?)
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Описание </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2"/>
<label for="tab-2" class="tab-label-2" style="padding: 0px 50px;">Характеристики</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3" style="font-size: 12px; padding: 0px 50px;">Сопутствующие товары</label>
{% IFNOT TARIFF_FEATURE_GOODS_OPINION %}
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">Отзывы</label>
{%ENDIF%}
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<h2>{GOODS_NAME}</h2>
{GOODS_DESCRIPTION_LARGE}
</div>
........
<div class="content-4">
<!-- Если в тарифном плане подключен модуль отзывов о товаре -->
{% IF TARIFF_FEATURE_GOODS_OPINION %}
<!-- Если не выключен модуль отзывов о товаре -->
{% IFNOT SETTINGS_OPINION_DISABLE %}
<h3>Отзывы о {GOODS_NAME}</h3>
<!-- Если отзывов по товару вообще нет, ни положительных ни отрицательных -->
{% IF opinion_list_empty_without_filter %}
<div class="goodsDataOpinionMessage empty">Отзывов пока не было. Вы можете <a href="#goodsDataOpinionAdd" class="jsAction goodsDataOpinionShowAddForm">оставить его первым</a></div>
<!-- Если по товару есть хотя бы один отзыв -->
{% ELSE %}
<table>
<!-- Верхняя навигация (Фильтры и страницы) -->
<thead>
<tr class="goodsDataOpinionListNavigateTop">
<td>
<!-- Среднее значение по результатам всех отзывов об этом товаре -->
{% IF GOODS_OPINION_RATING_VALUE_ROUND %}
<img src="{FORALL_IMAGES_PATH}stars/{GOODS_OPINION_RATING_VALUE_ROUND}.gif" alt="{GOODS_OPINION_RATING_VALUE_ROUND}" class="valignMiddle" style="padding-right:1em;" />
{% ELSE %}
<img src="{FORALL_IMAGES_PATH}stars/10.gif" alt="Рейтинг не определён" class="valignMiddle" style="padding-right:1em;" />
{% ENDIF %}
<!-- Фильтры отзывов -->
<span class="goodsDataOpinionAverageInfo">
{% IF GOODS_OPINION_GENERALLY_IS_GOOD=-1 %}
Все ({GOODS_OPINION_RATING_CNT_ALL}) |
{% ELSE %}
<a href="{GOODS_OPINION_ALL_URL}">Все ({GOODS_OPINION_RATING_CNT_ALL})</a> |
{% ENDIF %}
{% IF GOODS_OPINION_GENERALLY_IS_GOOD=1 %}
Положительные ({GOODS_OPINION_RATING_CNT_GOOD}) |
{% ELSE %}
<a href="{GOODS_OPINION_GOOD_URL}">Положительные ({GOODS_OPINION_RATING_CNT_GOOD})</a> |
{% ENDIF %}
{% IF GOODS_OPINION_GENERALLY_IS_GOOD=0 %}
Отрицательные ({GOODS_OPINION_RATING_CNT_BAD}) |
{% ELSE %}
<a href="{GOODS_OPINION_BAD_URL}">Отрицательные ({GOODS_OPINION_RATING_CNT_BAD})</a> |
{% ENDIF %}
<a href="#goodsDataOpinionAdd" class="jsAction goodsDataOpinionShowAddForm AddNewOpinionLinkAfterList">Оставить отзыв</a>
</span>
</td>
<td>
<!-- Страницы отзывов -->
{% IF opinion_show_pages %}
<div class="square_pages">
<span>Страницы: </span>
{% FOR opinion_pages_list %}
{% IF opinion_pages_list.CURRENT %}
<b>{opinion_pages_list.PAGE}</b>
{% ELSE %}
<a href="{GOODS_OPINION_PAGINATE_URL}&page={opinion_pages_list.PAGE}">{opinion_pages_list.PAGE}</a>
{% ENDIF %}
{% ENDFOR %}
</div>
{% ENDIF %}
</td>
</tr>
</thead>
<!-- END Верхняя навигация (Фильтры и страницы) -->
<!-- Если отзывов по товару не было с учетом фильтра по настроению отзыва -->
{% IF opinion_list_empty %}
<tbody>
<tr>
<td colspan="2">
<div class="goodsDataOpinionMessage empty">
{% IF GOODS_OPINION_GENERALLY_IS_GOOD=1 %}
Положительных
{% ELSEIF GOODS_OPINION_GENERALLY_IS_GOOD=0 %}
Отрицательных
{% ENDIF %}
отзывов пока не было. Вы можете <a href="#goodsDataOpinionAdd" class="jsAction goodsDataOpinionShowAddForm">оставить его первым</a>
</div>
</td>
</tr>
</tbody>
<!-- Если отзывы по товару уже есть, покажем их список -->
{% ELSE %}
<!-- Список отзывов о товарах -->
<tbody>
<tr>
<td colspan="2">
<table class="goodsDataOpinionListTable">
<tbody>
{% FOR opinion_list %}
<tr class="{% IF opinion_list.GENERALLY_IS_GOOD %}good{% ELSE %}bad{% ENDIF %}">
<td class="ceil1">
<span class="goodsDataOpinionListTableClient {% IF opinion_list.CLIENT_ID %}auth{% ENDIF %}">{opinion_list.NAME}</span>
<span class="goodsDataOpinionListTableDate">{opinion_list.DATE}</span>
{% IF opinion_list.DELETE_URL %}
<a href="{opinion_list.DELETE_URL}">Удалить</a>
{% ENDIF %}
</td>
<td class="ceil2">
{% IF opinion_list.TITLE %}<strong class="valignMiddle">{opinion_list.TITLE}</strong>{% ENDIF %}
{% IF opinion_list.RATING %}<img class="valignMiddle" src="{FORALL_IMAGES_PATH}stars/{opinion_list.RATING}.gif" alt="{opinion_list.RATING}"/>{% ENDIF %}<br />
{% IF opinion_list.ACCOMPLISHMENTS %}<strong>Достоинства:</strong> {opinion_list.ACCOMPLISHMENTS | nl2br}<br />{% ENDIF %}
{% IF opinion_list.LIMITATIONS %}<strong>Недостатки:</strong> {opinion_list.LIMITATIONS | nl2br}<br />{% ENDIF %}
{% IF opinion_list.COMMENT %}<strong>Комментарий:</strong> {opinion_list.COMMENT | nl2br}<br />{% ENDIF %}
{% IF opinion_list.ANSWER %}
<div class="goodsDataOpinionListTableAnswer">
{opinion_list.ANSWER | nl2br}<br />
</div>
{% ENDIF %}
</td>
</tr>
{% ENDFOR %}
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- END Список отзывов о товаре -->
<!-- Нижняя навигация (страницы) -->
<tfoot>
<tr class="goodsDataOpinionListNavigateBottom">
<td colspan="2">
<!-- Страницы отзывов -->
{% IF opinion_show_pages %}
<div class="square_pages">
<span>Страницы: </span>
{% FOR opinion_pages_list %}
{% IF opinion_pages_list.CURRENT %}
<b>{opinion_pages_list.PAGE}</b>
{% ELSE %}
<a href="{GOODS_OPINION_PAGINATE_URL}&page={opinion_pages_list.PAGE}">{opinion_pages_list.PAGE}</a>
{% ENDIF %}
{% ENDFOR %}
</div>
{% ENDIF %}
</td>
</tr>
</tfoot>
<!-- END Нижняя навигация (страницы) -->
{% ENDIF %}
</table>
{% ENDIF %}
<!-- END Если по товару есть хотя бы один отзыв -->
......
</div>
</div>
</section>
</div>
<!-- END Блок описания товара. Показываем его есть описание товара -->
3 сделать саму рамку вкладок больше, а то описание не вмещается, и если можно сделать прокрутку.
а так же всю рамку сместить немного влево , что бы все ровненько сделать.
Заранее спасибо.
#2
Отправлено 16 Август 2013 - 04:37
.tabs input#tab-2 { left: 120px; }
и замените на
.tabs input#tab-2 { left: 120px; width: 250px; }
далее найдите
.tab-label-2 { z-index: 3; }
и замените на
.tab-label-2 { width: 150px !important; z-index: 3; }
далее найдите
.tabs input#tab-3 { left: 240px; }
и замените на
.tabs input#tab-3 { left: 370px; width: 220px; }
далее найдите
.tab-label-3 { z-index: 2; }
и замените на
.tab-label-3 { width: 120px !important; z-index: 2; }
далее добавьте
.tabs input#tab-4 { left: 590px; width: 160px; } .tab-label-4 { width: 60px !important; z-index: 2; }
далее в шаблоне найдите
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3" style="font-size: 12px; padding: 0px 50px;">Сопутствующие товары</label>
и ниже добавьте
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4" style="font-size: 12px; padding: 0px 50px;">Отзывы</label>
#3
Отправлено 16 Август 2013 - 17:09
А вот вкладка "отзывы" появилась, но она пуста. помогите пожалуйста.
Впринципи она была прописана вот так
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3" style="font-size: 12px; padding: 0px 50px;">Сопутствующие товары</label>
{% IFNOT TARIFF_FEATURE_GOODS_OPINION %}
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">Отзывы</label>
{%ENDIF%}
вместо нее вставила ваш код она все равно не появлялась, появилась только когда сделала так
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">Отзывы</label>
{% IFNOT TARIFF_FEATURE_GOODS_OPINION %}
{%ENDIF%}
но кажись это не правильный выход.
а еще когда наводишь на вкладку отзывы стрелка не меняется на курсор
#4
Отправлено 17 Август 2013 - 03:20
.content div { opacity: 0; padding: 10px 40px; position: absolute; top: 0; transition: all 0.3s linear 0s; width: 100%; z-index: 1; }
и замените на
.content > div { opacity: 0; padding: 10px 40px; position: absolute; top: 0; transition: all 0.3s linear 0s; width: 100%; z-index: 1; }
Цитата
Выше модератор вам предложил добавить стиль
.tabs input#tab-4 { left: 590px; width: 160px; }
вместо данного стиля у вас вставлен
.tabs input#tab-4 { left: 490px; width: 160px; }
измените свойство left в вашем стиле на 590px.
#6
Отправлено 17 Август 2013 - 13:26
Doroti (17 Август 2013 - 09:04) писал:
Найдите код в шаблоне Товар -
{% IFNOT CLIENT_IS_LOGIN %} <thead> <tr> <td colspan="2"> <div class="goodsDataOpinionMessage auth">Ваши знания будут оценены посетителями сайта, если Вы <a href="{USER_LOGIN_URL}">авторизируетесь</a> перед написанием отзыва.</div> </td> </tr> </thead> {% ENDIF %}и удалите его
#7
Отправлено 17 Август 2013 - 13:41
#8
Отправлено 18 Август 2013 - 08:28
Doroti (17 Август 2013 - 13:41) писал:
Найдите код в main.css -
.goodsDataOpinionAddTable tbody input { vertical-align: middle; padding: 0.3em; width: 420px; }и замените на -
.goodsDataOpinionAddTable tbody input { vertical-align: middle; padding: 0.3em; width: 420px; position: relative; height: auto; opacity: 8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)"; filter: alpha(opacity=8); }
Найдите код -
.goodsDataOpinionAddTable tbody label { white-space: nowrap; font-size: 1.3em; font-weight: normal; vertical-align: middle; }и замените на -
.goodsDataOpinionAddTable tbody label { white-space: nowrap; font-size: 1.3em; font-weight: normal; vertical-align: middle; width: 166px; }
В конец main.css добавьте код -
.generally input{display:none;}
#10
Отправлено 19 Август 2013 - 07:25
Doroti (18 Август 2013 - 11:30) писал:
Добавьте в конец main.css код -
.goodsDataOpinionAddTable tfoot input{position:relative;opacity:8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=8)"; filter: alpha(opacity=8);width:auto;}
Можно отзывы вернуть в прежнее состояние(с прежними стилями), до подключения табов.
#11
Отправлено 19 Август 2013 - 19:34
помогите сделать во вкладке форму отзывов о товаре как на предыдущей картинки.
или хотя бы где. пыталась,меняла, но итог тот же, форма в ужасном состоянии
#12
Отправлено 20 Август 2013 - 08:15
Doroti (19 Август 2013 - 19:34) писал:
помогите сделать во вкладке форму отзывов о товаре как на предыдущей картинки.
или хотя бы где. пыталась,меняла, но итог тот же, форма в ужасном состоянии
Сейчас форма для добавления отзыва выглядит так -
Как я понимаю - Вы хотите ее изменить?
#14
Отправлено 21 Август 2013 - 05:13
#15
Отправлено 22 Август 2013 - 11:13
только осталось 2 недочета.
чуть опустить "Достоинства" т к чуть звездочки от оценки не влазиют
и в "В целом ваш отдых" нет выбора , просто надписи "положительный" "отрицательный"
и еще чу чуть, можно сделать, чтобы когда уже есть отзывы, во вкладке " отзывы" было количество оставленных отзывов.
#16
Отправлено 23 Август 2013 - 02:49
#goods_opinion_accomplishments{ margin-top:10px; }2.Сайт - Редактор шаблонов - main.css - найдите:
.goodsDataOpinionAddTable tbody input { vertical-align: middle; padding: 0.8em; width: 398px; position: relative; height: auto; opacity: 8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)"; filter: alpha(opacity=8); }замените на:
.goodsDataOpinionAddTable tbody input { vertical-align: middle; padding: 0.8em; position: relative; height: auto; display: inline-block; opacity: 8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)"; filter: alpha(opacity=8); }3. Сайт - Редактор шаблонов - Товар - найдите вкладку "Отзывы" и рядом с данной надписью вставьте:
({GOODS_OPINION_RATING_CNT_ALL})
#17
Отправлено 23 Август 2013 - 10:27
Подскажите пожалуйста,еще кое что. что сделать, когда уже есть какой то отзыв, то форма уходит вниз, и видна не полностью?
может как то прокрутку сделать?) невозможно же каждый раз увеличивать размер формы.
#18
Отправлено 24 Август 2013 - 02:53
.content { background: none repeat scroll 0 0 #FFFFFF; border-radius: 0 3px 3px 3px; box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1); height: 770px; overflow: hidden; position: relative; width: 100%; z-index: 5; }
и замените на
.content { background: none repeat scroll 0 0 #FFFFFF; border-radius: 0 3px 3px 3px; box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1); height: 770px; overflow-x: hidden; overflow-y: scroll; position: relative; width: 100%; z-index: 5; }
#19
Отправлено 24 Август 2013 - 09:18
#20
Отправлено 05 Февраль 2014 - 13:02
Сообщение отредактировал Flor@@: 05 Февраль 2014 - 13:45
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных