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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


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

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

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



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


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

давайте чтобы не подозревать, а выяснить наверняка - донора в студию и будем разбираться


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


falken, 2.druganov.travel


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


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


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


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

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


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


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


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


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


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


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

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

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

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


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


Да, верно убираете у главного контейнера паддинг
Код
.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


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

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1425 26.3.2024, 21:43
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Можно ли в старый SEO текст вместо старого домена поставить новый?
3 Tutich 1209 22.3.2024, 14:47
автор: Tutich
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
167 metvekot 27408 6.3.2024, 21:58
автор: Boymaster
Горячая тема (нет новых ответов) Текст для сайта на английском языке
33 D007user 18030 26.1.2022, 17:16
автор: D007
Горячая тема (нет новых ответов) Копирайтинг и рерайт: качественный сео-текст по доступной цене!
374 Sostavitel 196964 18.1.2022, 23:46
автор: Sostavitel


 



RSS Текстовая версия Сейчас: 18.4.2024, 17:06
Дизайн