[Помогите] Как выровнять опции в карточке товара

Krasovskiy · 9 фев 2014

Ситуация следующая. Имеется такая карточка товара

Хочу выровнять опции по, например, "колонке" цены или количества. как такое реализовать? В stylesheet.css не нашел, может быть в jquery? Как?

iga · 9 фев 2014

Можно попробовать загнать всё это в html табличку и там уже выравнивать по ячейкам.

nick885 · 9 фев 2014

Krasovskiy сказал(а): ↑

Ситуация следующая. Имеется такая карточка товара

Хочу выровнять опции по, например, "колонке" цены или количества. как такое реализовать? В stylesheet.css не нашел, может быть в jquery? Как?
Нажмите, чтобы раскрыть...

Посмторите firebug'ом какой стиль отвечает за вывод или скиньте сюда адрес сайта.

AnOcToJI · 9 фев 2014

iga сказал(а): ↑

Можно попробовать загнать всё это в html табличку и там уже выравнивать по ячейкам.
Нажмите, чтобы раскрыть...

никогда в жизни такое не советуй больше, НИКОГДА! за такую вёрстку сжигать надо...

Krasovskiy · 9 фев 2014

nick885 сказал(а): ↑

Посмторите firebug'ом какой стиль отвечает за вывод или скиньте сюда адрес сайта.
Нажмите, чтобы раскрыть...

Спойлер

Вот

KEH · 9 фев 2014

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

iga · 9 фев 2014

AnOcToJI сказал(а): ↑

никогда в жизни такое не советуй больше, НИКОГДА! за такую вёрстку сжигать надо...
Нажмите, чтобы раскрыть...

Я думаю что в некоторых случаях и в малых дозах таблицы имеют право на жизнь.
Про существование таблицехэйторов тоже знаю
ну дак отвлеклись от темы...

alex_storm · 9 фев 2014

Для всех div, которые находятся в .options присваеваете table-cell. для первого div выставляете минимальную ширину и все будет ок. Я уже помогал кому то с форума с аналогичной темой.

Krasovskiy · 9 фев 2014

KEH сказал(а): ↑

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

Опции с кнопкой "Купить" для каждой опции и артикулом

--- Добавлено, 9 фев 2014 ---

alex_storm сказал(а): ↑

Для всех div, которые находятся в .options присваеваете table-cell. для первого div выставляете минимальную ширину и все будет ок. Я уже помогал кому то с форума с аналогичной темой.
Нажмите, чтобы раскрыть...

Сделал, как Вы посоветовали - все стили послетали

Спойлер

Вот кусок кода, куда вставлял
Спойлер
Код:
<div class="options">
        <?php foreach ($options as $option) { ?>
        <?php if ($option['type'] == 'select') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
            <?php foreach ($option['option_value'] as $option_value) { ?>
            <div class="box_item_option">
            <span class="name_option" style="font-size:20px; color:#0084FF; display: table-cell; min-width: 10px;"><?php echo $option_value['name']; ?></span>
            <span class="space" style="font-size:20px; color:#0084FF; display: table-cell;"> - </span>
            <span class="price_option" style="font-size:20px; color:#FF0505; display: table-cell;"><?php if ($option_value['price']) { ?>
            <?php echo $option_value['price']; ?>
            <?php } ?></span>
            <span class="quantity">
            <span class="quantity_<?php echo $option_value['product_option_value_id']; ?>">
            <input type="text" name="quantity" size="2" value="1" />
            </span>
            <?php if ($option_value['quantity'] > 0) { ?>
            <a onclick="buy_in_product(<?php echo $option['product_option_id']; ?>, <?php echo $option_value['product_option_value_id']; ?>); return false;" class="button" title="Добавить в корзину"><span><?php echo $button_cart; ?></span></a>
            <?php } else { ?>
            <a class="outstock_option" title="Нет в наличии"><span style="font-size:20px; color:#0084FF; display: table-cell;">Нет в наличии</span></a>
            <?php } ?>
            <?php if ($option_value['model_option']) { ?>
            <span style="font-size:20px; color:#0084FF; display: table-cell;">В упаковке </span> <span class="model_option" style="font-size:20px; color:#0084FF;"><?php echo $option_value['model_option']; ?></span>
            <?php } ?>
            </div>
            <?php } ?>
            <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" />
          <input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />      
        </div>
        <?php } ?>
        <?php } ?>
      </div>
Что я делаю не так?

alex_storm · 10 фев 2014

Есть ссылка на сайт?

Krasovskiy · 10 фев 2014

alex_storm сказал(а): ↑

Есть ссылка на сайт?
Нажмите, чтобы раскрыть...

Вот ссылка на сайт

alex_storm · 10 фев 2014

.options > .box_item_option > .name_option, .options > .box_item_option > .space, .options > .box_item_option > .price_option, .options > .box_item_option > .price_option, .options > .box_item_option > .quantity{display:table-cell;}
.options > .box_item_option > .name_option{min-width:55px;}
.options > .box_item_option > .price_option{padding-left:10px;}

edu · 13 фев 2014

alex_storm сказал(а): ↑

.options > .box_item_option > .name_option, .options > .box_item_option > .space, .options > .box_item_option > .price_option, .options > .box_item_option > .price_option, .options > .box_item_option > .quantity{display:table-cell;}
.options > .box_item_option > .name_option{min-width:55px;}
.options > .box_item_option > .price_option{padding-left:10px;}
Нажмите, чтобы раскрыть...

Проще всего наверно перебить все span на p задать свойство
.box_item_option p {
float: left;
}
и
.price_option {
width: 103px ;
}
задать определенную ширину чтобы отступ был одинаковый от цены

alex_storm · 13 фев 2014

edu сказал(а): ↑

Проще всего наверно перебить все span на p задать свойство
.box_item_option p {
float: left;
}
и
.price_option {
width: 103px ;
}
задать определенную ширину чтобы отступ был одинаковый от цены
Нажмите, чтобы раскрыть...

нет

Krasovskiy · 13 фев 2014

edu сказал(а): ↑

Проще всего наверно перебить все span на p задать свойство
.box_item_option p {
float: left;
}
и
.price_option {
width: 103px ;
}
задать определенную ширину чтобы отступ был одинаковый от цены
Нажмите, чтобы раскрыть...

Так не получается- теперь все выравнивается по правой стороне. А код, который alex_storm написал, куда не вставлял - не помогает. Ничего не происходит. Может не туда вставлял.

alex_storm · 13 фев 2014

Я в шоке Как не помогает???
stylesheet.css в самый конец.

Войти или зарегистрироваться

[Помогите] Как выровнять опции в карточке товара

Krasovskiy

iga

nick885

AnOcToJI

Krasovskiy

KEH

iga

alex_storm webdev

Krasovskiy

alex_storm webdev

Krasovskiy

alex_storm webdev

edu

alex_storm webdev

Krasovskiy

alex_storm webdev