Enima, предлагаю убрать из шапки эту табличку, которая поперёк себя шире, и поставить львёнка фоном... например, #pun_wrap
Только там нужно будет с отступами верхних менюшек поиграться, тоже их через vh сделать.
Как сделать градиентный фон и исправить шаблон (CSS)
Сообщений 11 страница 20 из 27
Поделиться1108.12.22 15:00
Поделиться1208.12.22 15:29
satsana
Все, конечно, хорошо, но стоит учитывать, что я не ас в вёрстке
Собственно поэтому и задаю вопросы
Покручу дома и ещё постараюсь догнать на нубском, что вы и где имеете ввиду 😅
Поделиться1308.12.22 19:32
kozhilya
мерси, пока самый подходящий выход
satsana
border-image стал открытием
благодарю что указали на этот способ
overflow-x: hidden
вроде тоже подкорректировала
Enima, предлагаю убрать из шапки эту табличку, которая поперёк себя шире, и поставить львёнка фоном... например, #pun_wrap
а вот что здесь имели ввиду до меня так и не дошло
Поделиться1408.12.22 19:46
и снова вопрос
фон зафиксирован
на компе смотрится так
на телефоне
как сделать что б и на телефоне он был зафиксирована не прилипал кверху и по больше части не скрывался за шапкой
Поделиться1509.12.22 09:01
а вот что здесь имели ввиду до меня так и не дошло
Я имела в виду, что у вас эта картинка стоит в блоке #title-logo-table, и блок этот заметно шире тела форума. Это... плохое решение. Вообще любые элементы, выступающие за основную ширину - плохое решение. Всё, что выступает слева, спрячется за край экрана. А вот выступающее справа сделает лишний отступ (именно его и пытался спрятать за overflow-x: hidden разработчик вашего шаблона) и как следствие - асимметрию. Ну разве что вы абсолютно точно знаете, что-зачем-куда у вас выступает, это действительно нужно, и в ширине body (либо в отступах внутренних блоков от края) это учтено. А вот любые фоны, выходящие за ширину экрана, нужно ставить либо в body, либо в блок, ширина которого равна ширине body. Ну да, я знаю, что это не ваша ошибка. Просто тот, кто написал используемый вами шаблон, об этом явно не знал... либо просто не хватило фантазии поставить шапку по-другому.
как сделать что б и на телефоне он был зафиксирована не прилипал кверху
Попробуйте поменять позиционирование фона на bottom, а background-size на cover.
Поделиться1609.12.22 09:19
Любые фоны, выходящие за ширину экрана,
тут вопрос разрешения экрана, у меня на ноуте мелкий, у большинства игроков он 1920, размер шапки как раз из этого учета, что бы по бокам не было голого пространства
Поделиться1709.12.22 09:38
тут вопрос разрешения экрана
Тут вопрос того, чтобы при более мелком разрешении всё равно ничего за край не вылезало. И потом, большинство у нас со смартфонами в кармане (на момент рождения этого шаблона такого не было). А на телефонах лишний отступ справа очень даже видно. Даже с отключенной прокруткой.
Поделиться1809.12.22 09:57
#p177359,Enima написал(а):тут вопрос разрешения экрана
Тут вопрос того, чтобы при более мелком разрешении всё равно ничего за край не вылезало. И потом, большинство у нас со смартфонами в кармане (на момент рождения этого шаблона такого не было). А на телефонах лишний отступ справа очень даже видно. Даже с отключенной прокруткой.
Это да, хотя в этом плане мне лично дискомфорта не доставляет. Все равно приближаешь со смартфона если нет мобильного стиля. Вот по последнему вообще хороший бы урок хотелось, а то разборы хорошие и подробные выходят только тогда, когда уже устаревает все
Поделиться1909.12.22 10:43
Enima, в мобильном стиле как таковом ничего сложного или даже особенного нет, по сути он ничем не отличается от адаптации под разную ширину десктопных мониторов. Никакие особенные разборы для его освоения не нужны. Нужно:
1) Осознать, что таки не у всех ширина монитора 1920px. А некоторые далеко не всегда разворачивают браузер на весь монитор. А ещё у некоторых плохое зрение, и они увеличивают масштаб...
2) Покрутить туда-сюда масштаб в браузере, чтобы понять, как тот или иной сайт отображается при разном разрешении. Свернуть браузер в окошко, уменьшить ширину так, чтобы она стала меньше высоты.
3) Ужаснуться, удалить к хаккаровой бабушке кривой шаблон, устаревший уже лет 10 как. Написать свой шаблон.
4) При написании шаблона всеми возможными способами избегать ширины в пикселях для блоков, ширина которых будет зависеть от ширины окна браузера. Использовать проценты от ширины родительского блока или окна браузера (% и vw), функцию calc. Вообще не прописывать ширину там, где она может подстроиться сама с учётом margin и padding. (Получится т.н. "резинка".)
5) Повторить п.2 для своего шаблона. Посмотреть, при какой ширине что-то перестаёт вас устраивать.
6) Использовать media screen для изменения отображения (или вовсе скрытия) отдельных элементов при ширине монитора больше или меньше заданной. (А вот это уже адаптив.)
Собственно, всё. Самый сложный пункт (и по сути единственно важный) - написать с нуля свой шаблон. После этого в css не останется ничего сложного.
Поделиться2009.12.22 11:47
satsana
большое спасибо за развернутый ответ, почитала с удовольствием