Общие вопросы по оформлению (65) #2

Перевести Поделиться1Сб, 19 Дек 2020 13:24:51

Автор: Maquis
Модератор
Зарегистрирован: Чт, 5 Ноя 2009
Сообщений: 1938
Уважение: +1963
Позитив: +1658
Предупреждения: ‡
Последний визит:
Сб, 26 Фев 2022 23:41:00

В этой теме просим помощи в оформлении форума и его элементов

Столкнулись с трудностями в оформлении вашего форума? Или просто хотите придать ему новый, свежий вид? В этой теме вы можете задать вопросы по стилизации, дизайну и внешнему виду вашего форума. Получите помощь по работе с CSS, настройке цветовой гаммы, шрифтов, размещению изображений и другим элементам оформления.

Вопросы по скриптам и их работоспособности, просьба, задавать в теме Запросы по скриптам #11
Вы новичок и не разбираетесь во всём этом? Загляните в наш справочный раздел. Возможно, там уже содержится ответ на ваш вопрос. Или задайте свой вопрос в теме Общие вопросы от новичков (63) #3

Важная информация перед тем, как задать вопрос:

Ответы дают другие участники форума по собственному желанию.
Администрация не может гарантировать моментальное решение или абсолютную корректность каждого ответа.
Пожалуйста, уважайте чужое время и усилия других пользователей, старайтесь писать грамотно и доходчиво.
Будьте взаимовежливы: Грубое или требовательное отношение к участникам форума неприемлемо и может привести к отказу в помощи на всём форуме.
Все вопросы, не касающиеся оформления, будут удаляться!

Сформулируйте свой вопрос максимально подробно, чтобы повысить вероятность отклика помощи:

Укажите ссылку на форум: Ссылка на форум, с которым требуется помочь, позволит нам увидеть, понять контекст проблемы и предложить наиболее точное решение, не тратя время на догадки.
Опишите желаемый результат: Четко и конкретно объясните, чего вы хотите добиться. Например: "Мне нужно, чтобы картинка шапки была во всю ширину блока", или "Хочу увеличить размер шрифта в названиях тем". Чем детальнее вы опишете, тем проще будет помочь.
Сделайте скриншот и выделите элемент: Помогающему необходимо понимать с чем ему предстоит вам помочь. Укажите ссылки на схожее оформление (если вы где-то видели подобное). Это не обязательно, но значительно упростит задачу.

Если на ваш вопрос долго нет ответа, пожалуйста, воздержитесь от повторных сообщений или обвинений. Возможно, ваш вопрос оказался излишне сложным, вероятно требующий больше времени и индивидуального подхода, будьте готовы к тому, что участники могут предложить свои услуги на платной основе. Обсуждение условий и оплаты происходит между вами и участником (исполнителем) в личных сообщениях или иных средствах связи (но не в теме!). Администрация форума не несет никакой ответственности за подобные договоренности и их выполнение.

Предыдущая тема: Общие вопросы по оформлению (65) #1


Инструменты для поиска и редактирования стиля (скриптов).	Как с помощью браузера можно определить элемент дизайна.
Каталог скриптов/CSS	Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.
Типовые Вопросы (ЧаВо)	Ответы на часто задаваемые вопросы.
Как задавать вопросы! Разница между стилем и скриптом. ( Советы)	Плюс к названию темы еще и Памятка.

Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности.

+1

Перевести Поделиться1661Сб, 20 Дек 2025 15:27:53

Автор: wildAndrey
Заслуженный
Зарегистрирован: Ср, 4 Май 2011
Сообщений: 224
Уважение: +15
Позитив: +31
Пол: Мужской
Последний визит:
Сегодня 14:11:14

Reysler написал(а):

Сделать то можно, но вы получите эффект "размытого изображения", плюс надо будет подгонять под разные разрешения экранов (она будет смещаться). Предлагаю оставить так. Это самый компромиссный вариант.

Ну, можно, хотя бы, чтобы на Вашем мониторе картинка была на всю ширину основной страницы,
Думаю, что у всех мониторы и экраны меньше, и размытости не будет.

Если я правильно понимаю, то за это отвечает вот этот размер:

}
.header_logo img {
width: 886px;
}

можно увеличить до 900, 950 или 1000?

Отредактировано wildAndrey (Вчера 02:00:23)

0

Перевести Поделиться1662Вчера 16:09:37

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3811
Уважение: +2679
Позитив: +926
Пол: Мужской
Последний визит:
Сегодня 18:07:26

wildAndrey написал(а):

Если я правильно понимаю, то за это отвечает вот этот размер:

}
.header_logo img {
width: 886px;
}

можно увеличить до 900, 950 или 1000?

Верно, можете пробовать, экспериментировать. Однако, как я писал выше - вы получите эффект "размытого изображения".

+1

Telegram @reysler

Перевести Поделиться1663Вчера 16:28:31

Автор: Merlin777
Заслуженный
Зарегистрирован: Ср, 10 Апр 2024
Сообщений: 267
Уважение: +154
Позитив: +176
Пол: Мужской
Последний визит:
Сегодня 23:25:51

wildAndrey написал(а):

Нельзя ли сделать так, чтобы ширина верхней картинки совпадала с шириной основной страницы?

Можно.

Посмотрите на шапку вот этого сайта:

https://gribnikikybani.mybb.ru/

Там верхняя картинка (баннер) вставляется через стиль:

<style>
#pun-title h1 { display: none;}
#pun-title table {
background-size: contain;
background-position: center;
background-image: url("https://forumstatic.ru/files/0010/54/6f/10853.jpg");
/* (img-height / img-width * container-width) */
/* (300 / 1316 * 100) */
height: 0;
padding-top: 22.7%;
}
</style>

Там 22.7% это отношение высоты картинки к её ширине в процентах.

+1

Перевести Поделиться1664Вчера 16:40:23

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7582
Уважение: +6122
Позитив: +6684
Пол: Мужской
Последний визит:
Сегодня 22:08:45

wildAndrey написал(а):

можно увеличить до 900, 950 или 1000?

Будет увеличиваться сама картинка. Правильнее ставить не через html, а фоном через css. Нужно разрезать картинку на три части: левая и правая одинарные, и третья картинка фон, который размножается. При увеличении разрешения левая и правая уходят по углам а по середине будет размножающийся фон (обычно делается квадратом, в данном случае можно сделать по высоте левого и правого угла и полосой). На фотошопе надо подогнать стыковку левой и правой картинки и центра (размножающегося фона).
То бишь нужно отредактировать вот этот блок:

<div class="header_logo">
<a target="_blank" href="//gb.my1.ru/"><img title="на главную страницу" src="https://forumstatic.ru/files/000e/c6/39/92536.jpg" alt="на главную страницу" height="100" border="0" width="100%"></a>
</div>

Убираем:

<img title="на главную страницу" src="https://forumstatic.ru/files/000e/c6/39/92536.jpg" alt="на главную страницу" height="100" border="0" width="100%">

Затем ссылке задаем блочность и указываем фиксированную высоту, равную высоту картинки, и вешаем фон на ссылку, то есть приблизительно это будет выглядеть так:

.header_logo a {
display: block;
width: 100%;
height: 100px;
background: url(левая картинка) top left no-repeat,
url(правая картинка) top right no-repeat,
url(центр - размножающийся фон) repeat;
}

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

+2

Перевести Поделиться1665Вчера 16:48:20

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7582
Уважение: +6122
Позитив: +6684
Пол: Мужской
Последний визит:
Сегодня 22:08:45

Merlin777 написал(а):

background-size: contain;

В случае с contain, будет тот же самый эффект, как и сейчас при вставке через html. а при cover будет обрезаться картинка, при 100% картинка будет искажаться. Нельзя одну картинку вставить, и чтобы она была одинаковой на любом разрешении. При изменении разрешения изменяются и размеры картинки.

0

Перевести Поделиться1666Вчера 16:54:15

Автор: wildAndrey
Заслуженный
Зарегистрирован: Ср, 4 Май 2011
Сообщений: 224
Уважение: +15
Позитив: +31
Пол: Мужской
Последний визит:
Сегодня 14:11:14

Reysler
огромное Вам спасибо за труд 🙏
Всего Вам доброго-доброго !

0

Перевести Поделиться1667Вчера 16:57:27

Автор: wildAndrey
Заслуженный
Зарегистрирован: Ср, 4 Май 2011
Сообщений: 224
Уважение: +15
Позитив: +31
Пол: Мужской
Последний визит:
Сегодня 14:11:14

Merlin777
Спасибо 🙏 большое за совет !
Доберусь до компьютера попробую 👌 сделать так же .

0

Перевести Поделиться1668Вчера 16:58:30

Автор: Merlin777
Заслуженный
Зарегистрирован: Ср, 10 Апр 2024
Сообщений: 267
Уважение: +154
Позитив: +176
Пол: Мужской
Последний визит:
Сегодня 23:25:51

kolobdur74 написал(а):

В случае с contain, будет тот же самый эффект, как и сейчас при вставке через html. а при cover будет обрезаться картинка, при 100% картинка будет искажаться. Нельзя одну картинку вставить, и чтобы она была одинаковой на любом разрешении. При изменении разрешения изменяются и размеры картинки.

Ничего искажаться не будет! Там пропорции же написаны.

0

Перевести Поделиться1669Вчера 17:01:59

Автор: wildAndrey
Заслуженный
Зарегистрирован: Ср, 4 Май 2011
Сообщений: 224
Уважение: +15
Позитив: +31
Пол: Мужской
Последний визит:
Сегодня 14:11:14

kolobdur74
Спасибо огромное , Вам за такой развёрнутый ответ 🙏
Попробую обязательно поэкспериментировать .

+1

Перевести Поделиться1670Вчера 17:05:24

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7582
Уважение: +6122
Позитив: +6684
Пол: Мужской
Последний визит:
Сегодня 22:08:45

Merlin777 написал(а):

Ничего искажаться не будет! Там пропорции же написаны.

Почитайте спецификации css. При contain - картинка вписывается целиком (её реальный размер используется), если она будет меньше ширины блока, то будет эффект полей, как и сейчас. При cover - картинка старается вписаться по размерам блока, соответственно она растягивается на ширину блока, и соответственно высота будет тоже увеличиваться и уходить за пределы блока, так как высоту надо делать фиксированную. И картинка по высоте будет обрезаться. При 100% картинка будет растягиваться по ширине блока и по высоте блока, но так как высоту опять таки надо фиксировать, то картинка будет искажаться, так как будет вписываться в данную высоту при других пропорциях. Попробуйте поэкспериментируйте на досуге на резиновых дизайнах с разным масштабом браузера.

+1

Перевести Поделиться1671Вчера 17:07:43

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7582
Уважение: +6122
Позитив: +6684
Пол: Мужской
Последний визит:
Сегодня 22:08:45

wildAndrey, стоит только учесть, что для если углы будут широкие, и будут превосходить разрешение экрана мобильных устройств, то уголки будут накладываться друг на друга. В таком случае для мобилок лучше либо ставить отдельную свою картинку, либо вообще её убирать.

+1

Перевести Поделиться1672Вчера 17:09:28

Автор: wildAndrey
Заслуженный
Зарегистрирован: Ср, 4 Май 2011
Сообщений: 224
Уважение: +15
Позитив: +31
Пол: Мужской
Последний визит:
Сегодня 14:11:14

kolobdur74
хорошо, буду иметь ввиду , спасибо 🙏 большое !

+1

Перевести Поделиться1673Вчера 17:49:38

Автор: Merlin777
Заслуженный
Зарегистрирован: Ср, 10 Апр 2024
Сообщений: 267
Уважение: +154
Позитив: +176
Пол: Мужской
Последний визит:
Сегодня 23:25:51

kolobdur74 написал(а):

картинка будет искажаться, так как будет вписываться в данную высоту при других пропорциях

Так мы же задали пропорции. Захардкодили, так сказать. Поэтому ничего не будет искажаться - для этой конкретно картинки.

kolobdur74 написал(а):

Попробуйте поэкспериментируйте на досуге на резиновых дизайнах с разным масштабом браузера.

В мобильном режиме всё ОК, в режиме DevTools двигаю разделитель размера окошка - всё ОК, при выборе разных мобильных устройств в DevTools - тоже всё ОК

0

Перевести Поделиться1674Вчера 18:00:14

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7582
Уважение: +6122
Позитив: +6684
Пол: Мужской
Последний визит:
Сегодня 22:08:45

Merlin777 написал(а):

Так мы же задали пропорции. Захардкодили, так сказать. Поэтому ничего не будет искажаться - для этой конкретно картинки.

Есть дизайны с фиксированной вёрсткой, там ширине блока с фоновой картинкой по ширине фиксированного родителя, там можно задать ширину и высоту блока по размерам картинки и она будет одинаковой на любом разрешении вне зависимости от применения contain или cover. Но вот с резиновой вёрсткой такой фокус не пройдет. в данном конкретном случае вёрстка резиновая:

#pun {
margin: 0px auto 30px auto;
width: 100%;
max-width: 1200px;
min-width: 840px;
padding: 0px 21px 0px 21px;
border: none;
}

Соответственно ширина форума растягивается на ширину экрана монитора и привязана к разрешению экрана. В зависимости от разрешения меняются и пропорции, так как надо фиксировать высоту, мы не можем задавать высоту в процентах, иначе пустой блок схлопнется, а вот ширину задаём в процентах и она зависит от разрешения экрана. Попробуйте вписать одну картинку в резиновый дизайн и поймете о чем я говорю.

0

Перевести Поделиться1675Вчера 18:11:06

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7582
Уважение: +6122
Позитив: +6684
Пол: Мужской
Последний визит:
Сегодня 22:08:45

Merlin777, дайте ссылку на рассматриваемый вами пример, и я распишу на конкретном примере что и как.

0

Перевести Поделиться1676Вчера 18:11:38

Автор: Merlin777
Заслуженный
Зарегистрирован: Ср, 10 Апр 2024
Сообщений: 267
Уважение: +154
Позитив: +176
Пол: Мужской
Последний визит:
Сегодня 23:25:51

kolobdur74 написал(а):

Merlin777, дайте ссылку на рассматриваемый вами пример, и я распишу на конкретном примере что и как.

https://gribnikikybani.mybb.ru/

0

Перевести Поделиться1677Вчера 18:22:12

Автор: Амираль
Заслуженный
Зарегистрирован: Вт, 26 Июл 2016
Сообщений: 49
Уважение: +50
Позитив: +17
Последний визит:
Сегодня 22:59:20

Гениальный хак кстати. Неочевидный, потому что для его использоаания надо помнить, что padding в % считается от ширины элемента, даже если это вертикальное поле, но гениальный)))
Да, это должно сработать.
Да, это выглядит как костыль, но это довольно изящный костыль, особенно если его прокомментировать

Отредактировано Амираль (Вчера 18:25:20)

+1

Перевести Поделиться1678Вчера 18:25:44

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7582
Уважение: +6122
Позитив: +6684
Пол: Мужской
Последний визит:
Сегодня 22:08:45

Merlin777, всё достаточно просто. Вот берем ваш код:

#pun-title table
Specificity: (1,0,1)
{
background-size: contain;
background-position: center;
background-image: url(https://forumstatic.ru/files/0010/54/6f/10853.jpg);
height: 0;
padding-top: 22.7%;
}

В данном случае в качестве высоты у вас задается: padding-top: 22.7%; - это очень огромная высота. Поэтому при увеличении разрешения, или уменьшении масштаба, полей почти не видно, но они есть. Кроме того, обратите внимание на высоту картинки по отношению к форуму. Ниже скриншот:

Скриншот

Амираль написал(а):

Гениальный хак кстати. Неочевидный, потому что для его использоаания надо помнить, что padding в % считается от ширины элемента, даже если это вертикальное поле, но гениальный)))

Согласен, но высота при этом настолько большая, что занимает полезное место экрана, не неся никакой информации.

0

Перевести Поделиться1679Вчера 18:30:20

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7582
Уважение: +6122
Позитив: +6684
Пол: Мужской
Последний визит:
Сегодня 22:08:45

Merlin777, а вот что происходит если уменьшить высоту до вменяемой:

Скриншот

0

Перевести Поделиться1680Вчера 18:30:38

Автор: Амираль
Заслуженный
Зарегистрирован: Вт, 26 Июл 2016
Сообщений: 49
Уважение: +50
Позитив: +17
Последний визит:
Сегодня 22:59:20

kolobdur74 написал(а):

Согласен, но высота при этом настолько большая, что занимает полезное место экрана, не неся никакой информации.

ну на таком масштабе что-то заточенное на длинные реплики или статьи в любом случае неюзабельно, потому что взгляд будет умирать в конвульсиях при попытке найти начало следующей строки (=
но вообще да, как будто хочется по умолчанию отскроллить эту шапку нафиг)

0

Общие вопросы по оформлению (58)	Архив	Чт, 21 Апр 2016
Общие вопросы по оформлению (57)	Архив	Ср, 20 Янв 2016
Общие вопросы по оформлению (62)	Архив	Сб, 26 Авг 2017
Общие вопросы по оформлению (65) #1	Архив	Сб, 19 Дек 2020
Общие вопросы по оформлению (54)	Архив	Пт, 30 Янв 2015

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Общие вопросы по оформлению (65) #2

Сообщений 1661 страница 1680 из 1682

Перевести Поделиться1Сб, 19 Дек 2020 13:24:51