Подскажите как выровнять CSS

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

  1. psyflora

    psyflora

    Регистрация:
    28 июн 2014
    Сообщения:
    8
    Симпатии:
    1
    Помогите выровнять похожие товары
    http://i003.radikal.ru/1412/dd/e012399ac82d.jpg

    Вот код из style.css что в нем изменить для выравнивания?
    Код:
    /*-- RELATED PRODUCTS --*/
    
    .rlt-product-box {
        overflow: hidden;
        padding: 0 20px 20px;
        position: relative;
    }
    
    .rlt-product {
        overflow: hidden;
        position: relative;
    }
    
    .rlt-back {
        float:left;
        display: table;
        width: 199px;
        margin-top:10px;
        padding: 20px 20px;
        border-bottom:1px solid #969696;
        background: #d7d7d7;
    }
    
    .rlt-back > .image {
        position: relative;
        z-index: 1;
        overflow: hidden;
        width: 74px;
        height: 99px;
        display: block;
        float: left;
        padding: 10px;
        background: #ebebeb;
        background: -moz-linear-gradient( top, #ebebeb 0%, #f0f0f0);
        background: -webkit-gradient( linear, left top, left bottom, from(#ebebeb), to(#f0f0f0));
        border-top: 1px solid #c1c1c0;
        border-right: 1px solid #d2d2d2;
        border-bottom: 1px solid #dfdfdf;
        border-left: 1px solid #d2d2d2;
        -moz-box-shadow: 0px 1px 0px rgba(255,255,255,1), inset 0px 2px 5px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,1), inset 0px 2px 5px rgba(0,0,0,0.1);
        box-shadow: 0px 1px 0px rgba(255,255,255,1), inset 0px 2px 5px rgba(0,0,0,0.1);
    }
    
    .rlt-back + .rlt-back {
        margin-left:20px;
    }
    
    .rlt-back ul,
    .rlt-back .cart {
        display:none;
    }
    
    .rlt-back .prc-cart-con {
        display:table-cell;
        text-align:right;
        width:90px;
        position:relative;
    }
    
    .rlt-back .prc-cart-con, x:-moz-any-link, x:default {
        height:119px;
        float:right;
      
    }
    
    .rlt-back .name a {
        font-size:12px;
        color:#2c2f3e;
    }
    
    .rlt-back .prc {
        position: absolute;
        right: 0;
        top: 40px;
    }
    
    .rlt-back .price {
        font-size:16px;
        padding:10px 0;
    }
    
    .rlt-back .price-old {
        text-decoration:line-through;
        color: #000;
        font-size:12px;
        font-weight:normal;
    }
    
    .rlt-back .rating {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    .tab-content h2 {
        padding:0 0 10px 0;
    }
    
    table.attribute {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
        background-color: #f0f0f0;
        border: 1px solid #d7d7d7;
    }
    
    table.attribute thead {
        font-weight: bold;
        text-align: left;
    }
    
    table.attribute thead td {
        height: 20px;
        background: #f4f4f4;
        border-bottom: 1px solid #e1e1e1;
        -moz-box-shadow: 0px 2px 0px rgba(255,255,255,1);
        -webkit-box-shadow: 0px 2px 0px rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 0px rgba(255, 255, 255, 1);
        padding: 10px 20px;
        border-right: 1px solid #c2c2c2;
    }
    
    table.attribute td {
        padding: 10px;
        border-right: 1px solid #c2c2c2;
    }
    
    table.attribute tbody td.attribute-title {
        background-color: #e1e1e1;
        text-align: right;
        font-weight: bold;
    }
    
    table.attribute tbody td.attribute-title {
        border-bottom: 1px solid #c2c2c2;
        width: 30%;
    }
     
    Lasted edited by : 14 дек 2014
  2. ostrun

    ostrun

    Регистрация:
    7 ноя 2012
    Сообщения:
    140
    Симпатии:
    37
    Попробуйте вот здесь изменить:
    .rlt-back .name a {
    font-size:12px;
    color:#2c2f3e;
    }
    на
    .rlt-back .name a {
    font-size:12px;
    color:#2c2f3e;
    height: 50px;
    }
     
  3. psyflora

    psyflora

    Регистрация:
    28 июн 2014
    Сообщения:
    8
    Симпатии:
    1
    Неа а если именно красную линию и цену выровнять?
     
  4. ostrun

    ostrun

    Регистрация:
    7 ноя 2012
    Сообщения:
    140
    Симпатии:
    37
    вы можете им просто задать значения на какой уровень их опустить.
    вот здесь в top изменить значение
    .rlt-back .prc {
    position: absolute;
    right: 0;
    top: 40px;
    }
     
    psyflora нравится это.
  5. psyflora

    psyflora

    Регистрация:
    28 июн 2014
    Сообщения:
    8
    Симпатии:
    1
    Да помогло спасибо огромное еще бы линию красную подвинуть
     
  6. ostrun

    ostrun

    Регистрация:
    7 ноя 2012
    Сообщения:
    140
    Симпатии:
    37
    Я к сожалению не могу определить где её стиль, но вам короче надо к нему добавить тоже top: ...px; Количество отступа определите для себя сами как вам больше понравится.
    Судя по всему где-то в этих значениях надо добавить top: ...px;
    .rlt-back .price {
    font-size:16px;
    padding:10px 0;
    }

    .rlt-back .price-old {
    text-decoration:line-through;
    color: #000;
    font-size:12px;
    font-weight:normal;
    }
     
    psyflora нравится это.
  7. psyflora

    psyflora

    Регистрация:
    28 июн 2014
    Сообщения:
    8
    Симпатии:
    1
    Спасибо разобрался
     
    ostrun нравится это.