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

Отступы от картинки


     04.03.2014    Шаблоны (TPL), Стили (CSS)    1827

вопрос
1)Как сделать отступы от картинки и от текста (сама картинка выводится через доп.поле poster) при желании - снизу поля poster отступ был больше, чем в ширину от текста.

2)Как сделать отступы от скриншотов загруженных у меня в поле (кадры из аниме), он загружаются в вертикальное положение мне приходится их поправлять в горизонтальное положение и в придачу они слипаются.
Хотелось чтобы выглядело примерно так:
Отступы от картинки

3)Как сделать закругление определенной картинки (poster), знаю что данное осуществляется через CSS.
Отступы от картинки

Мой код fullstory.tpl:


Страница с проблемой:
http://animeclassic.ru/5-shkola-mertvecov.html

Ответил: JacobClyne


Код для fullstory.tpl (тут у тебя незакрытый div есть, я не стал это исправлять, подумал может у тебя шаблон такой)
{poll}
<div>
    <div class="news-l"></div>
    <div class="news">
        <div style="float: right;">[day-news]{date=d.m.Y}[/day-news]</div>
        <div id="news-title">{title}/[xfvalue_eng_name] [edit](Редактировать)[/edit] </div>
    </div>
    <br/>
    <div style="margin-left: 10px; margin-right: 10px; font-size: 10pt">
        <div class="xfvalue_poster">[xfvalue_poster]</div>
        <b>
            Английское название:
        </b>
        [xfvalue_eng_name]
        <br>
        <b>
            Новая серия:
        </b>
        [xfvalue_update]
        <br>
        <b>
            Дата выхода:
        </b>
        [xfvalue_released]
        <br>
        <b>
            Категория:
        </b>
        {category}
        <br>
        <b>
            Жанр:
        </b>
        [xfvalue_janr]
        <br>
        <b>
            Количество серий:
        </b>
        [xfvalue_numbers-eps]
        <br>
        <b>
            Производство:
        </b>
        [xfvalue_production]
        <br>
        <b>
            Режиссёр:
        </b>
        [xfvalue_director]
        <br>
        <b>
            Снято по манге:
        </b>
        [xfvalue_manga]
        <br>
        <b>
            Автор оригинала:
        </b>
        [xfvalue_original]
        <br>
        <b>
            Официальный сайт:
        </b>
        [xfvalue_off_web_site_anime]
        <br>
        <b>
            Озвучивание:
        </b>
        [xfvalue_dubbing]
        <br>
        <b>
            Студия:
        </b>
        [xfvalue_studio]
        <br>
        <br>
        <b>
            Краткое содержание:
        </b>
        {short-story}
        <br>
        <hr>
        <center>
            <hl>
                Кадры из аниме:
            </hl>
        </center>
        <div class="xfvalue_pictures">[xfvalue_pictures]</div>
        <hr>
        <br>
        {full-story}
        <div style="clear: left">
            <a href="javascript:history.go(-1)">
                <div class="news-line-r" style="padding-left: 30px; width: 85px;">
                    Вернуться
                </div>
            </a>
            <div class="news-line">
                Автор: {author} | Категория: {link-category} | Просмотров: {views} | [com-link]Комментариев: {comments-num}[/com-link] [complaint]| Нашли ошибку?[/complaint]
            </div>
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
    {comments}
    {navigation}
    {addcomments}
    
    

код для css
.xfvalue_poster img {margin: 0px 15px 5px 0px;
box-shadow: 0px 1px 10px -2px #6D6D6D;
border-radius: 22px;}
.xfvalue_pictures img {margin: 5px;
box-shadow: 0px 1px 7px #C5C5C5;
border-radius: 7px;}

box shadow - тень для картинки
border-radius - закругление углов
margin - отступ

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

rashpil
33

232 | 182

rashpil - 4 марта 2014 16:33 - Эксперт

О, скрин кадров с моего тестового сайта

Roman
28 | 2

Roman - 4 марта 2014 17:48 - Юзер

Ну тогда подскажи, как кадры расставлять так-же с отступами, меня скин не интересует.

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

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