Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Помогите реальизовать вывод новостей в aкороткой версии

Помогите реальизовать вывод новостей в aкороткой версии


     05.04.2012    Стили (CSS), Ламерские вопросы    1947

вопрос
Здравствуйте. Наткнулся в интернете на длешный сайт http://post-hardcore.ru/
Мне очень понравилось как выполнен вывод новостей в короткой версии, а в полной версии вывод обычный.

Вот хочу себе на сайт такой же вывод и прошу Вас помочь мне в этом winked

Я уже пытался сам сделать, вскрыл CSS этого сайта и нашел там следующее:
  .maincont img { padding: 5px; border: none;}
      div#newstyle {width: 100%; padding-right: 10px;}
    div#newstyle img{max-width: 340px; margin-left: -355px; float: left; padding-right: 20px; }
    div#newstyle p {margin-left: 360px; position: relative; z-index: 105; padding-right: 5px; width: 42%;}

Результата такого же не получил, всё криво и вообще фиг пойми что.
В CSS я не силён, поэтому и прошу помощи у Вас :)

Ответил: Технолог


Для получения такого эффекта достаточно добавить для рисунка всплывание налево:

.maincont img {
padding: 5px;
border: none;
float: left;
}
Рисунок уйдет влево и освободит место для текста справа.
Такое решение для короткой новости будет верно в том случае, если текст всегда короче рисунка по высоте, т.е. есть ограничения в шаблоне.
Это применимо для музыкальных сайтов.
Если текст может быть больше рисунка по высоте и нужно, чтобы текст не подъезжал под рисунок снизу, а стоял в своем столбце, то, тогда, самое простое решение - это таблица.
Первоначально, такую таблицу нужно вставить в шаблон HTML, а уже потом, в нее - нужные блоки, типа .maincont img и .maincont p, и уже им прописать нужные стили.
Такая таблица будет держать вертикальную ориентацию.

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

Nick
6

95 | 70

Nick - 6 апреля 2012 14:45 - Юзер

Мне очень понравилось как выполнен вывод новостей в короткой версии, а в полной версии вывод обычный.

Надо было подробней Вам описать, что именно понравилось.
Если Вы про расположение картинки и текста (картинка слева, текст справа), то все делается довольно просто.

Задаем картинке, расположенной в короткой новости, следующие свойства
.shortnews img:first-child {display: inline; float: left; width: 150px;}


display: inline; — указываем, что после очередного div не надо переносить указатель на новую строку.
float: left; — определяет, по какой стороне будет выравниваться элемент
width: 150px; — задаем ширину картинки
.shortnews — класс, который оборачивает короткую новость
img:first-child — псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу img


Ещё надо будет задать отступы, чтобы текст не прижимался к изображению.

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

nowheremany
192

1659 | 1292

nowheremany - 6 апреля 2012 15:09 - Эксперт

Нафиг JS тащить в CSS? Осел вам фигу даст

Благодарность принимаю тут Связь

Nick
6

95 | 70

Nick - 6 апреля 2012 15:15 - Юзер

Вы о чем? Какой js?

nowheremany
192

1659 | 1292

nowheremany - 6 апреля 2012 15:51 - Эксперт

first-child тока с IE7

Благодарность принимаю тут Связь

cryinside
2 | 2

cryinside - 6 апреля 2012 16:34 - Юзер

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

Nick
6

95 | 70

Nick - 6 апреля 2012 17:00 - Юзер

Так, чтобы картинка не выходила за пределы, можно добавить в css:
.maincont {min-height: 260px;}


Да, с текстом будет сложней, может кто-нибудь из здешних подскажет как элегантней решить эту проблему. Можно оборачивать описания в тег < p >
и при этом дописав в css:
.maincont p { padding-left: 160px; width: 400px;}

Получится такая картина:
http://i28.fastpic.ru/big/2012/0406/5e/a39b9ebffa3f9a902258444f57c2c35e.jpg


Но это больше похоже на костыль, нежели на удобное решение ;). (кстати, на post-hardcore ru описание тоже оборачивается в < p >, но там по другому немного реализованно)

cryinside
2 | 2

cryinside - 6 апреля 2012 17:23 - Юзер

всё дописал, картинка не вылазиет за границу. осталось с текстом разобраться и с этим багом в подвале сайта:
http://cs10158.userapi.com/u23078328/-14/w_c02d648e.jpg

Технолог
8 | 9

Технолог - 5 июля 2012 19:12 - Юзер

Ну зачем такие сложности?

display: inline; — указываем, что после очередного div не надо переносить указатель на новую строку.
float: left; — определяет, по какой стороне будет выравниваться элемент
width: 150px; — задаем ширину картинки
.shortnews — класс, который оборачивает короткую новость
img:first-child — псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу img

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

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