Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (65)
Предыдущая тема: Общие вопросы по оформлению (64)
Как с помощью браузера можно определить элемент дизайна. | |
Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS. | |
Ответы на часто задаваемые вопросы. | |
Как задавать вопросы! Разница между стилем и скриптом. ( Советы) | Плюс к названию темы еще и Памятка. |
Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности. |
kolobdur74
Что ж, попробую. Спасибо!
Подобное можно реализовать опять таки через flex, если через css..
К сожалению, мне не удалось эту идею реализовать, так как не разобрался с механикой флекса. Пришлось от нее отказаться. Но все равно спасибо, что отозвались на мой вопрос.
Параллельно задам следующий вопрос: Что делать при таком случае, который изображен на скрине?
Рассказываю ситуацию:
Я использовал метатег <meta name="viewport" content="width=device-width, initial-scale=1"> для того, чтобы выровнять стиль. К примеру, когда заходишь на форум с мобильного устройства и начинаешь писать сообщение в тему, то при наличии этого метатега текстовое поле перестает растягиваться и больше не перекрывает собой кнопки "Отправить" и "Посмотреть". Но побочным эффектом стала "урезка" логотипа, который я достал из шапки и поместил в тело. Вот код как это выглядит:
html {
background: url("картинка фона"); !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
background-color: transparent # 000;
background-size: cover;
}body {
background: transparent url("картинка логотипа") no-repeat top center !important;
padding-top: 350px !important;
margin-top: 0px !important;
}
С пк все выглядит, как должно выглядеть, но вот не с мобильного устройства. Пробовал смотреть с разных браузеров, подозревая сначала "неисправность" их работы. Но теперь понимаю, что дело совсем в другом. И не знаю, как это исправить, да.
Я использовал метатег <meta name="viewport" content="width=device-width, initial-scale=1">
Этот метатег и так установлен на сервисе:
Вот код как это выглядит
Адрес форума на посмотреть?
Здесь ошибка:
background: url("картинка фона"); !important;
url("картинка фона") - кавычки лишнее..
background-size: cover;
Ковер так себе решение..
Две ошибки:
background-color: transparent # 000;
1. либо transparen, либо цвет (то бишь либо прозрачное, либо цвет)..
2. # 000 - # пишется без пробела.
К сожалению, мне не удалось эту идею реализовать, так как не разобрался с механикой флекса.
Он не такой уж сложный, но щас я вам на пальцах о нем не расскажу.. Не раньше зимы во всяком случае..
Отредактировано kolobdur74 (Вт, 17 Сен 2019 17:14:04)
Этот метатег и так установлен на сервисе:
Странно... Тогда почему возникают такие накладки текстового поля на кнопки и как с ними разобраться?
Адрес форума на посмотреть?
1. либо transparen, либо цвет (то бишь либо прозрачное, либо цвет)..
2. # 000 - # пишется без пробела.
Потому и сделал пробел, чтобы цвет не читался, но убирать его самого не стал)
Он не такой уж сложный, но щас я вам на пальцах о нем не расскажу.. Не раньше зимы во всяком случае..
Что ж, тогда у меня есть резон подождать)
Потому и сделал пробел, чтобы цвет не читался, но убирать его самого не стал)
Очень много лишнего кода - считайте хлама, в итоге сами будете путаться, лучше сохраняйте версии всего кода после изменений на компе в Notepade++..
По поводу проблемы с шапкой, у вас по ходу телефон с очень низким разрешением, ну и боди лучше в данном случае не трогать, попробуйте заменить это:
body {
background: transparent url("картинка логотипа") no-repeat top center !important;
padding-top: 350px !important;
margin-top: 0px !important;
}
На такой код:
#pun_wrap {
background: transparent url(http://s9.uploads.ru/h2Gvi.png) no-repeat top center !important;
padding-top: 350px !important;
width: 960px;
margin: 0 auto;
}И еще не используйте так много импортантов - рано или поздно это выйдет боком.. Если нет необходимости в использовании импортанта не используйте его, а его необходимость в нем в процентах 90 нету.
Странно... Тогда почему возникают такие накладки текстового поля на кнопки и как с ними разобраться?
Скиньте скриншот как это выглядит у вас и дайте доступ гостю писать в тестовом форуме, чтобы самому посмотреть..
За !important подмечено верно.
За !important подмечено верно.
Я бы вообще начинающим верстальщикам настоятельно рекомендовал о нем забыть, он больше создает вред, чем пользу, когда не совсем понимают как его применять правильно..
Jolt, по поводу импортантов, кстати, советую ознакомиться: Правила приоритетов в CSS
И еще не используйте так много импортантов - рано или поздно это выйдет боком.. Если нет необходимости в использовании импортанта не используйте его, а его необходимость в нем в процентах 90 нету.
Хорошо, запомню.
Скиньте скриншот как это выглядит у вас и дайте доступ гостю писать в тестовом форуме, чтобы самому посмотреть..
Доступ дал. Скриншот:
Jolt, ну это проблема конкретного девайса.. Ну, можно попробовать увеличить низ форума, чтобы клавиатура не перекрывала кнопки, попробуйте такой вариант:
@media screen and (max-width: 540px) {
#pun-viewtopic #pun-crumbs2 {padding-top: 100px;}
}Величину отступа подберите нужную..
kolobdur74
@media screen and (max-width: 540px) {
#pun-viewtopic #pun-crumbs2 {padding-top: 100px;}
}
Этот вариант мне не помог. Зато изменив код шапки на этот, что вы предложили мне:
#pun_wrap {
background: transparent url(картинка логотипа) no-repeat top center !important;
padding-top: 350px !important;
width: 960px;
margin: 0 auto;
}
И совместив его с метатегом (пусть и его повторной вставкой в общий код): <meta name="viewport" content="width=device-width, initial-scale=1"> - и все заработало как надо!
Огромное спасибо за помощь)
Помогите, пожалуйста, подкорректировать скрипт Дайсы для ф-рпг, применение. Хотелось бы его упросить.
1. Оставив только возможность кидать кубик с кнопки из заранее прописанных Вариантов. (Кубик под формой ответа) В идеале перенести его над форму ответа.
2. Чтобы при этом результат броска выглядел так а не так. (т.е. горизонтально и без нумерации)
3. В посте, убрать кнопку "Показать все результаты."
Нужен максимально простой вариант, чтобы по клику на кубик выпадало случайное число от 1 до 20. (d20) без лишней информации и без лишних движений.
Форум для теста Логин через пиар вход
Отредактировано Эйфория (Вт, 24 Сен 2019 12:25:22)
Кукусики, хорошие. Возникла проблема с оформлением линии hr.
/* Линия разделитель */
hr {
border: 1px dotted #2b2e27 !important;}Вроде больше нигде никакой код не стоит, но я скорей всего идиот. Хочу поменять на двойную линию, но ее размер не соответствует желаемому. Если убрать размер такая же широкая сплошная линия выходит.
Хочется сделать двойную линию, не не выходит, где-то что-то мешает. Помогите, пожалуйста.
Ссылка на тему: http://testblin01.0pk.ru/viewtopic.php?id=50#p170 – есть доступ для гостя.
Отредактировано Эвелина Шайн (Чт, 26 Сен 2019 12:34:12)
Хочется сделать двойную линию, не не выходит, где-то что-то мешает.
hr {
border-top: 4px double #2b2e27;
}kolobdur74
Спасибо!
Как тут можно убрать бордюр и сделать эти аватарки квадратными?
Ссылка: http://testblin01.0pk.ru/userlist.php
Как тут можно убрать бордюр и сделать эти аватарки квадратными?
#pun-userlist.punbb .user-avatar img.ava {
border: none !important;
border-radius: 0;
}kolobdur74
То что надо, спасибо!
Ссылка на тему: http://testblin01.0pk.ru/viewtopic.php?id=39#p101
Не получается поправить оформление, чтобы картинка наград не наползала на нижний бордюр.
Как всейчас
------------>
Как хочется
Помогите, пожалуйста!
Эвелина Шайн
В HTML-верх:
.post-autor-Sp
{
padding-bottom: 10px;
}
Имеем:
Ставим значение
Получаем:
Не получается поправить оформление, чтобы картинка наград не наползала на нижний бордюр.
Замените здесь:
/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
padding: 0 1em 1em 1em;
line-height: 135%;}
На 3em..
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (65)