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

Где находится стили букв "краткое описание" ?


     25.07.2015    Общие вопросы по вёрстке    720

вопрос
Добрый вечер, вот ломаю себе мозг, не могу найти стилей к буквам. Нужно сделать отступ от левого края, а куда этот тег ставить не знаю.
Вот на скиншоте показал.
https://yadi.sk/i/MPCo8S0Zi62i7

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


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

Azbuka
37 | 3

Azbuka - 25 июля 2015 21:35 - Юзер

Вот ссылка на тестируемый шаблон http://psd24.ru/?action_skin_change=yes&skin_name=Test

osimi
61 | 9

osimi - 26 июля 2015 09:09 - Юзер

это ссылка работает только у тя ))

ScreN
10

207 | 102

ScreN - 26 июля 2015 09:52 - Юзер

Верстка кривая конечно. Допустим, для текста под изображениями нужно создать отдельный класс, или обернуть текст в какой нибудь строчный тег, допустим <p> или <span> и тогда можно будет его подвинуть не затрагивая весь контент в блоке. В данный момент, т.к текст входит в общий див и тексту не присвоен класс, его не подвинуть отдельно от контента. Можно для дива с классом short-story задать правило padding: 10px; но тогда весь контент в блоке получит внутренний отступ 10px. Правьте верстку.

А вообще, посмотрите видео уроки по HTML разметке и CSS таблицам, для того чтобы хотя бы понимать простые вещи. Подвинуть Ваш текст, 5 минут делов. А вы даже и этого сделать не можете. Как вы верстаете шаблон, если не можете сделать элементарного.

ScreN
10

207 | 102

ScreN - 26 июля 2015 10:10 - Юзер

Вот вам картинка, разбирайтесь.
http://clip2net.com/s/3lfx4lE

Azbuka
37 | 3

Azbuka - 26 июля 2015 11:06 - Юзер

ScreN,
Сам факт в том, что тег {short-story} отвечает и за картинку и за текст, т.е. я ему прописываю вот такое значение.

.img-size h5 {
     margin-left: 10px;
}

и тут вставлю этот <h5>
<div class="img-size"><h5>{short-story}</h5></div>

Но у меня и картинка двигается на 10пх.

Поэтому хотелось бы найти именно тот тег который отвечает за слова, а не за картинку, в css слабый, но хочу видеть примеры, тогда я точно разберусь.
ScreN,
сделал как ты просил, но не получается(

ScreN
10

207 | 102

ScreN - 26 июля 2015 11:31 - Юзер

Причем тут тег заголовка h5? Он подвинет текст заголовка, а не нижний текст под картинкой. Еще раз объясняю, у тебя не обернут нижний текст в тег. Блин, ну и бардак.

Я же пример привел + скриншот сделал, что не получается то?

Как проще объяснить? Всю структура тега написать? Ок

У тебя есть


Оберни текст под картинкой в тег <span></span> и задай в CSS свойство margin-left: 10px; для класса .img-size span

osimi
61 | 9

osimi - 26 июля 2015 11:49 - Юзер

найди это код в shortstory.tpl
<h3 class="btl">[full-link]{title}[/full-link]</h3>

замени на это
<h3 class="btl" style="margin-left: 10px;">[full-link]{title}[/full-link]</h3>

ScreN
10

207 | 102

ScreN - 26 июля 2015 11:54 - Юзер

А причем тут код заголовка? У него заголовок нормально стоит, и он у него обернут не в h3 а в h2 тег. Да и зачем писать css правило в html? Код захламлять.

ScreN
10

207 | 102

ScreN - 26 июля 2015 11:49 - Юзер



 CSS


Так доступно?

osimi
61 | 9

osimi - 26 июля 2015 12:06 - Юзер

ой простите ошибся )) а css код можно и в html вставить)) если там один стил за чем писать в css

ScreN
10

207 | 102

ScreN - 26 июля 2015 12:07 - Юзер

А зачем захламлять html лишними css правилами? :) Можно то оно можно, я не спорю, но против такого метода.

С таким же успехом можно задать общий стиль в css для тега h3 с правилами margin-left: 10px; и потом просто оборачивать нужный текст в этот тег, и не нужно будет писать для него стиль в html

osimi
61 | 9

osimi - 26 июля 2015 12:08 - Юзер

а за чем ты тут {short-story} оставил открытым ))

ScreN
10

207 | 102

ScreN - 26 июля 2015 12:06 - Юзер

Ох.... Ок.

Для shorty-story задайте padding:10px; а тегу h2 a убери margin-left. Далее нужно будет отцентровать картинку. Задать ей margin-left: -10px;

ScreN
10

207 | 102

ScreN - 26 июля 2015 12:19 - Юзер

В css вот так сделай. Красным обернул.
http://clip2net.com/s/3lfHwth

Но это решение по быстрому. На самом деле я бы весь блок переверстал.

Azbuka
37 | 3

Azbuka - 26 июля 2015 12:31 - Юзер

другие способы не работали, только последний способ, который написал ScreN. Спасибо огромное за помощь, тебе +)!
Всем участником этой темы огромное спасибо за желание помочь, у Вас это получилось)))


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

ScreN
10

207 | 102

ScreN - 26 июля 2015 12:36 - Юзер

Зачем копать глубже? Просто нужно нормально сверстать блок и написать padding:10px; чтобы контент внутри блока принял отступы ото всех сторон по 10px. И дальше уже верстать вывод контента для блока и не парится что не будет отступов внутри блока. Изначально это все продумывать нужно, при верстке блока с контентом. Чтобы потом не думать, где же этот тег. Да и там нету никакого тега на самом деле. Ты думаешь он спрятан в php коде? Нет его там. За отступы в блоке с контентом отвечает свойство css padding прописанное по дефолту. Ты просто его видимо удалил.

Azbuka
37 | 3

Azbuka - 26 июля 2015 13:39 - Юзер

ScreN,
да возможно я его удалил, ты прав я думал код спрятан где то в php)
а когда этот дизайн поставлю на сайт, отступ от левого края на 10пх, не будет искажаться в разных браузерах и разрешение экрана ? и можно в принципе так и оставить и не парится ?

ScreN
10

207 | 102

ScreN - 26 июля 2015 13:55 - Юзер

Для того чтобы отступы отображались правильно в разных браузерах, существует сброс стилей. Называется Normalize.css. Загугли. Его можно вставить в твой css файл в самое начало. А можно вставить в отдельный файл и подключить в main.tpl.

Azbuka
37 | 3

Azbuka - 26 июля 2015 14:24 - Юзер

ScreN,
понял, обязательно посмотрю и проверю.

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

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