21-09-2010, 09:10 Посмотрели: 17087 Добавил: Alex V

Как сделать отступ картинки от текста?


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

Как по мне, так это выглядит очень не красиво и мешает читать сам текст, так как он буквально сливается с картинкой.

Но, это исправить можно за несколько минут.

Для этого открываем исходный код страницы и смотрим какой код принадлежит новостям на сайте:

Как сделать отступ картинки от текста?


В моем случае это:
<div class="post">*


* Если у Вас будут проблемы с поиском стиля, напишите в комментах, мы поможем Вам его найти.

Теперь нужно прописать стиль для всех картинок которые находятся в новостях сайта.

И мы прописываем следующее:

.post img {
border:10px solid #FFFFFF;
}

Вот и все собственно! Теперь у нас должно вы выглядеть Вот так:

Как сделать отступ картинки от текста?


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

Спасибо за внимание!
Рубрика записи: CSS примеры

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

№ 1. 02-08-2011 23:46 Sector из групы: Посетители сказал :
Всё делает гараздо проще просто добавить в сcs
 css
№ 2. 04-08-2011 10:15 Alex V из групы: Администраторы сказал :
Sector, но для этого каждую картинку нужно заносить в DIV. И не все сайты используют дополнительные поля.

Лучше задать стили так как я указал в посте.

Коллектив WebNine Young (w9y)
№ 3. 25-10-2012 00:39 freedom из групы: Посетители сказал :
DLE 9.5

А как сделать то же самое на СТАТИЧЕСКОЙ странице, когда изображение добавляется загрузчиком файлов DLE.

Где нужно изменить это и сделать отступ? В style.css?

Напишите пожалуйста подробнее.
№ 4. 25-10-2012 12:54 Alex V из групы: Администраторы сказал :
ДА все верно в style.css, только DIV правильный подберите.

Коллектив WebNine Young (w9y)
№ 5. 30-04-2014 12:04 myblanes из групы: Посетители сказал :
Огромное спасибо. Обновила вордпресс и оказалось что там нету удобной функции отступа и рамки. Мучилась долго пока не нашла вашу статью. Только я написала так:
 
 
border-left: 10px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
 
 
 
Иначе в миниатюре пропадала белая рамочка. Вот что получилось: myblanes.ru/diskoteki-v-blanese/
Не подскажите еще как сделать тонкую рамку-обводку (какна фото в статье myblanes.ru/blanes_costa_brava/)?? Опять же нет такой функции в боновленной версии вордпресс. Спасибо заранее
№ 6. 13-05-2014 23:56 Alex V из групы: Администраторы сказал :
myblanes, если я правильно понял, то вот так: 
 
 
 border: 1px solid #000000;

Коллектив WebNine Young (w9y)

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Юзер панель
Я тебя не знаю!
Зарегистрируйся, либо

войди под своим логином!

Fuck, я забыл свой пароль!

Восстановить данные =0
Новое на сайте
Известная социальная сеть Instagram приступила к тестированию новой...
Недавно, в приложения для Android и iOS социальной сети Twitter была...
Недавно, в Google "Мой бизнес" разработчики добавили новейший способ, как...
Недавно стало известно о том, что соцсеть Facebook по упоминанию в русских...
Недавно, представитель корпорации Google, Джон Мюллер (John Mueller)...
Голосуем

Ваша любимая CMS?


DataLife Engine
WordPress
Joomla
Drupal
LiveStreet
UCOZ
Самопис
Php+Includ
Статика