X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Картинки по всей ширине блока, а текст с отступами, Как сделать на CSS?
Lifekaifer
Lifekaifer
Topic Starter сообщение 17.8.2016, 1:09; Ответить: Lifekaifer
Сообщение #1


Участник
***

Группа: User
Сообщений: 120
Регистрация: 11.9.2014
Из: Санкт-Петербург
Поблагодарили: 19 раз
Репутация:   3  


Собственно сабж.
Очень понравилось как выглядят на сайте ФурФур статьи. Там как раз фотография по всей ширине блока "контент", без отступов.
А текст соответсвенно с отступами от краев, чтобы читался удобно.

Подозреваю что надо это реализовать через margin: -40px или как то так, но пока все что пробовал просто смещает изображение на 40px в лево, но оно остается за "рамкой", то есть не на переднем плане.

И еще такой вопрос в догонку, как объявить этот новый стиль так, чтобы он по умолчанию ставился к картинкам которые заливаю через загрузчик wordpress? То есть стандартный img не поменять, везде картинки поедут. Но не вручную же в каждой будущей статье его ставить. Или вручную?)



--------------------
Веду блог о кругосветных путешествиях, его и продвигаю
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 17.8.2016, 2:21; Ответить: falken
Сообщение #2


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


Цитата(Lifekaifer @ 17.8.2016, 0:09) *
Подозреваю что надо это реализовать через margin: -40px или как то так,

давайте чтобы не подозревать, а выяснить наверняка - донора в студию и будем разбираться
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Lifekaifer
Lifekaifer
Topic Starter сообщение 17.8.2016, 2:30; Ответить: Lifekaifer
Сообщение #3


Участник
***

Группа: User
Сообщений: 120
Регистрация: 11.9.2014
Из: Санкт-Петербург
Поблагодарили: 19 раз
Репутация:   3  


falken, 2.druganov.travel


--------------------
Веду блог о кругосветных путешествиях, его и продвигаю
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sc2r2bey
sc2r2bey
сообщение 17.8.2016, 3:24; Ответить: sc2r2bey
Сообщение #4


Частый гость
**

Группа: User
Сообщений: 57
Регистрация: 22.8.2010
Поблагодарили: 8 раз
Репутация:   1  


скорее всего это миниатюры к статьям, правь их стиль


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Lifekaifer
Lifekaifer
Topic Starter сообщение 17.8.2016, 7:39; Ответить: Lifekaifer
Сообщение #5


Участник
***

Группа: User
Сообщений: 120
Регистрация: 11.9.2014
Из: Санкт-Петербург
Поблагодарили: 19 раз
Репутация:   3  


не, в статьях (например в этой 2.druganov.travel/visa-usa/ выводятся не как миниатюры а как size-full
Да и чтобы править надо знать что писать)) ну помимо margin'а
вот поэтому и прошу у вас совета, потому что не знаю)

Сообщение отредактировал Lifekaifer - 17.8.2016, 7:40


--------------------
Веду блог о кругосветных путешествиях, его и продвигаю
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sc2r2bey
sc2r2bey
сообщение 17.8.2016, 11:22; Ответить: sc2r2bey
Сообщение #6


Частый гость
**

Группа: User
Сообщений: 57
Регистрация: 22.8.2010
Поблагодарили: 8 раз
Репутация:   1  


ну по этой ссылке стили такие:
img {
height: auto;
max-width: 100%;
}


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Lifekaifer
Lifekaifer
Topic Starter сообщение 19.8.2016, 9:08; Ответить: Lifekaifer
Сообщение #7


Участник
***

Группа: User
Сообщений: 120
Регистрация: 11.9.2014
Из: Санкт-Петербург
Поблагодарили: 19 раз
Репутация:   3  


sc2r2bey, это я вижу.
Как их сделать во всю ширину?


--------------------
Веду блог о кругосветных путешествиях, его и продвигаю
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Lifekaifer
Lifekaifer
Topic Starter сообщение 24.8.2016, 15:16; Ответить: Lifekaifer
Сообщение #8


Участник
***

Группа: User
Сообщений: 120
Регистрация: 11.9.2014
Из: Санкт-Петербург
Поблагодарили: 19 раз
Репутация:   3  


Нашел что решает проблему.
в <div> ответственном за сингл запись стоит такой стиль:
Код
.pad {
    padding: 30px 30px 20px;
}

Если его убрать, то изображения и текст плотно прилипают к краям, как мне и нужно.
Теперь осталось понять как сделать все таки отступы от краев для текста.

И текст и картинки автоматом оборачиваются в <p>

Домен кстати переехал просто на druganov.travel, без двойки


--------------------
Веду блог о кругосветных путешествиях, его и продвигаю
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
VeronikaVeik
VeronikaVeik
сообщение 24.8.2016, 15:50; Ответить: VeronikaVeik
Сообщение #9


Новичок
*

Группа: User
Сообщений: 34
Регистрация: 23.6.2014
Поблагодарили: 8 раз
Репутация:   1  


Да, верно убираете у главного контейнера паддинг
Код
.pad {padding: 0;}

Дальше для текста пишете, к примеру
Код
.entry-inner p:first-child {
    padding: 0 50px;
}


Там суть в чем, у вас <p> это и текст и картинка, потому просто к <p> нельзя обратиться, отступ снова появится. Один из выходов использовать псевдокласс.

С заголовком, если нужен так же отступ, просто задаете классу margin-left: (сколько-то)px;

Примерно так.

Сообщение отредактировал VeronikaVeik - 24.8.2016, 15:52
Прикрепленные файлы
Прикрепленный файл  Screenshot_10.png ( 580,45 килобайт ) Кол-во скачиваний: 1
 


--------------------
Вёрстка, натяжка на Wordpress, DLE.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 24.8.2016, 18:54; Ответить: prolisk
Сообщение #10


Участник
***

Группа: User
Сообщений: 177
Регистрация: 24.8.2010
Из: Sava
Поблагодарили: 20 раз
Репутация:   3  


У меня была похожая тема, картинки обрезались стилями и функциями. Я просто изменил формат картинки (стояло medium, заменил на post-thumbnal)
По поводу картинок: есть такие форматы по умолчанию:
thumb, thumbnail, medium, large, post-thumbnail

Может протестируйте их.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Чем сжимать картинки для сайта без потери качества
1st-finstep.ru - Заработок в сети и методы продвижения сайта
15 komarik_vlad 1515 Сегодня, 12:05
автор: x64
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыЗапилен сервис добавления водяного знака на картинки
10 Ultrastalker 816 Вчера, 23:27
автор: Ultrastalker
Горячая тема (нет новых ответов) Копирайтинг и рерайт: качественный сео-текст по доступной цене!
312 Sostavitel 91128 8.12.2017, 12:30
автор: Sostavitel
Открытая тема (нет новых ответов) Размножить текст
4 azos 369 2.12.2017, 23:37
автор: Emtec
Открытая тема (нет новых ответов) Не отображаются картинки на главной WP
7 DONPOZITIV 978 30.11.2017, 7:33
автор: Nell


 



RSS Текстовая версия Сейчас: 17.12.2017, 14:38
Дизайн