mishka

Да разбей же ты наконец-то сайт по страничкам. Ну это просто ппц какой-то читать полотно. И навигацию нормальную сделай, которую не нужно будет постоянно открывать. А за статьи спасибо, но приведи сайт в удобный вид.

Не если пиксель в пиксель то можно и пару дней покопаться. Если вы говорите что за 16 часов, то это либо вы убьёте на это все выходные, что врятли. Либо будете делать 3-4 дня. Для фриланса вполне нормально, но на самом деле быстрее делается. Я не фрилансер, я такой же "раб", поэтому адекватно оцениваю: 8 часов (я бы за столько это сделал в офисе) быстро, но врядли продуманно. 16 часов (я бы за столько это сделал дома как левак) - вполне нормально.

На работе, клавы у всех "красные". Пидалят как немые. Но далеко не всегда код хороший. Делают побыстрее. Вот в офисе это 8 часов. 1н рабочий день. Дома есть холодильник, телевизор и время подумать. Дома я это сделаю за 2 дня, но лучше. + дома я не заморачиваюсь над валидностью css, я делаю так как железно будет работать, а не так как придумать переподвыперд ради валидности. Для примера, тот же zoom: 1 для ие<8, не валиден, но зато отработает всегда и без багов. + студия сделает за 8 часов, но дороже.

На работе - 8 часов. ИЕ6+. Дома - 16, ИЕ6+ , код лучше.

чтобы оценить, дизайна мало, нужно еще и требования написать. - резина/фикс - поддержка браузеров - доктайп - что это за фон, как он себя вести должен. - что делать с нестандартными шрифтами. - что делать с нестандартными радиобоксами. - паравозик тоже растягивать? Может кто дополнит список. около 16 часов

SelenIT, вобщем ты прав. Я пришел к выводу что если поддерживать ие6-8, то написать общий джс, и не парится. И стили задавать через класс, а не через :target При загрузке проверить хеш, и в случае если есть блок соответствующий ":target", то добавить нужный класс, и этот блок запомнить как активный. Линкам которые предназначены для открытия аккордеона, задать определенный класс, и по этому классу навесить функцию на клик. При клике на линку снять класс с активного блока, добавить его нужному блоку, и этот блок запомнить как активный. Это будет не так громоздко как я сделал выше.

но на самом деле можно и без джс обойтись. http://jsfiddle.net/etYWp/10/

Как показала практика, лучше всего качать архивы(любой), распаковывать и пользоваться версией unicode, и проблем не будет ни с символами, ни с плагинами.

Ну я же говорил что слепил то что нашел: http://www.davidpirek.com/blog/on-hash-change-javascript-listener http://y3x.ru/2011/06/hashchange/ Почему здесь автор в hash проверяет именно "?" - пока не знаю. Понятно что hash может быть с параметрами, но они не только вопросительным знаком могут разделятся. Если считаешь что ветвить алгоритм не стоит, то пусть так вот в условных коментариях и остается. Ток порядок в коде навести нужно, так как это по-быстрому клепалось. Можно было бы и для всех браузеров оставить, но в ФФ видно дергание - пока обрабатывается джс на доли секунды видно оба открытых блока. Некрасиво.

cycle позиционирует слайды абсолютами. Поэтому нужно меняющимся блокам задать ширину 100%, и в них картинку выровнять по центру, либо с помощью display: block; margin: 0 auto; либо text-align: center;

Как определить поддержку браузером псевдокласа? Тоесть мне нужно проверить: если :target поддерживается - то никакого js, иначе - запускаем скрипт который реагирует на hashchange и ставит на блок который я вляется ":target" определенный класс, и стили применяем через этот класс. Для браузеров не поддерживающих hashchange эмулируем его с помощью бесконечного повторение функции через setTimeout Пока что нагуглил и слепил такое:

Или с просьбой хотябы оставить линку на htmlbook.ru

здается мне что в твоем случае нужно заказать верстку. А сам пока попрактикуйся на не коммерческих проектах.

Всеже юзай пнг, так как я присмотрелся и увидел там радиальный градиент. Или ты без него сделал? http://jsfiddle.net/BUAuu/ Тут конечно, мягко говоря не пиксель перфект, но суть ясна. И по верхней тени видно что джипег тут не подойдет. Делай пнг, как в первом моем примере. картинки хоть и в пнг формате, они без полупрозрачных областей просто "резал" не в фотошопе, а с помощью проги для скринов, даже не резал, а просто сделал скрины. Можно было и подредактировать, но было лень. http://lightshot.skillbrains.com/

Я выше привел вариант для блока с пнг тенями с поддержкой ие6 включительно. Чем не подошел? Но тут можно и без пнг обойтись. Значит 3 вложенных блока, каждому кусок тени, центральная часть на самом верхнем, репитится по вертикали. Кусочки нижней и верхней тени на вложенных блоках. Или так как ты предложил. Пробуй варианты, потом сам остановишься на том который тебе более всего понравится.

http://jsfiddle.net/XfYwe/5/ http://jsfiddle.net/XfYwe/9/ - добавил коментарии

http://forum.htmlbook.ru/index.php?showtopic=13589

http://forum.htmlbook.ru/index.php?showtopic=28911 Наверное самым верным способом будет не делать пробелов между элементами: <ul> <li> <a href="#">asd</a> </li><li> <a href="#">asdfdg asdasd</a> </li><li> <a href="#">awdawdawd awdad</a> </li><li> <a href="#">awdawdaw da</a> </li><li> <a href="#">wdwd</a> </li> </ul> display: table на родителе не всегда можно применить.

Да кому оно надо кроме тебя? давай так линку, дело быстрее будет.

сделайте на бади бекграунд #1c1f24, вместо #504E4E. Не красиво смотрится на широком мониторе.

со временем я тоже стал думать о чем-то типа БЭМ. Даже на маленьких сайтах появилась привычка давать такие классы, с приставкой по их родителю. Если это логотип в хедере, то он у меня ".h-logo", или меню: ".h-nav", меню в сайдбаре ".s-nav". Я чувствовал необходимость такого подхода, но незнал как это сделать лучше. Когда узнал про БЭМ, мне эта идея очень понравилась. Насчет дилетанства в наименовании классов - бред. Такое мог сказать человек который только и делает маленькую страничку с css до 1000 строк, в таком формате: div { width: 500px; margin: ...; padding: ...; } А когда с талкиваешся с тем что нужно проапдейтить проект, а в нем все сделанно полагаясь на каскадность, как говорит предыдущий автор и ты видишь такой код: <form action="#"> <fieldset> <div class="hold-text"> <div><input type="text" /></div> </div> </fieldset> </form> .hold-text { width: ...; background: ...; ..... } .hold-text div { padding: ...; background: ...; ..... } .hold-text input { ... } И тут нужно рядом с инпутом всунуть еще блок с непростой структурой, у него внутри еще пара блоков будет то тогда приходится писать: .hold-text .message { padding: auto; float: none; margin: auto; .... } .hold-text .message .m-frame { padding: auto; float: none; margin: auto; .... } Этот минимализм оправдан разве что в примерах, когда нужно кому-то показать как что работает, поэтому быстро набросал и показал. Но к сожалению многие это примут за чистую монету, и сами тоже начинают страдать минимализмом. Вот пример спискозадротов: <div class="gallery"> <ul> <li><img src="" alt=""/></li> <li><img src="" alt=""/></li> <li><img src="" alt=""/></li> </ul> <ul class="switcher"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> .gallery ul { padding: 0; margin: 0; list-style: none; width: ; height: ; overflow: hidden; position: relative; } .gallery li { /* тут я немного сократил, обычно пишут .gallery ul li */ position: absolute; top: 0; left: 0; width: 100%; } .gallery a { /* Это какая-то кнопочка в галлереи. тут я немного сократил, обычно пишут .gallery ul li a */ position: absolute; top: 50px; left: 50px; width: 100px; height: 30px; background: url(image.png); } .gallery .switcher { width: auto; height: auto; } .gallery .switcher li { position: static; float: left; } .gallery .switcher a { position: static; width: ..; height: ..; background: ..; } А теперь представьте что в галлее не просто картинки будут, а там еще и описание полноценное появится, и внутрь ее придется всунуть простой маркированный список. Это то с чем я часто сталкиваюсь. А вот задай классы изначально элементам, да задай им стили через эти классы, а если еще и классы не от фанаря а логично будут проставлены(а в БЭМ так и есть), сделай лучше не себе в данный момент, а тем кто потом будет поддерживать твой код, возможно даже это ты будешь. БЭМ - это не больная фантазия, это логичный результат многих часов работы.

Какие браузеры поддерживаете? jQuery можно использовать?

Требую наглядных примеров. Пример не наглядный, а теоретический: представь табы, только не плоские, а 3D. Например вращающийся кубик . Красиво? Или чекбокс - не плоский, а поворачивающаяся штучка. Если не налепить все подряд лишь бы двигалось, а сделать это со вкусом - то получим приятный сайт. А на приятном сайте и находится приятно.

http://apycom.com/menus/5-black.html смотрим внимательно и находим:

На самом деле не все так просто. Если верстать простые макеты, то все будет нормально и на маке, а если всякие штучки дрючки - то верстка может и посыпаться. Насчет джс - был раз прикол что в только в сафари на маке не отрабатывали кукисы. Но давай не холиварить. Создай тему отдельно.