Форум » Вопросы дизайна » Тема взаимопомощи » Ответить
Тема взаимопомощи
Ge-Gra: Для публикации просьб о помощи и ответов на вопросы.
Zoltan: Serifa пишет: А покажите, как оно должны выглядеть хоть? уже не покажу, сделал на форуме проще.. тупо полоса черная шириной 100%, на её фоне посередке шапка с черными краями Serifa пишет: А если можно - еще и код посмотреть. Могут быть неточности, пишу по памяти. Но должно работать Х) <div class='logo1'></div> <div class='logo2'></div> #logo1 { display: block; //отображается, как абзац, чтобы форум не оказался "под шапкой". min-width: 920px; //минимальная ширина блока-заливки, советую ставить пикселей на 10 больше шапки, чтобы её не перекрывало ни в коем случае) max-width: 1200px; // максимальная ширина, блок не будет шире этого значения height:215px; //высота, тут все просто min-height: 100%; //кажется, дописывалось для кроссбраузерности. атрибут, по сути, бесполезный. height: 100%; //см. выше. position: absolute; //позиционируем блок top:10px; //отступ сверху margin:0 auto; //располагаем блок по центру. align=”center” не используем, ибо не пройдем тогда валидатор. Если нужны отступы сверху, то конструкция будет margin:10px auto 0; или margin:10px auto; - отступы сверху и снизу. z-index: 1; //этот слой находится поверх боди, указываем, чтобы потом поверх него налепить шапку. background:black url(/images/BG.gif) repeat-x top left; // заливаем фон черным, потом картинкой, картинка повторяется по оси х и заполняет собой весь блок, используем градиент или безшовку. } Теперь, собсна, шапка #logo2 { display: block; //отображается, как абзац, чтобы форум не оказался "под шапкой". min-width: 900px; //Ширина шапки, необязательный параметр height:215px; //высота, необязательный параметр position: absolute; //позиционируем блок top:10px; //отступ сверху, повторяем отступ предыдущего класса margin:0 auto; //располагаем блок по центру. z-index: 2; //располагаем блок выше предыдущего. background:url('/images/logo.jpg') no-repeat; // лепим на фон картинку, запрещаем ей повторяться. } Вроде, так надо, если не ошибаюсь. Может сбоить в ФФ 2 и IE 6, но не факт, что сбоит чума на голову узких мониторов хD фсе, на моники уже 780px мой форум не расчитан, даж винда грит, что при таком разрешении елементы могут не поместиться на экран!
Serifa: Надо как-то эту тему выделить или прицепить, чтобы камрады учились. А ссылки на самые ценные посты скопировать в первый пост)) Благодарю, Zoltan! За вклад в наше общее дело!
Zoltan: Serifa вы сначала проверьте на работоспособность хD я бы сам глянул, да уже моск слабо варит, спать хочу Классы вынести в css, естессна, или выделить тегами стайл, эт понятно, надеюсь... вообще, и вам спасибо :) Обращайтесь, если что) П.с. код с дивами вставить практически в любое место шаблона, можно перед тегом </body>, не раньше <body>.
Serifa: Ага, потренируемся на кошках) Не факт, что я стану делать эту шапку, меня заморочки с дизайном достали конкретно, я от них отдохнуть хочу. Zoltan пишет: на моники уже 780px мой форум не расчитан, даж винда грит, что при таком разрешении елементы могут не поместиться на экран! Но такие моники существуют. У меня мастер и модератор с таким разрешением живет, а что поделать? Я для него специально боковые блоки делаю убирающимися.
Khaion: Как вариант еще можно воспользоваться скриптом, определяющим разрешение монитора, и в зависимости от этого подгружать нужный участок кода с соответствующей разрешению шапкой. Решения-то всегда найдутся, только - оно так сильно надо, такие заморочки? 8) Да, можно, извратившись, реализовать мегашапку с неповторяющейся картинкой. Только смысл 8) Если очень смущает пустое место на больших мониторах, можно туда вставить какие-нибудь менюшки, блоки новостей и т.п. Честно говоря, не совсем понимаю, в чем проблема 8) Если есть конкретный дизайн, который надо реализовать, - так надо по нему и смотреть, как лучше сделать, как малой кровью обойтись. Способов-то много. А вообще, вот: Адаптивная разметка - статья
Zoltan: Serifa пишет: Ага, потренируемся на кошках) можно просто создать отдельный хтмл-файл и в нем проверить ) Так, проверил... Zoltan пишет: position: absolute; //позиционируем блок Не работает с margin:0 auto; Решение - не используем либо то, либо то хD Либо позиционирование стираем и втыкаем <div class='logo1'></div> сразу после <body>, либо позиционируем так position: absolute; top: 0; left: 10%; right:10%; Поясню, мы делаем одинаковые отступы слева и справа, по 10% монитора, т.е шапка будет по центру все равно) Так, лайв-демо. Общий вес графики 56,7 КБ (58 083 байт) http://dark-role.ru/demo/1.html Все видно в исходном коде ;) Отображет только общий принцип, лень было графику рисовать, чтоб безшовно и фоном слилось хрень сбоку к шапке никакого отношения не имеет хD Эт для тех, кто не хочет ставить копирайты иксменгейма Khaion пишет: Как вариант еще можно воспользоваться скриптом, определяющим разрешение монитора, и в зависимости от этого подгружать нужный участок кода с соответствующей разрешению шапкой. Жуть) Serifa пишет: Но такие моники существуют. У меня мастер и модератор с таким разрешением живет, а что поделать? не ну.. это нефарт( хех.. у меня бы глаза выкотились от такого разрешения, вчера ставил, в шоке был в принципе, при таком разрешении у меня пару элементов просто перестанут быть кликабельными, т.к заползут под форум.. хех..
Serifa: Zoltan, а почему невеста в черном?)) И выглядит как монашка. Что-то не мой вариант. В смысле, шапки. Таблицу с бэкгроундом я и раньше добавляла (а в центре - картинку) - но все ломается на выборе рисунка для фона. Мне же надо, чтобы края красиво сливались с фоном таблицы форума... или становились прозрачными... Кстати, картинку в центре можно сделать и в пнг, она же небольшая и весить много не будет. Допустим, левый край (фона) по любому можно так оформить. А что делать с правым, если при разных разрешениях экрана фон будет резаться? Я даже делала так: сделать три ячейки таблица, в левой - левый край, в правой - правый край, в центре - картинку, которая повторяется. Пробовала, результат отвратный. Центральная картинка отображается нормально, а левые-правые - с каким-то незапланированным отступом сверху-снизу, плюс рисунок не совпадает, если таблица начинает ужиматься. Khaion пишет: Как вариант еще можно воспользоваться скриптом, определяющим разрешение монитора, и в зависимости от этого подгружать нужный участок кода с соответствующей разрешению шапкой.
полная версия страницы