Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как задать стили для первой картинки в короткой новости

Как задать стили для первой картинки в короткой новости


     11.08.2012    Все вопросы » Стили (CSS)    3859

вопрос
Мне надо первую картинку в короткой новости заключить в div со стилями
width:350px; height:200px; overflow: hidden; (в будущем будут добавляться :hover)
Хочу привести стиль картинки новости к одному стилю

Посредством редактора Chrome сделал что мне надо:
<div style="width:350px; height:200px; overflow: hidden;">
<a href="/uploads/posts/2012-08/1344716777_33800-b.jpg" onclick="return hs.expand(this)" class="      ">
  <img src="/uploads/posts/2012-08/thumbs/1344716777_33800-b.jpg" tooltip="Мой тултип неважно какой">
</a>
</div>


Как теперь это запихнуть в shotstory.tpl ? Или как создать стили для {image-1} в css ? Возможно есть полегче путь решения? Заранее спасибо за ответ

Ответил: ПафНутиЙ


поможет jquery
$('.news img:first').wrap('<div class="firstimg" />');

css:
.firstimg {width:350px; height:200px; overflow: hidden;}

4 комментария

pavel31
Юзер

pavel31 - 12 августа 2012 02:55 -

А вот это вывод картинки тегом не то?

hypernorm
Юзер

hypernorm - 12 августа 2012 11:48 -

Пафнутый Спасибо. Если я правильно понял я теперь {short-story} загоняю в <div class="firstimg"> ?
Получается почти как надо , только картинка теперь вытесняет текст в overflow:hidden и его не видно. Попробую теперь поиграться с max-height и другими величинами.

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

Sander
PHP-developer

Sander - 12 августа 2012 12:40 -

{short-story} надо загонять в <div class="news"> а картинка уже сама загонится в тот див.

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

hypernorm
Юзер

hypernorm - 12 августа 2012 16:47 -

Извиняюсь за свою не компетентность, но почему то все равно первая картинка не "обворачиваеся" в нужный div.
Мои дейтсвия :
1. Вот так в shotstory.tpl выглядит контент:
...<div class="maincont imgfirst">{short-story}</div>...


2. в первый же js в шаблоне в конце добавил :
$('.maincount.imgfirst img:first').wrap('<div class="firstimg" />'); 


3. В css вставил то что подсказал ПаФНутий:
.firstimg {width:350px; height:300px; overflow: hidden;}


Пробовал в js обернуть еще (function($) { ..... })(jQuery), не помогло.
Попробовал еще пойти другим путем через css3 :
.maincont.firstimg img:first-child {width:350px; height:300px; overflow: hidden;}
Но так у 1-й картинки только пропорции искажаются. Подскажите много уважаемые Sander и ПафНутиЙ где моя ошибка ?

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

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

наверх