Форматирование и выравнивание текста в блоках

[keen_]

Совсем запутался, не могу разобраться с CSS.
Не поможете кодом? Сейчас блоки с автомобилями вот так выглядят: ссылка
а нужно вот так как на картинке.

Т. е. чтобы все тексты был align left и верхний заголовок (Acura TSX) не имел отступа от верхней границы блока, а нижний текст (Цена) не имел отступа от нижней границы блока.

Чтобы было по 3 блока в каждой линии, а не два как сейчас у меня и вообще у меня какая-то каша-малаша.
Ширина блока - 224px. Высота - не нужно задавать. Расстояние между блоками - 34px, расстояния между верхними тремя блоком и нижними тремя блоком - тоже 34px.

Готов даже символически "заплатить" за помощь.

[Naive]

Не понятно, зачем там таблицы, все отлично верстается блоками.
Если не задавать статичную высоту блока, то нижние строчки будут цепляться за выступы верхних. Придется после каждой строки бросать блок с clear:both.
Верхний отступ берется от margin-top блока с названием и от padding ячейки.

[keen_]

Вы ошибаетесь, там нет никаких таблиц (<TABLE>). Там CSS, дивы в выводе этих блоков с автомобилями.
У меня не получается сделать, то что описал выше.

[Naive]

Сообщение от keen_

Вы ошибаетесь, там нет никаких таблиц (<TABLE>). Там CSS, дивы в выводе этих блоков с автомобилями.
У меня не получается сделать, то что описал выше.

по всей видимости, хром меня обманывает:
screen.jpg

[keen_]

Сообщение от Naive

по всей видимости, хром меня обманывает:
Вложение 45503

Ой, извиняюсь. Вы правы. Я не заметил сразу.

Сайт стоит на движке diafan. Это он делает таблицы.
Но не в этом суть. А в том, что у меня не получается поставить тексты в нужные места и отступы сделать нужные.

[Naive]

Откуда берутся отступы, я уже сказал.
Текст, судя по bloki.jpg, должны располагаться под изображением, с такой структурой таблицы это невозможно (без css-костылей, ес-но).

[keen_]

Да не в отступах дело вообще. Нужно 3 блока в строке и тексты чтобы были внизу под картинкой, а не сбоку как сейчас.

[Naive]

В первой строке таблицы заголовок.
Во второй две ячейки: в первой картинка, во второй — текст.

Текст, судя по bloki.jpg, должны располагаться под изображением, с такой структурой таблицы это невозможно (без css-костылей, ес-но).

[keen_]

Ой, въехал сейчас. Извините, что тупил Сам не вгляделся внимательно в тот код таблицы. Иногда притупляется внимание и сообразительность, когда работаешь торопясь и очень долго без отдыха и впридачу от природы такие темы плохо понимаю.

Вы абсолютно правы.

Я сделал правки в файле ответственном за вывод этих блоков - shop.view.php и теперь всё отформатировано как нужно. Вот взгляните: ссылка.

Теперь только одно осталось - чтобы блоки выводились по 3 в строке. В общих очертаниях знаю что и где нужно делать, но не получается что-то. А править нужно файл shop.view.php. Вот эта часть кода:

PHP код:

        //вывод списка товаров
        if (! empty($result["rows"]))
        {
            foreach ($result["rows"] as $row)
            {
                echo '<table cellpadding=0 cellspasing=0 class="shop"><tr bgcolor=#6a66fd><td valign=top>';

                //вывод названия и ссылки на товара
                echo '<div class="shop_name">';
                echo '<a href="'.BASE_PATH_HREF.$row["link"].'">'.$row["name"].'</a>';
                    //рейтинг товара
                    if (! empty($row["show_rating"])) echo ' '.$row["show_rating"];
                 echo '</div>';

                //вывод артикула
                if (! empty($row["article"])) {
                echo '<div class="shop_article">';
                echo $this->_('ARTICLE').':'; //вывод слова "Артикул" из языковой переменной
                echo '<span class="shop_article_value">'.$row["article"].'</span>';
                echo '</div>';
                }
                
                echo '</td></tr><tr bgcolor=#ffe032><td valign=top>';
                
                //вывод изображений товара
                if (! empty($row["img"]))
                {
                    echo '<div class="shop_img">';
                    foreach ($row["img"] as $img)
                    {
                        switch($img["type"])
                        {
                            case 'animation':
                                echo '<a href="'.BASE_PATH.$img["link"].'" rel="prettyPhoto[gallery'.$row["id"].'shop]">';
                                break;
                            case 'big_image':
                                echo '<a href="'.BASE_PATH.$img["link"].'" rel="big_image" width="'.$img["link_width"].'" height="'.$img["link_height"].'">';
                                break;
                            default:
                                echo '<a href="'.BASE_PATH_HREF.$img["link"].'">';
                                break;
                        }
                        echo '<img src="'.$img["src"].'" width="'.$img["width"].'" height="'.$img["height"].'" alt="'.$img["alt"].'" title="'.$img["title"].'">'
                        .'</a> ';
                    }
                    echo '</div>';
                }
                
                echo '</td></tr><tr bgcolor=#54de88><td valign=top>';
                
                //вывод параметров товара
                if (! empty($row["param"]))
                {
                    self::param($row["param"]);
                }
                
                //вывод скидки на товар
                if (! empty($row["discount"]))
                {
                    echo '<div class="shop_discount">'.$this->_('DISCOUNT').': <span class="shop_discount_value">'.$row["discount"].' %'.($row["discount_finish"]?' (до '.$row["discount_finish"].')':'').'</span></div>';
                }
                
                //вывод краткого описания товара
                if (! empty($row["anons"]))
                {
                    echo '<div class="shop_anons">'.$row["anons"].'</div>';
                }
                
                //цена на товар
                if (empty($row["depend"]) && ! empty($row["price"]))
                {
                    echo '<div class="shop_price">'.$this->_('PRICE').': <span class="shop_price_value">'.$row["price"].'</span> <span class="shop_price_currency">'.$result["currency"].'</span></div>';
                    if (! empty($row["old_price"]))
                    {
                        echo '<div class="shop_old_price">'.$this->_('OLD_PRICE').': <span class="shop_price_value">'.$row["old_price"].'</span>'
                        .' <span class="shop_price_currency">'.$result["currency"].'</span></div>';
                    }
                }

                //вывод кнопки "Купить"
                self::form($row, $result);

                echo '</td></tr></table>';
            }
            echo '<div class="clear"></div>';
        } 


[Naive]

Смотрел вчера ваш сайт, но не было возможности ответить. У вас не подгружаются стили. В классе .shop было свойство float:left, оно выравнивало таблицы в строку, его нужно вернуть.
Но, при добавлении других элементов (больше трех) они будут «цепляться» за верхний ряд, чтобы этого не происходило, необходимо либо задать статичную высоту каждому элементу, либо после каждой строчки бросать блок с очищающим выравнивание стилем clear:both.