exessqd1

Стоило бы копать дотошнее.

Первая тройка. Апелляции, претензии и замечания. rash Задача 1. Претензия 1. -2 балла, вариант не доработан, при z-index:-1; нужна дополнительная обертка с z-index:0; либо твои полоски в родительском блоке с непрозрачным фоном видно не будет. Задача 3. Претензия 1. .block-title::after {background: red;} -0 баллов, но зачем все таки? alexriz Задача 2. Претензия 1. .mask {} -1 балл, не смог решить проблему с border-radius, создал дополнительный элемент. Претензия 2. .tabcont {padding:0;} -0 баллов, лишнее свойство. Задача 3. Претензия 1. <div class="angle">?</div> -1 балл, за не умение строить css фигуры. leoni4 Задача 2. Претензия 1. div h3 { display: block; float:left; } -2, балла за непонимание принципов работы плавающих элементов. Претензия 2. div h3 { white-space: nowrap; margin: -42px 0 0 -21px; height: 20px; } -3 балла, за немасштабируемость верстки. блок не тянется в зависимости от текста. (по заданию нужно было чтобы блок был максимального размера max-width: 250px; при увеличении текста блок растягивается по высоте.) Претензия 3. div { position: relative; } -2 балла, за непонимание css box model - лишний код. Задача 1. Претензия 1. -1 балла за табличную верстку на div'ах и псевдоэлементах. Задача 3. Претензия 1. .classD div h3 {display:block;width:100%;} .classD div {width:100%;} -4 балла, за непонимание css box model - лишний код. Претензия 2. .classD div h3 {height: 25px;} -3 балла, за немасштабируемость верстки. блок не тянется в зависимости от текста К судьям. -20 баллов, за отсутствие одной строчки кода? (градиента в ie)

Оценю несколько работ, по-моему скромному мнению: alexriz 1. Круто, section убрать или оставить один и будет на 5. good-for-browsers-style mishka 1. Решил много не думать, просто расставил 4 абсолюта по 4 углам. 2. content-frame head-frame здесь как-бы нафиг не нужны. .headline {display:inline-block} молодец Int 1,2 Тру, хардкор, олдскул - видна старая школа, а именно заточенность на кроссбраузерность. ilhan 1. В принципе тоже сильно думать не стал сделал как mishka 2. Гуд 3. .ininner_box )))) leoni4 3. По виду кривенько, да и по коду не очень. ctpz 1. http://www.w3.org/TR/CSS2/box.html учить наизусть 2. width:100% - 15px; =)) Tenor 1. mishka-style все по 4 углам 2. Чистенько VladP 1. hardcore-mishka-style 2,3 перестань везде использовать id Shotgun 1. #right, #left можно было бы и обойтись psywalker 1. полухардкор-mishka-style , i.bl {} зачем пишешь тег перед классом, sigma77 1. Почти rash-style, не догадался только в одном элементе ставить сразу две полоски, а разделил полоски на четыре элемента, 5 с минусом. Замечу что в боевой обстановке писать :before,:after дочерний слектор(>) категорически нельзя. да и селекторов типа h1,p,i и тд быть не должно 2. Немного грязно 3. на 4 Yubari 1. good-for-browsers-style Ништяк я бы 5 поставил, но тут поствят 5-, "какбы" по конкурсу нужно ориентироватся на самые новые версии браузеров и компактность а не на кроссбраузерность. 2,3 хорошо ExtreMMator 1. oldschool-hardcore-mishka-style 2. Вроде бы и чистенько а по коду и не непоймешь все одной стркой... stars 1. true-hardcore-oldschool-аццкий-mishka-style SelenIT 1. good-for-browsers-style 5- компенсировал элемент контента padding'ом, я бы не стал, контент он все таки контент) 2,3 хорошо zSpx 1. new-metal-hardcore-mishka-style wkon 1. oldschool-mishka-style 2. грязно 3. несделал zSpx 1,2 hardcore-mishka-style rash 1,2,3 Чистенько, постирано, причесано. Но как гласит народная мудрость "идеальная верстка не содержит conditional comments, хаков, вендорных префиксов, не ломается в актуальных браузерах и не существует."

С фидлом запутался, в 14:07 перепостил свои работы сюда http://forum.htmlbook.ru/index.php?showtopic=27536&st=60 будут ли они приняты на рассмотрение?

запутался в фидле http://jsfiddle.net/65F4h/ http://jsfiddle.net/gzZmS/1/ http://jsfiddle.net/V7mD4/1/

[ hide ] http://jsfiddle.net/eEgdx/1/ http://jsfiddle.net/gzZmS/ http://jsfiddle.net/V7mD4/ [ /hide ]

[ hide ] http://jsfiddle.net/eEgdx/1/ http://jsfiddle.net/gzZmS/ http://jsfiddle.net/V7mD4/ [ /hide ]

Картинка 2 задачи не отображается перезалей срочно!

Пока их доля на рынке больше 1%, они актуальны. Ты понимаешь что верстка это вообще не про тебя? Ты решил что ты настолько умный что можешь не поддерживать людей с устаревшими браузерами? ещё и заглушку для них поставь... Может дашь пользователю самому решать какой браузер ему использовать? И дашь заказчику зарабатывать деньги? А не нести убытки из-за того что ты ленивая скотина не захотел сделать хорошо всем. Твой сайт должен выглядеть настолько одинакого во всех браузерах насколько это вообще возможно. А не так чтобы наши сайты только в chrome 13 dev beta смотрелись хорошо. Для этого должны использоваться только проверенные средства. Кто-то сказал что пользователи откажутся от старых браузеров, если мы перестанем их поддерживать, или будем поддерживать не в полной мере - нет, уж точно они не будут сравнивать как выглядит у них в ie6 и как в opera11, если они увидят что в их старом ie6 твой сайт выглядит плохо, более вероятно они откажутся от твоего сайта. CSS3 просто позволяет нам делать вещи которые мы делали годами, только без лишней дерготни. Новые технологии это инструмент который делает нашу жизнь проще т.е помогает нам создавать что-то лучше или быстрее. Новые технологие можно и нужно использовать для тех случаев когда это несет выгоду, а не тогда когда тебе просто лень нарезать картинку которая будет пиксельперфект во всех браузерах, и вместо этого ты используешь -webkit-gradient. Да да я провоцирую застой отрасли, потому что поддерживаю в полной мере ie6, срал я на отрасль если пользователь от меня уйдет из того что мой сайт ему непонравится - вот это мне не все равно.

это надо делать не лозунгом конкурса, а верстальщикам брать за основу при выполнении проектов. Глядишь, пользователи уже задумаются. А заказчики перестанут делать упор на "IE 6+" А то пока Ваня и Петя не прочь верстать под ИЕ6, он так и будет жить. Пусть живет, рано хоронить братца К вопросу о чистоте кода: можно ли придерживаться прогрессивных техник 'Независимые блоки', или ориентироваться на семантику? Также предлагаю четко определить критерии оценки. Например: 1. Скорость загрузки страницы. 1. Обьем HTML кода 2. Обьем CSS кода 3. Обьем JS кода (если будет) 4. Количество и обьем картинок. 5. Вызовы внешних обьектов. 2. Скорость отрисовки страницы. 1. Минимальный размер DOM дерева. 2. Оптимизация CSS-селекторов. 3. Скорость отработки javascript. 4. Скорость отрисовки страницы. 3. Масштабируемость 1. Смотрится отлично при любом разрешении. 2. Хорошо выглядят при разном размере шрифта. 3. При любом маштабе страницы в любом браузере. 3. Доступность. 1. Проверка сайта без JS,CSS,изображений. 2. WCAG (все при все^^) (да проверка для речевых браузеров, и бройля) 3. Полная поддержка всех актуальных браузеров (ie6+,opera9+,safari3+,firefox3+,chrome), обязательно ie6. Если решение полнофункционально реализовать в старых браузерах, прописать красивый fallback. Если ты использовал как тебе кажется спорное решение, должен в сообщении или приложенном файле обосновать его. Каждая работа проверяется с описанием всех ошибок автора, за что бал был снижен по каждой конкретной ошибке.

Вот пример с реального проекта, есть блок слайдера(синий) из которого должно выпадать окошко больше чем сам блок как на скриншоте. Окошко находится в диве с картинкой. Так как сейчас сделано: Просто синий блок увеличен до 500px чтобы выдающие окошко не скрывалось. Меня этот вариант не устраивает, потому что синий блок перекрывает баннеры по ним нельзя кликнуть, перекрывает текст + если выпадающие окошко будет больше 500px оно скроется. Должно быть более элегантное решение. Хорошим решением было бы overflow-x:hidden; overflow-y: visible; на синий блок и высота синего блока равна красному но это как видно не работает. Можно конечно поморочится с z-index'ом: 1. Eсли сделать z-index: -1; на слайдере по банерам можно будет кликнуть а по слайдеру нет даже если на элементах внутри слайдера прописать z-index: 9999; 2. Можно проставить баннерам position: absolute; и z-index: 9999; (что собственно и сделано) но я думаю это не очень хорошее решение Идеи есть?

Собственно вопрос опять же про overflow-x: hidden; overflow-y:visible; Задача: Сделать такой блок в котором все что выходит за пределы блока по горизонтали будет скрыто, а по вертикали видно. Нужна четкая вложеность: <div class="first"> <div class="second"> </div> </div> Вот наглядная схема то что нужно сделать <style> .first { margin: 100px auto; border: 5px solid #000; width: 500px; height: 200px; overflow-x:hidden; overflow-y:visible; } .second { width: 600px; height: 300px; background: lightblue; } </style> <div class="first"> <div class="second"> </div> </div> Вот как выглядит: Вот как нужно сделать чтобы выглядело:

Спасибо конечно, но это не то что нужно. Нужна четкая вложеность: <div class="first"> <div class="second"> </div> </div> Вот наглядная схема то что нужно сделать <style> .first { margin: 100px auto; border: 5px solid #000; width: 500px; height: 200px; overflow-x:hidden; overflow-y:visible; } .second { width: 600px; height: 300px; background: lightblue; } </style> <div class="first"> <div class="second"> </div> </div> Вот как выглядит: Вот как нужно сделать чтобы выглядело:

читай внимательно сообщения, в первом посте уже сказано что это не работает, я даже скринтшот выложил! самый первый который. А лучше сначала проверь все сам прежде чем отвечать...

Нельзя так как нужно не только показать то что по вертикали но и скрыть все что находится по горизонтали

Нужно показать все по вертикали и скрыть по горизонтали

Я может чего то не понимаю? Я всегда думал что можно прописать overflow-y:visible; overflow-x: hidden; и все выходящие за пределы блока по горизонтали скроется а по вертикали будет видно, оказалось не так, может кто объяснит? <style> .head { height: 300px; width: 700px; margin: 0 auto; border: 1px solid red; overflow-x:hidden; overflow-y:visible; } .in { height: 500px; width: 40px; border: 1px solid red; } </style> <div class="head"> <div class="in">123</div> </div> это выглядит вот так а должно вот так help!?

Да я думал может кто подскажет как реализовать.

Хотел сделать паралакс(http://webdev.stephband.info/parallax_demos.html), но понял что без js его не реализовать под все разрешения, так что получилось что получилось http://warplines.com/html/paralax/ - чтобы увидеть эффект нужно ресайзить окно

В гугле такого решения не нашел, вот заморочился, в ie6 не работает(ну это стандартно). Проверено ie7, ie8, firefox3, chrome6, opera 10. http://warplines.com/html/onclick/