Расположение опции-изображения

[sdld]

Добрый день, великие умы ОС :) Помогите привести расположение опций-изображений из вида

в вид Убиваю таблицу в product.tpl - становится в строку и все бы ничего но все кособокое, изображение слева, тыркалка и текст справа внизу за киломентр от изображения... При любом объединении в таблицу начинается выстраивание в вертикаль.. а без таблици ровного отображения достичь не получается...

[sdld]

с утра самого завис на этом моменту уже завою скоро =\ в css добавил float блоку option-image где-то выровнялось в линию, но большая часть поывадавливала соседние опции и перекосило все=\

[sdld]

CSS:

.product-info .option-image {
border: 1px solid #d0e3ee;
    padding: 0px;
cursor: pointer;
}
.product-info .option-image label {
display: block;
width: 100%;
height: 100%;
margin-left: 5px;
}
.product-info .option-image img {
margin-right: 5px;
margin-bottom: -15px;

product.tpl

	    <?php if ($option['type'] == 'image') { ?>
	    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
		  <div align="center"><?php if ($option['required']) { ?>
		  <span class="required">*</span>
		  <?php } ?>
		  <b><?php echo $option['name']; ?>:</b></div><br />
			  <?php
		  $i = 0;
		  $len = count($option['option_value']);
		  foreach ($option['option_value'] as $option_value) {
		   if ($i == 0) {?>
    <div class="option-image">
    <table>
    <tr>
    <td colspan="2" rowspan="1" align="center">
    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" checked/></td>
    <td>
			    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
				    <?php if ($option_value['price']) { ?>
				    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
				    <?php } ?>
				  </label></td>
	  </tr>
	  </table>
	  </div>
	  <br />
			  <?php } else { ?>
	 <div class="option-image">
    <table>
    <tr>
    <td colspan="2" rowspan="1" align="center">
    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
    <td>
			    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
				    <?php if ($option_value['price']) { ?>
				    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
				    <?php } ?>
				  </label></td>
	  </tr>
	  </table>
	  </div>
	  </br>
	 <?php }
				  $i++;
		  }?>
	    </div>
	    <br />

Где копать подскажите пожалуйста

[Гість]

что то в это роде должно быть

.product-info .option-image {

border: 1px solid #d0e3ee;

padding: 0px;

cursor: pointer;

overflow: auto;

}

.product-info .option-image label {

display: block;

width: 50px;

margin-left: 5px;

float:left;

}

.product-info .option-image img {

margin-right: 5px;

margin-bottom: -15px;

лучьше дать ссылку

[sv2109]

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

[sdld]

http://shop.fosografia.ru/stickers/saimon/scbenzohide

Спасибо друзья! сейчас попробую!

[Гість]

.product-info .options {overflow: auto;}

.product-info .option-image {

border: 1px solid #d0e3ee;

padding: 0px;

cursor: pointer;

width: 50px;

float:left;

}

так попробуй

[sdld]

что то в это роде должно быть

.product-info .option-image {

border: 1px solid #d0e3ee;

padding: 0px;

cursor: pointer;

overflow: auto;

}

.product-info .option-image label {

display: block;

width: 50px;

margin-left: 5px;

float:left;

}

.product-info .option-image img {

margin-right: 5px;

margin-bottom: -15px;

лучьше дать ссылку

непомогло,.. :(

[sdld]

.product-info .options {overflow: auto;}

.product-info .option-image {

border: 1px solid #d0e3ee;

padding: 0px;

cursor: pointer;

width: 50px;

float:left;

}

так попробуй

прикольная лесенка получилась, но нет )

[sv2109]

.product-info .option {

clear: both;

}

.product-info .option br {

display: none;

}

.product-info .option-image {

width: 100px;

float: left;

}

[sdld]

балин, как-то же просто должно быть... и в див объединял и в таблицу и одинхрен через жопу все =

[sdld]

.product-info .option {
  clear: both;
}
.product-info .option br {
  display: none;
}
.product-info .option-image {
  width: 100px;
  float: left;
}

К сожалению тоже не помогло :( все в кучу собралось и съехало..

[sdld]

К сожалению тоже не помогло :( все в кучу собралось и съехало..

хотя уже лучше) только отступ дики до опций появился.. и все опции в линию выстроились)

[sv2109]

можно так попробовать

.product-info .option br {
  display: none;
}
.product-info .option-image {
  width: 100px;
  float: left;
}
.product-info .option-image:last-child {
  float: none;
}

+ можно вместо .product-info .option-image указать конкретные опции через айди напр. .product-info #option-361, ...

[sdld]

Спасибо, друг! буду копаться! Очень благодарен!

[sdld]

новая потеха =\ clear: both; если не делать то все кривое, с ним получается пробел дикий сверху, если сделать очистку только в

.product-info .option-image br {

display: none;

}

а не

.product-info .option br {

display: none;

}

то все остальные опции отлично отображаются, а в имидже лесенка 1й строки..

[sdld]

+ можно вместо .product-info .option-image указать конкретные опции через айди напр. .product-info #option-361, ...

За это самое главное спасибо) это можно каждому товару свою опцию перекручивать :) Блин супер :)

[Baco]

А не проще табличное форматирование (tr,td) убрать и присвоить блоку что то типа

<div style="display:inline-block; border: 1px solid black; margin: 5px; padding: 15px; overflow:auto; text-align: center;">

[sdld]

А не проще табличное форматирование (tr,td) убрать и присвоить блоку что то типа

<div style="display:inline-block; border: 1px solid black; margin: 5px; padding: 15px; overflow:auto; text-align: center;">

этим способом получилось так =(

[Baco]

этим способом получилось так =(

А у меня вот так:

http://gun.opencart_ws/index.php?route=product/product&filter_name=ALFA%20model%20420%20(%D0%BD%D0%B8%D0%BA%D0%B5%D0%BB%D1%8C,%20%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D0%BE)&product_id=573

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

[sdld]

да уже скопировал глянул, да сортирует.. у себя стили также настроил и в див объединил с темиже параметрами.. в итоге как на скрине всеравно только + еще рамка =

[Baco]

да уже скопировал глянул, да сортирует.. у себя стили также настроил и в див объединил с темиже параметрами.. в итоге как на скрине всеравно только + еще рамка =

Ну... бордернул так, для эффекта большего, положите сюда архивчик с TPL-кой, щас если откатаю, код выложу...

[sdld]

тплка...

product.zip

[Baco]

тплка...

Ану-ка, затести...

product.zip

[sdld]

за;"№;№"""СЬ! СПАСИБО! С 8 УТРА ПАРЮСЬ!