Loading...

Изменение ширины сайта с помощью 960.gs

Мы больше не обновляем Базу Знаний. Документация по актуальным версиям CS-Cart находится по адресу http://www.cs-cart.ru/docs/latest/.

  • This article applies to CS-Cart versions:
  • 3.0.x

Начиная с версии 3, CS-Cart использует новую концепцию макета страница и новый менеджер блоков, в частности.

Краеугольным камнем нового подхода является использование CSS-фреймворка 960.gs.
Этот фреймворк предназначен для кроссбраузерного, быстрого и эффективного создания или изменения структуры контента. Он используете таблицу шириной в 960 пикселей, разделенную на 12 или 16 колонок. Мы используем 960.gs в CS-Cart, чтобы иметь возможность создать любую структуру блоков на любой странице.

Хотя 960.gs является очень гибким решением, он имеет одно существенное ограничение — фиксированную ширину страницы.

Есть возможность избежать этого, используя другой CSS файл для определения правил классов фреймворка.

Использование fluid 960.gs

Есть проект под названием fluid 960.gs, который осуществляет растягивание сайта на всю ширину экрана.

Чтобы использовать полноэкранный макет страницы от fluid 960.gs, нужно скачать файл grid.css из официального хранилища проекта, переименовать его в 960.css и заменить им файл, используемый CS-Cart по умолчанию (YOUR_SKIN_PATH/customer/css/960/960.css).

Решение проблем

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

Чтобы решить эту проблему, можно назначить ширину дочерних таблиц вручную и задать content-alignment как full-width для родительских таблиц.

Например, как это может быть сделано для стандартного заголовка CS-Cart:

html .helper-container .full-width {
    width: 100%;
}
    
html .helper-container .top-links-grid {
    width: 98.0%;
}

html .helper-container .search-block-grid {
    width:54.25%;
}
    
html .helper-container .cart-content-grid {
    width:41.75%;
}

Макеты нужного размера с фиксированной шириной в SprySoft Variable Grid System

The SprySoft Variable Grid System - это сервис, созданный SprySoft, который позволяет Вам создавать таблицы разного размера с фиксированной шириной.

Вы можете использовать файлы, созданные с помощью этого сервиса, таким же образом, как описано выше для
fluid 960.gs.

Home / База Знаний CS-Cart / Внешний вид (дизайн) / Изменение ширины сайта с помощью 960.gs