Выравнивание Динамических Вкладок

Здравствуйте, сделала динамические вкладки. И появилось пару проблем

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 сделать саму рамку вкладок больше, а то описание не вмещается, и если можно сделать прокрутку.
а так же всю рамку сместить немного влево , что бы все ровненько сделать.

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

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

.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>

Все сделала, все стало на свои места. спасибо
А вот вкладка "отзывы" появилась, но она пуста.  помогите пожалуйста.
Впринципи она была прописана вот так

  <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%}

но кажись это не правильный выход.
а еще когда наводишь на вкладку отзывы стрелка не меняется на курсор

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

.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.

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

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 %}

и удалите его

спасибо) а что же делать со свей остальной бякой?

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;}

она выровнялась, но кнопка отправить/отменить не появились.  а можно как то форму по проще например как

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;}

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

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

Doroti (19 Август 2013 - 19:34) писал:

Сейчас форма для добавления отзыва выглядит так -
Как я понимаю - Вы хотите ее изменить?

да, все правильно. хотелось бы что попроще, может как на картинке

Замените содержимое вашего файла стилей style2.css на следующий код

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

и еще чу чуть, можно сделать, чтобы когда уже есть отзывы, во вкладке " отзывы" было количество оставленных отзывов.

1. Сайт - Редактор шаблонов - main.css - в самом низу пропишите:

#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})

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

Найдите в файле стилей style2.css

.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;
}

все получилось, спасибо вам большое

как уменьшить в карточке товара размер отображаемых сопутствующих товаров????? чтобы их картинки стали бы в два раза меньше по размеру????

Сообщение отредактировал Flor@@: 05 Февраль 2014 - 13:45