1С-Битрикс Разработчикам

Пользователь 79048 Заглянувший Сообщений: 21 Баллов: 1 Регистрация: 18.12.2010	#11 0 27.12.2010 22:27:22 div.catalog-top и div.catalog-item-card попробывал с display: inline-block - чет не получилось

Пользователь 2854

Гуру

Сообщений: 2529 Баллов: 448 Регистрация: 29.11.2005

#12

27.12.2010 22:43:19

Цитата
Сергей Ермаков пишет: чет не получилось

Значит не так пробовали

Пользователь 78284

Посетитель

Сообщений: 62 Баллов: 9 Регистрация: 10.12.2010

#13

28.12.2010 00:17:56

что то я не пойму в чем проблема...
товары выводятся циклом. так ? так. каждый вывод такого цикла заключаешь в див и ставишь флоат лефт. а див обрамляющий поле вывода - тот который растягивается ему min-width: 1024рх max-width: 4000рх.
следовательно -> у тебя левый край каждого дива с товаром обтекаем, при растягивании товары буду вылезать на первую стручку, а при сжатии сползать в низ , пока не будет достигнут минимум по ширине.

Пользователь 2854

Гуру

Сообщений: 2529 Баллов: 448 Регистрация: 29.11.2005

#14

28.12.2010 01:33:58

Цитата
Павел Корнилов пишет: при растягивании товары буду вылезать на первую стручку, а при сжатии сползать в низ

Это если высота блока товара одинаковая, в противном случае вы получите лесенку вместо строк

Пользователь 78284

Посетитель

Сообщений: 62 Баллов: 9 Регистрация: 10.12.2010

#15

28.12.2010 11:06:53

Цитата

Sergey Leshchenko пишет:

Цитата
Павел Корнилов пишет: при растягивании товары буду вылезать на первую стручку, а при сжатии сползать в низ

Это если высота блока товара одинаковая, в противном случае вы получите лесенку вместо строк

мы же циклом выводим => всё фиксированно. никакой лесенки

Пользователь 2854

Гуру

Сообщений: 2529 Баллов: 448 Регистрация: 29.11.2005

#16

28.12.2010 18:12:30

Цитата
Павел Корнилов пишет: мы же циклом выводим => всё фиксированно. никакой лесенки

Каким образом цикл влияет на высоту дива для элемента? Если вы сделаете только float:left и высота при этом будет плавающая (а она часто такой бывает), то скорее всего получите вывод элементов лесенкой, а не линией.

Вот пример лесенки
<div style="width:130px;">
<div style="width:50px; margin:5px; float:left; background:red;">1111 1111 1111</div>
<div style="width:50px; margin:5px; float:left; background:yellow;">222 222</div>
<div style="width:50px; margin:5px; float:left; background:green;">333</div>
</div>
Зеленый блок должен быть под красным блоком, а не справа от него:

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

float.gif (744 Б)

Пользователь 79048

Заглянувший

Сообщений: 21 Баллов: 1 Регистрация: 18.12.2010

#17

28.12.2010 18:15:01

Большое спасибо за помощь Алексею Косоротову!
Сейчас подробно расскажу как добились диномического вывода!
Разметка

Код

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
IncludeTemplateLangFile(__FILE__);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?=LANGUAGE_ID?>" lang="<?=LANGUAGE_ID?>">
<head>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/jquery-1.4.2.min.js"></script>
<?$APPLICATION->ShowHead();?>
<div id="panel"><?$APPLICATION->ShowPanel();?></div>
<?$APPLICATION->ShowHead();?>

</head>



<body><div class="wor">#WORK_AREA#
<script type="text/javascript">

$(document).ready(function(){
   
   $('a[href^="http://"]')   .attr({ target: "_blank" });

   function smartColumns() {
      
      $("ul.column").css({ 'width' : "100%"});
      
      var colWrap = $("ul.column").width();
      var colNum = Math.floor(colWrap / 200);
      var colFixed = Math.floor(colWrap / colNum);
      
      
      $("ul.column").css({ 'width' : colWrap});
      $("ul.column li").css({ 'width' : colFixed});

      
      
   }   
   
   smartColumns();   

   $(window).resize(function () {
      smartColumns();
      
   }); 
   
      
});
   
</script>
</div>
</div>

</body> 


</html>

Стили шаблона

Код

body{
background-color: #242325;
}

div.wor{
height:auto;
}
div.tovar{
width:auto;
margin-left: 10%; 
margin-right: 10%;
background-color: #fff;
}
ul.column{
  width: 100%;
  padding: 0;
  margin: 10px 0;
  list-style: none;
}
ul.column li {
  float: left;
  width: 200px; /* ширина колонки по умолчанию */
  padding: 0;
  margin: 5px 0;
  display: inline;
}
.block {
  height: 200px;
  font-size: 1em;
  margin-right: 10px; /* отступ между колонками */
  padding: 20px;
  background: #fff;
}
.block h2 {
  font-size: 1.8em;
}
.block786786786876786 img {
  /* параметры для изображений с меняющимися размерами и бордюром */
  width: 89%; /* убираем 1% от ширины, чтобы предотвратить баг в IE6 */
  padding: 5%;
  background:#fff;
  margin: 0 auto;
  display: block;
  -ms-interpolation-mode: bicubic; /* предотвращение пикселизации изображений в IE 6/7 */
}

Переходим к сайту нажимаем режим правки Top элементов каталога по параметру (bitrix:store.catalog.top)/Редактировать шаблон компонента!Создаем новый!
В появившемся окне выделяем и удаляем все и вставляем вот этот код!

Код

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="catalog-top">

<ul class="column">

<?
foreach($arResult["ROWS"] as $arItems):
?>




    <div class="catalog-item-cards">
 
<?
    foreach($arItems as $key => $arElement):
        if ($key > 0):
?>
            
<?
        endif;
        if(is_array($arElement)):
            $bPicture = is_array($arElement["PREVIEW_IMG"]);
?>
            <li>
    <div class="block">
                <div class="catalog-item-card<?=$bPicture ? '' : ' no-picture-mode'?>">
<?
            if ($bPicture):
?>


                    <div class="item-image">
                        <a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><img border="0" src="<?=$arElement["PREVIEW_IMG"]["SRC"]?>" width="<?=$arElement["PREVIEW_IMG"]["WIDTH"]?>" height="<?=$arElement["PREVIEW_IMG"]["HEIGHT"]?>" alt="<?=$arElement["NAME"]?>" title="<?=$arElement["NAME"]?>" id="catalog_list_image_<?=$arElement['ID']?>" /></a>
                    </div>
<?
            endif;
?>
                    <div class="item-info">
                        <p class="item-title">
                            <a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><?=$arElement["NAME"]?></a>
                        </p>
                        <p class="item-desc">
<?
            foreach($arElement["DISPLAY_PROPERTIES"] as $pid=>$arProperty):
?>
                            <small><?=$arProperty["NAME"]?>:&nbsp;<?
                if(is_array($arProperty["DISPLAY_VALUE"]))
                    echo implode("&nbsp;/&nbsp;", $arProperty["DISPLAY_VALUE"]);
                else
                    echo $arProperty["DISPLAY_VALUE"];
?></small><br />
<?
            endforeach;
?>
                            <?=strip_tags($arElement["PREVIEW_TEXT"]);?>
                            <span class="item-desc-overlay"></span>
                        </p>
<?
            if(count($arElement["PRICES"])>0):
                foreach($arElement["PRICES"] as $code=>$arPrice):
                    if($arPrice["CAN_ACCESS"]):
?>
                        <p class="item-price">
<?
                        if($arPrice["DISCOUNT_VALUE"] < $arPrice["VALUE"]):
?>
                            <span><?=$arPrice["PRINT_DISCOUNT_VALUE"]?></span> <s><?=$arPrice["PRINT_VALUE"]?></s> 
<?
                        else:
?>
                            <span><?=$arPrice["PRINT_VALUE"]?></span>
<?
                        endif;
?>
                        </p>
<?
                    endif;
                endforeach;
            endif;
?>
                    </div>
                </div>
            </div>
  </li>
<?
        else:
?>
            
<?
        endif;
?>
<?
    endforeach;
?>
       

           
<?
    endforeach;
?>
        
    </div>


</ul>

</div>

Пользователь 2854

Гуру

Сообщений: 2529 Баллов: 448 Регистрация: 29.11.2005

#18

28.12.2010 18:16:11

А вот пример с display:inline-block;

<div style="width:130px; margin:10px 0;">
<div style="width:50px; margin:5px; display:inline-block; vertical-align:top; background:red;">1111 1111 1111</div><div style="width:50px; margin:5px; display:inline-block; vertical-align:top; background:yellow;">222 222</div><div style="width:50px; margin:5px; display:inline-block; vertical-align:top; background:green;">333</div>
</div>
В данном примере важно не делать пробелов и переводов строк после каждого дива

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

inline-block.gif (760 Б)

Пользователь 78284

Посетитель

Сообщений: 62 Баллов: 9 Регистрация: 10.12.2010

#19

29.12.2010 15:04:22

Цитата

Sergey Leshchenko пишет:

Цитата
Павел Корнилов пишет: мы же циклом выводим => всё фиксированно. никакой лесенки

Каким образом цикл влияет на высоту дива для элемента? Если вы сделаете только float:left и высота при этом будет плавающая (а она часто такой бывает), то скорее всего получите вывод элементов лесенкой, а не линией.

Вот пример лесенки

<div style="width:130px;">

<div style="width:50px; margin:5px; float:left; background:red;">1111 1111 1111</div>

<div style="width:50px; margin:5px; float:left; background:yellow;">222 222</div>

<div style="width:50px; margin:5px; float:left; background:green;">333</div>

</div>

Зеленый блок должен быть под красным блоком, а не справа от него:

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

Пользователь 2854

Гуру

Сообщений: 2529 Баллов: 448 Регистрация: 29.11.2005

#20

30.12.2010 18:56:22

Цитата
Павел Корнилов пишет: каждый выводимый товар имеет ещё и свойство height . если его не будет то будет хаос.

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

Форум

Центр поддержки

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером