[Помогите] Выровнять отображение модуля Стена категорий 1.1

Тема в разделе "OpenCart", создана пользователем MGT1, 14 янв 2014.

  1. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    900
    Симпатии:
    218
    По сути все просто, но правления формату заменить "left" - "center" не помогают.
    Сам сайт


    Нужно выровнять модуль витрина, что бы категории отображались по-середине.

    Пример того что нужно исправить.
     
    Последнее редактирование: 14 янв 2014
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Подсказал бы точно строки, но у вас стили склеены в один файл, так что вот:

    HTML:
    .box-homepagecategorywall{
    text-align: center;
    }
    
    .box-homepagecategorywall .homepagecategorywall{
    float:none;
    }
    Изначально во втором правиле float:left, потому выравнивание по центру и не работает.
     
  3. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    900
    Симпатии:
    218
    .box-content-home {
    margin-bottom: 20px;
    overflow: hidden;
    padding-top: 10px;
    background: #FFFFFF;
    }
    .box-homepagecategorywall {
    margin-left: 0px;
    }
    .box-homepagecategorywall .homepagecategorywall {
    display: inline-block;
    float: left;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
    vertical-align: top;
    text-align: left;
    width: 190px;
    height: 270px;
    }
    .box-homepagecategorywall img {
    padding: 3px;
    border: 1px solid #E7E7E7;
    }
    .box-homepagecategorywall h3 {
    text-align:left;
    margin: 0;
    }
    .box-homepagecategorywall h3 a {

    color: ##38B0E3;
    text-decoration: none;
    }
    .box-homepagecategorywall ul {
    list-style: none;
    margin: 0px;
    padding: 0;
    text-align: left;

    }
    .box-homepagecategorywall ul li {
    padding-top: 2px;
    }
    .box-homepagecategorywall ul a {
    text-decoration: none;
    color: ##38B0E3;
    }
    .box-homepagecategorywall .active {
    text-decoration: underline;
    }
    .box-homepagecategorywall ul a:hover {
    text-decoration: underline;
    }
    .box-homepagecategorywall > ul > li {
    float: left;
    padding: 8px 28px 8px 0px;
    }
    .box-homepagecategorywall > ul > li + li {

    }
    .box-homepagecategorywall > ul > li > a {
    text-decoration: none;
    color: #333;
    }
    .box-homepagecategorywall > ul > li ul {
    display: block;
    }
    .box-homepagecategorywall > ul > li a.active {
    font-weight: bold;
    font-size:12px;
    }
    .box-homepagecategorywall > ul > li a.active + ul {
    display: block;
    }
    .box-homepagecategorywall > ul > li ul > li {
    padding: 5px 5px 0px 10px;
    }
    .box-homepagecategorywall > ul > li ul > li > a {
    text-decoration: none;
    display: block;
    }
    .box-homepagecategorywall > ul > li ul > li > a.active {
    font-weight: bold;
    }
    .box-homepagecategorywall > ul > li ul > li ul > li a.active {
    font-weight: bold;
    color: #06bcc3;
    }
    .box-homepagecategorywall > ul > li ul > li ul > li a.active + ul {
    display: block;
    }

    .cover .homepagecategorywall {
    text-align: left;
    width: 190px;
    height: 210px;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
    }

    .cover {

    }

    .cover img {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    }
    .cover ul{

    }

    .cover .homepagecategorywall {

    }


    .caption {
    margin-top: 3px;
    float: left;
    position: absolute;
    height: 200px;
    width: 165px;
    margin-left: 3px;
    padding: 5px;
    }

    .caption ul {
    padding:10px;
    width: 155px;
    }

    .caption h3{
    margin-left:5px;
    margin-top:5px;
    }

    .caption ul a{
    color:white;
    }

    .semigrey {
    background:#222;
    opacity: .9;
    filter: progid:Biggrin:XImageTransform.Microsoft.Alpha(Opacity=90);
    }

    ________________________________________________________________________________
    если я правильно понял - меняю в 3-й части float "left" на "none", text-align: left; - на center. (файл homepagecategorywall.css)
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    float можно просто удалить, а text-align: center нужно дописать в блок выше (.box-homepagecategorywall). Вам ведь нужно блоки категорий отцентровать, а не текст в них?
     
    MGT1 нравится это.
  5. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    900
    Симпатии:
    218
    Да - мне нужно отцентровать цельный блок, а текст что бы оставался по левому краю блока.

    Прописал так
    .box-content-home {
    margin-bottom: 20px;
    overflow: hidden;
    padding-top: 10px;
    background: #FFFFFF;
    }
    .box-homepagecategorywall {
    margin-left: 0px;
    text-align: center;
    }
    .box-homepagecategorywall .homepagecategorywall {
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
    vertical-align: top;
    text-align: left;
    width: 190px;
    height: 270px;
    }
    _____________________________________________________________

    :furious:Вроде получилось, но возник новый вопрос - вторая строка категорий, принявшая правило, также разместилась по-центру. Как вариант - сделать одинаковое количество категорий, но это не подойдет.

    Подскажите, реально ли сделать, что бы осталось так же по-центру, но начиналось с левого края. Или это типа абра-кадабра?
    Может как вариант выставить бордера в процентном соотношении?
     
    Lasted edited by : 14 янв 2014
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Обычно в таких случаях при выводе блоков проверяют их номер и добавляют отдельный класс, который позволяет сделать подобное.
    Если нужно просто сделать равномерные отступы по краям, можно действительно ничего не центровать, а вручную выровнять содержимое через паддинг контейнера, например.
     
  7. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    900
    Симпатии:
    218
    Ну получилось так

    Правильно, или еще что-то нужно дописать?
     
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Если выглядит, как вы хотели, значит правильно:

    Кстати, для нулевых значений не обязательно указывать единицы измерения. Я про:
    Код:
    margin-left: 0px;
     
    MGT1 нравится это.