Нэнси Малина
Нэнси Малина написал(а):что делать? неужели это из-за фиксированного фона? или это потому, что ширина форума у меня задана 1202? так ведь это помещается на ноут. Помогите исправить.
Уф. У вас там в настройках стиля такой велосипед на реактивной тяге и с дюжиной колес разного калибра и масти изобретен, что черт переломает не то что ноги, но и рога, и даже зверски подвешенный язык о_О.
Давайте разбираться.
Во-первых, запомните на будущее. Маргины, которые двигают вправо/влево - чудовищно коварные штуки, потому что отпихнув на своем широкоформатном мониторе блок влево на каких-то там 400 пикселей, чтобы посерединке встал, вы его для планшетника зафутболите в соседнюю галактику. Именно поэтому нужно всячески избегать пинать контейнеры посредством маргина, отсчет у которых идет не от родительского элемента, а от печки окна монитора. А уж если вам элемент нужно всего лишь расположить посередине, то тем более нет никакого смысла определять эту серединку на глазок, подбирая отступ по пикселям. Оставьте эту задачу предусмотренному свойству: margin: auto.
Во-вторых, не насилуйте чужой трафик. Зачем вам вот такое футбольное поле в качестве задника, если здесь явно и легко вычленяется повторяемый фрагмент? И это я его еще очень высоким сделал. Можно вообще в один пиксель соорудить. Поверьте, результат будет категорически тот же, а вот вес дизайна - заметно меньше.
В-третьих, возьмите на вооружение. Чтобы у окна браузера была только вертикальная прокрутка, а горизонтальной не было, даже, если картинки дизайна шире, чем монитор у пользователя, необходимо добавлять к body свойство overflow-x со значением hidden. Тем самым вы запретите горизонтальную прокрутку (по оси х), но не любую, а только для окна с форумом.
В-четвертых, разберем, что и где у вас задано лишнее, а что, где и зачем нужно добавить, чтобы получилось, как задумано, для любого пользователя.
Итак, слева ваши части кода, справа - то, как они должны выглядеть.
html, body { margin: 0px; padding: 0px; background: url("http://s5.uploads.ru/pAnds.jpg") repeat fixed center top rgb(254, 212, 152); } | html, body { margin: 0px; padding: 0px; background: url("http://savepic.net/3804981.jpg") repeat fixed center top rgb(254, 212, 152); /*новая картинка задника; делал на коленке, переделайте сами, чтобы качество было хорошее*/ } |
#pun { margin: 0px auto 0px 350px; position: relative; width: 1201px; background: url("http://s5.uploads.ru/hN1H5.jpg") repeat-y scroll center top transparent; } | #pun { margin: auto; /*убираем все настройки маргина для таблицы форума и центрируем автоматически*/ position: relative; width: 1201px; background: url("http://s5.uploads.ru/hN1H5.jpg") repeat scroll center top transparent; } |
.punbb { float: left; width: 1201px; height: auto; margin-left: 170px; /*убираем отступ*/ } | .punbb { float: left; width: 100%; /*меняем единицы измерения ширины с пикселей на проценты*/ height: auto; } |
#pun-navlinks > .container, #pun-ulinks > .container, #pun-announcement > .container, #pun-status > .container, #pun-break1, #pun-crumbs1 > .container, #pun-break2, #pun-main, #pun-stats, #tieser-bottom, #pun-break3, #pun-crumbs2 > .container, #pun-break4, #pun-about, #html-footer > .container { padding-right: 340px !important; } | #pun-navlinks > .container, #pun-ulinks > .container, #pun-announcement > .container, #pun-status > .container, #pun-break1, #pun-crumbs1 > .container, #pun-break2, #pun-main, #pun-stats, #tieser-bottom, #pun-break3, #pun-crumbs2 > .container, #pun-break4, #pun-about, #html-footer > .container { padding: 0px 180px !important; /*вместо однобокого, задаем одинаковые отступы справа и слева для всех перечисленных контейнеров*/ } |
#pun-title { margin: 0px 140px 140px -171px; /*убираем все отступы*/ border-style: solid solid none; border-width: 1px 1px 0px; background: url("http://s4.uploads.ru/NAUVm.jpg") no-repeat scroll center top transparent; width: 1201px; /*убираем ширину*/ height: 498px; } | #pun-title { border-style: none; /не знаю, зачем вам рамка вокруг логотипа, но, думаю, она вам не нужна; если хотите сохранить, оставляйте свои красные и зеленые настройки/ border-width: 0px; background: url("http://s4.uploads.ru/NAUVm.jpg") no-repeat scroll center top transparent; height: 498px; } |
#pun-navlinks, #pun-navlinks .container { border-style: none; border-width: 0px; margin-top: -167px; text-align: center; } | #pun-navlinks, #pun-navlinks .container { border-style: none; border-width: 0px; margin-top: -20px; /*помещаем навигационную панель на ее место на логотипе*/ text-align: center; } |
#pun-ulinks { margin-top: -25px; text-align: center; } | #pun-ulinks { margin-top: -10px; /*выравниваем пользовательское меню*/ text-align: center; } |
Отредактировано Remus John Lupin (Сб, 17 Авг 2013 22:32:08)