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

Дубль два. Как убрать отступы?


     16.02.2015    Общие вопросы по вёрстке    1261

вопрос
Задаю вопрос еще раз.
Как убрать отступы? И обрезать длину категории?

Необходимо, чтобы работало во всех браузерах!



Код шаблона такой:
<div class="main-news">
    <div class="main-news-image">
        [full-link]<img src="http://img.youtube.com/vi/[xfvalue_youtubeprev]/mqdefault.jpg" width="200px" height="130px" /> alt="{title}" />
        [/full-link]
    </div>
    [full-link]<div class="clip">{title limit="25"}</div>
[/full-link]
    <div class="clip"><p class="binfo small">Категория: {link-category}</p></div>
    <p class="binfo small"><img src="{THEME}/images/autor-mini.png"> {author} <img src="{THEME}/images/view-mini.png"> {views}</p>
    <div class="main-news-more">
            [rating-type-3]<div class="ratebox3">
            <ul class="reset">
                <li>[rating-minus]<img src="{THEME}/images/ratingminus.png" title="Не нравится" alt="Не нравится" style="width:14px;" />[/rating-minus]</li>
                <li>{rating}</li>
                <li>[rating-plus]<img src="{THEME}/images/ratingplus.png" title="Нравится" alt="Нравится" style="width:14px;" />[/rating-plus]</li>
            </ul>
            </div>[/rating-type-3]
            [/rating]
    </div>
</div>

Ответил: Sander


Для класса binfo или small уменьшить padding или margin.

На второй картинке вы не обрезали, а сделали перенос break-word

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

maintpl
11

maintpl - 17 февраля 2015 19:31 - Юзер

и как сделать обрезание?)))

ПафНутиЙ
1064

3394 | 2433

ПафНутиЙ - 17 февраля 2015 20:02 - Админ

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

Если нужно скрыть ;)
overflow: hidden;

Каков вопрос - таков и ответ. Просто помните об этом.

Samosval
3

Samosval - 17 февраля 2015 23:07 - Юзер

white-space: nowrap; /* Запрещаем перенос строк */
text-overflow: ellipsis; /* Добавляем многоточие */
text-overflow: clip; /*Текст обрезается по размеру области.*/
overflow: hidden; /* Обрезаем все, что не помещается в область */

В Вашем случае будет
<style>
   .binfo, .small {
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    text-overflow: ellipsis; /* Добавляем многоточие */
   }
  </style>

<p class="binfo small">Категория: {link-category}</p>

maintpl
11

maintpl - 18 февраля 2015 15:48 - Юзер

эти css не работают на ИЕ по этой причине в разделе категория у меня и получается перенос на следующую строку. моя главная задача, чтобы все было оптимизировано по ИЕ, если будет корректно отображаться на нем, то и на других тоже будет нормально.

maintpl
11

maintpl - 18 февраля 2015 15:49 - Юзер

Цитата: maintpl
white-space: nowrap; /* Запрещаем перенос строк */
text-overflow: ellipsis; /* Добавляем многоточие */
text-overflow: clip; /*Текст обрезается по размеру области.*/
overflow: hidden; /* Обрезаем все, что не помещается в область */


Это взято с сайта хтмлбук, если не ошибаюсь)

maintpl
11

maintpl - 18 февраля 2015 15:58 - Юзер


это скрин из хрома

maintpl
11

maintpl - 18 февраля 2015 15:58 - Юзер


это из ИЕ

maintpl
11

maintpl - 18 февраля 2015 16:06 - Юзер

Цитата: maintpl
Для класса binfo или small уменьшить padding или margin.


В этих стилях прописано следующее:
.small {
    font-size: 0.85em;


.binfo, .argcat {
    color: #888785;
    padding-bottom: 8px;


Насколько я понимаю, изменение этих стилей не решит проблему

maintpl
11

maintpl - 18 февраля 2015 16:09 - Юзер

padding-bottom: 8px;
изменил на 1рх, стало лучше, но не очень

Samosval
3

Samosval - 18 февраля 2015 20:11 - Юзер


Значение поддерживается IE от 6 версии

maintpl
11

maintpl - 19 февраля 2015 16:35 - Юзер

Samosval,
Почему тогда на моих скринах такая хрень? мой ИЕ версии 11 отображает именно так как на моем скрине.

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

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