Здравствуйте!
Возможно мой вопрос довольно глупый, но я уже несколько дней бьюсь с этой проблемой и не знаю как ее решить. Дело в том, что шапка на моем тестовом форуме шириной - 1280px (как впрочем и другие элементы: тело, категории). Но проблема в том, что место для форума размером - 830 px.
Что бы форум не выезжал за границы картинки я и сделал его шириной 830 px (в разделе А5.1). Но при этом шапка обрезается по краям на этот же размер. А мне хотелось бы, что бы шапка отображалась корректно и полностью.
Пробовал указывать размер шапки в D1.4, но это проблему не решило.
(Я понимаю, что если ставить столько картинок - это утяжеляет форум, но в данном конкретном случае я хочу понять принцип решения проблемы с шапкой).
Как выровнять форум, когда шапка больше тела
Сообщений 1 страница 3 из 3
Поделиться124.12.23 08:17
Поделиться224.12.23 10:48
William Wilkins
ставь шапку на фон родительского элемента, который НЕ имеет ограничение ширины.
1. почисти код
удали шапку отсюда:
#pun-title { background: url(https://i.postimg.cc/JnGHjVBf/image.jpg) top center no-repeat; }
удали этот фон, он у тебя вставлен в body, непонятно зачем ты его сюда повторяешь:
#pun { background: url(https://i.postimg.cc/NFKF21ZB/image.jpg) top center repeat; }
2. ставь шапку в #pun
#pun {
margin: 0px auto auto auto;
position: relative;
width: 830px;
background: url(https://i.postimg.cc/JnGHjVBf/image.jpg) top center no-repeat;
}
красное - удалить
синее - добавить
3. ширину форума ставь в .punbb
.punbb {
float: center;
width: 100%;
height: auto;
width: 830px;
margin: 0 auto;
}
красное - удалить
синее - добавить
ВНИМАНИЕ!!!
float не может принимать значение "center"!!!
удали эту гадость из своего шаблона, чтоб больше оно тебе не попадалось при создании новых дизайнов.
4. удали margin у менюшек, оно нафиг не нужно:
#pun-navlinks .container {
padding: 0.7em 1em;
text-align: center;
font-weight: bolder;
text-transform: uppercase;
font-family: Lucida Console;margin-top: -120px;
}
#pun-ulinks .container {
border-top: none;
padding: 0.7em 1em;margin-top: -11px;
text-align: center;
font-size: 10px;
text-transform: lowercase;
}
вместо этого надо поправить высоту шапки тут (чтобы она заканчивалась там, где должны быть менюшки):
#pun-title table {
border: none;
height: 572px;
width: 1280px;
}
ширину можно удалить, она не нужна и ни на что не влияет
Поделиться324.12.23 11:04
Gerda
о благодарю! огромное спасибо!