sigma77

Второй вариант именно так и сделан. Тут честно, не могу согласиться. css + js: 1) Если нужно, чтобы при отключенном js фоны совпадали, а прокрутка не важна, то fixed фон и прокрутка в js 2) Если нужно, чтобы при отключенном js была прокрутка фона, а совпадение фонов не важно, то scroll + позиционирование фона в js Ёлки-палки какой еще нафиг плагиат. Хватит уже спорить друг с другом.

Не, тут сделано по-другому. Тут обычный фон, но внутри списка он смещается на величину координат верхнего левого угла подсписка. Т.е. по принципу Softlink'а, но всё считается автоматически. Твой вариант предполагает слишком много гемороя при поддержки. Из серии "ищу работу". Ну задал ты жесткие размеры и что? Малейшее изменение хоть одного из них предполагает перелопачивание кучи кода. В идеале после сдачи проекта от верстальщика вообще ничего не должно требоваться править в случае каких-либо изменений, добавления контента и т.п. Тем более такой мелочи, как добавление одного пункта.

Вариант 2 В полном окне - http://jsfiddle.net/4TEzc/8/embedded/result/'>http://jsfiddle.net/4TEzc/8/embedded/result/ с кодом - http://jsfiddle.net/4TEzc/8/ Проблемы тебе будет ПМ или заказчик придумывать. Минусы твоего решения мы изложили.

Тогда уж олдскульный, хардкорный конкурс - html3.2, css1, таблицы, фреймы и <font>. Браузеры до ИЕ5.5., FF1 и т.д.

$(window).scroll(function() { // При прокрутке окна var scT = $(this).scrollTop(); // получаем вертикальное смещение скрола $('body').css({'background-position' : '0 ' + (-scT) + 'px'}); // соответственно с полученным значением // смещаем фон верх на это количество единиц $('#inner').css({'background-position' : '0 ' + (-scT) + 'px'}); // аналогично });

С прокруткой (набросок) - http://jsfiddle.net/4TEzc/6/embedded/result/ Есть идея и о 2-м варианте. Если прокатит позже тоже выложу.

Ага "ты туда не ходи, ты сюда ходи..." Ну тут либо хорошо и надежно, либо без js.

Да получила, я позже отвечу. Шрифты отличаются и не только на мак, есть еще линукс. Там еще больший геморой со шрифтами. fixed Сегодня не добавляются - завтра добавились. Если есть скрол и при этом нужна прокрутка фона, то js.

В готовом проекте, для того чтобы просто добавить пункт меню никто верстальщика обычно не зовет. Всё делается средствами CMS и хорошо, если это будет делать хотя бы контентщик. И вот если при этом что-то поедет, то это будет твой косяк.

Ты про то что фон скролиться не будет? Ну так это да. Тут скорее всего только js поможет. Ну а так сколько пунктов не добавляй фоны будут совпадать - http://jsfiddle.net/4TEzc/embedded/result/

Про какой скрол ты говоришь? Хоть 2 сотни. Разницы нету. Или мы о разных вещах говорим. По скриншоту не фига ничего не понятно.

Ну если так рассуждать. То psd --> save for web ---> <img src="" />, делов-то

Про первый. Второй же я видела Да fixed тут, имхо, оптимальное решение.

Да посмотрела. Не годится. Там ты, видимо, забыл добавить отображение абсолютного дива? Ну и сейчас у тебя абсолютное позиционирование привязано к окну браузера. Но если внутри появятся относительно позиционированные элементы, всё это нафиг поедет. Макет он ниразу не статичен. Он не верстается раз и навсегда. Завтра к тебе подойдет заказчик/руководителя и скажет "давай сдвинем блок не на 150px, а на 160px, так лучше смотрится" или "а вот тут у нас появится новый блок, а этот мы перенесем вот сюда" ну и т.п. А тут еще нерадивый пользователь захотел поменять себе шрифты. Это случается постоянно и это надо предусматривать, а не искать на свою голову лишнюю работу . background-attachment: fixed, который предложил SelenIt В этом случае точкой отсчета позиционирования фона будет не верхний левый угол элемента, а верхний левый угол браузера. Соответственно будет полное наложение фонов.

Softlink, Это плохое решение. Т.к. при малейшем сдвиге вложенного списка, нужно опять ловить background-position. С fixed этой проблемы нет, т.к. точка отсчета всегда будет одна и та же - верхний угол окна браузера.

Да, Мейер больше фундаментально пишет. Т.е. как это должно работать в идеале. Если хорошо с английским, то можешь почитать эту книгу - http://books.google.com/books?id=l3dGJn3NydUC&printsec=frontcover&dq=mcfarland&hl=ru&ei=UgAUTtqrBI6gOr-p3aIL&sa=X&oi=book_result&ct=result&resnum=3&ved=0CEYQ6AEwAg#v=onepage&q&f=false Там как раз описаны все основные баги ИЕ6/7 и способы их решения. И в целом книга очень хорошая для новичков. Рассказано как верстать отдельные элементы, например меню (горизонтальные, вертикальные), списки, таблицы, основные разметки сайтов. Есть самостоятельные упражнение. Т.е. упор больше делается на практику. Теории, как у Мейера там не так много. На русском она выходила под названием "Большая книга CSS"

Тут я не соглашусь. Хорошая книга актуальна долгое время. Взять того же Мейера или Фленагана. Некоторые вещи, конечно, могут терять свою актуальность. Но основа то остается. Тот же html4.01 уже более 10 лет держится , CSS2.1 чуть меньше, но тоже достаточно долго. Html5 и css3 - это просто новый уровень. База остаётся та же. Ширится поддержка браузерами, умирают старые браузеры, но имея прочный фундамент освоить нововведения уже проще.

Ссылки тебе уже SelenIT привел. Могу добавить еще http://www.positioniseverything.net/explorer.html, http://www.alistapart.com/, табличку поддержки селекторов http://www.quirksmode.org/compatibility.html (перевод - http://alexbard.org.ua/quirk/compatibility.html), давно уже, правда, не обновлявшийся http://xhtml.ru/ http://chikuyonok.ru/ А так про многие баги я прочитала в том числе из книг - "Каскадные таблицы стилей" Э. Мейера, "Большая книга CSS" Макфарланда, Пуленепробиваемый WEB-дизайн Дэна Седерхольма Ну и решение багов по мере их возникновения По hasLayout у Влада тоже недавно статья проходила: http://htmlbook.ru/blog/obzor-haslayout http://htmlbook.ru/css/haslayout

А можно еще раз для тех кто в танке, а то я что-то сути спора не уловлю никак. 1. В чем отличие http://psywalker.ru/Forum/Menu/Menu-fon/1.html и http://psywalker.ru/Forum/Menu/Menu-fon/2.html, кроме того что ограничена ширина боди и задана ширина вложенному списку. 2. Чем п.1. принципиально отличается от варианта, предложенного SelenIT, кроме того что у него и в боди фон фиксированный. 3. И последний главный вопрос. Почему всё-таки fixed не устраивает?

kent666, Если я правильно поняла по описанию, то это схлопывание вертикальных марджинов http://www.xiper.net/learn/css/box-model/margin-collapsing.html http://www.google.ru/search?q=%D1%81%D1%85%D0%BB%D0%BE%D0%BF%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5+margin&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ru:official&client=firefox

Всё до чего дотягивались руки - книги, статьи, блоги. Первые материалы, как помню (давно это было), были справочники тегов, потом нашла пошаговый курс. Где по этапам рассказывалось, как применять те или иные теги. О CSS тогда и не слышала. Потом наткнулась на htmlbook - и понеслось Да. Кусочек прочитаю, пытаюсь на его основе и полученных знаний что-то сделать. Прочитала например про оформление текста, делаю практический пример, пытаюсь по разному комбинировать стили, смотрю, что получается и как ведут себя стили. По настоящему первая законченная верстка по макету была сделана относительно не так давно - года 2 назад. До этого были конечно попытки сверстать сайты, но я их серьёзно не воспринимаю. Это была дико табличная верстка, с font и прочими прелестями. Хотя в итоге не так уж и плохо выходило

kent666, код мы сами угадаем?

Читала - верстала, опять читала - верстала. Так до сих пор учусь.

eloty, Попова лучше не смотреть. Лучше хорошие книжки читать. А будут вопросы - задавать их на форуме. Если нужны задания, то тут тоже они есть - http://htmlbook.ru/practical, ну и самому можно придумывать себе задания. Увидел где-то интересно сделанную вещь - попытайся сам сделать аналогичное.

Первый код применится только к <div id="status-bar">, второй же может быть применен к любому элементу у которого id="status-bar". Лучше без лишней необходимости первую запись не использовать. Т.к. никогда не известно к какому элементу придется применить правило в будущем.