Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Похожие новости с картинками. Горизонтальное расположение. Как?

Похожие новости с картинками. Горизонтальное расположение. Как?


     29.05.2016    Общие вопросы по вёрстке, Стили (CSS)    465

вопрос
Добрый день. Народ, я не очень силен в css и т.д. прошу вашей помощи. Вот код моих relatednews.tpl и style.css:


<div class="relatednews">
<a href="{link}"><img class="imagestory" src="{image-1}" alt="{title}"/><br/>{title}</a>
</div>

/*Related News*/
.relatednews{display:inline-block; width:25%; vertical-align:top; }
.relatednews img{width:170px; height:170px;}


Сейчас в похожих новостях картинки и заголовки новостей отображаются горизонтально НО:
а) картинки имеют не правильные пропорции (тоесть они заточены под высоту, и изображения HD (1280х720 к примеру) отображаются очень зжато, в пропорциях 3:3 и хуже.
б) картинки налазят друг на друга.

Камнями прошу сильно не бросаться, перепробовал все, что можно.... менял width:170px; height:170px на другие значения, но новости то уродуются еще больше, то становятся опять по вертикали.

Собственно, вот вопрос:
Как сделать правильное горизонтальное расположение похожих новостей с картинками, чтобы изображения не налазили друг на друга и имели правильные пропорции?
Нарисовал схему, что я имею в виду. (Да я пейинтмастер:)) )
Похожие новости с картинками. Горизонтальное расположение. Как?

Ответа пока нет


Комментарии пользователей (3)

sertaras
29

sertaras - 29 мая 2016 03:21 - Юзер

.Вот размеры твоих изображений
relatednews img{width:170px; height:170px;}
width:170px ширина в пикселях
height:170px высота
меняй на те которые нужны
то есть увелич width:170px к примеру width:200px

HidaN20
22

HidaN20 - 29 мая 2016 16:18 - Юзер

sertaras,
Я же писал, что
менял width:170px; height:170px на другие значения, но новости то уродуются еще больше, то становятся опять по вертикали.

sertaras
29

sertaras - 30 мая 2016 05:46 - Юзер

HidaN20,
Так подгоняй все остальное рамки текст кнопки
Кинь ссылку на шаблон посмотрю

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы