Alex Shnayder

Тут был неправильный ответ.

http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html

Странно, у меня на i5 ни в хроме, ни в фф не тормозит, разве что прокрутка фоток в портфолио не плавная. А вообще, сайт, по-моему, дурацкий. Как уже писали, всё по-юношески пафосно. Когда я захожу на такой сайт, у меня возникает ощущение, что персонажу лет 16-18. Заказывать работу у подростка? Нет, спасибо. Если отстраниться от этого ощущения, то картинка на главной выглядит эффектно, повыпендриваться перед одноклассниками - самое то В остальном сайт смотрится плохо. Теперь более объективно. 1. На главной странице ничего нет, кроме фотки. Это ведь сайт-портфолио, правильно? Так поместите на главную часть работ, напишите, что это сайт фотографа-художника. 2. В разделе "кто он" вместо полезной информации об опыте работы и умениях написана ничего не говорящая чушь. Думаете, заказчику надо "погрузиться в его мир наполненный искусством, культурой и виdеньем нечто иного что помещается только у него в голове"? Ну-ну. 3. Зачем делать прайс скачиваемым? Так сложно выложить цены на сайте? 4. Раздел портфолио ужасно неудобный. Зачем-то сделано разделение на 2 вида работ и дурацкая медленная прокрутка. Вместо того, чтобы увидеть на главной миниатюры работ с небольшим фильтром по типу (а можно и без него), я должен сначала два раза кликнуть, а потом ждать, пока всё прокуртится. 5. Текст должен быть текстом. Во-первых, пользователь сможет скопировать нужную информацию, сохранить телефон в адресную книгу и т.д. Во-вторых, поисковики текст на изображении не распознают. 6. Прописные буквы - зло. Они читаются гораздо хуже строчных. 7. ... В общем, подумайте, для чего нужен сайт, зачем на него будут заходить посетители, какая информация им нужна. Сделайте всё самое нужное на главной: краткое резюме, список работ, контактную информацию. Старайтесь в первую очередь делать удобно, и только во вторую - красиво.

А, блин, я не про ту картинку подумал.

Вы про картинку в шапке на forum.worldoftanks.ru? Она сделана фоном с центральным позиционированием для блока, у которого задана минимальная ширина, а поверх него слева наложена картинка-затемнитель. Когда окно браузера сужается, картинка обрезается справа и слева в равной степени.

overflow: hidden для .rcb-content-bottom.

Это стандартное поведение FF и IE. На первый взгляд, фиксится заменой :active на :active:hover.

Этот кусок выглядит рабочим, при вводе "123456" должна выводиться ошибка. Но подход в целом неверный, да и качество кода оставляет желать лучшего.

Это не очевидно, но этот селектор работает не так. Селектор .post:last-child выбирает элементы, для которых выполняется одновременно два условия: 1) Этот элемент является последним прямым потомком своего родителя. 2) Этот элемент имеет класс post. В вашем случае все div.post подходят только под второй критерий, а добавленный элемент - только под первый.

Добавьте: .view-frontkat .views-field-title { line-height: 66px; } .view-frontkat .views-field-title .field-content { display: inline-block; line-height: 1.6em; }

Можно использовать rgba (IE9+) или псевдоэлемент (IE8+).

1. В списке слоёв щёлкаешь левой кнопкой с зажатым альтом по иконке глаза на нужном слое (это можно сделать и через контекстное меню). Это скроет все слои, кроме выбранного. 2. В меню нажимаешь Image -> Trim... -> OK. Это обрежет все полностью прозрачные пиксели. 3. Сохраняешь. 4. Откатываешь. Никаких новых файлов создавать не надо.

Сделайте inline-block для ссылок и спанов.

Есть вот такая статья об оптимизации CSS. Судя по ней, box-shadow — одно из самых тяжелых свойств, а transform: rotate, которое используется в этих примерах для поворота псевдоэлементов, вообще ужасно тормозное. Так что если таких теней на странице должно быть много, стоит рассмотреть другие варианты.

А в чем проблема сделать не одну тень, а две? Псевдоэлемента-то два. Вот примеры: http://habrahabr.ru/post/133258/.

Эти облака сделаны на WebGL, технологии, позволяющей использовать 3D-графику в браузере. Она должна поддерживаться в последних версиях всех браузеров, кроме ИЕ, но на реальных сайтах я бы использовать это не стал. Если сильно надо, поищите в гугле на тему того, как включить поддержку WebGL в опере и сафари. Вероятно, она просто по умолчанию отключена. Это всего лишь демонстрация того, что можно сделать с помощью WebGL, её автор - Mr. doob. У меня, кстати, ни в хроме, ни в ФФ не тормозит.

Вебкит по умолчанию добавляет margin к инпутам. А зачем вам тут абсолютное позиционирование?

У шрифтов, загружаемых со стороннего сервиса, есть некоторые преимущества. Во-первых, если пользователь заходил на сайты, где грузятся те же шрифты с того же сервиса, то они уже есть в кеше браузера, и пользователю не придется ждать загрузки. Те же Google Web Fonts, например, используются довольно часто, и эта разница будет ощутима. Во-вторых, это снизит количество запросов к серверу. А вероятность того, что те же GWF будут недоступны, ниже таковой у вашего сайта То же самое, кстати, касается различных библиотек типа jQuery.

Так у вас и все остальные страницы невалидны. Валидатор же не просто количество ошибок выводит, но и даёт описание для каждой из них. Читайте, исправляйте.

Ну да, подменю ведь является частью родительского li. По-моему, это правильное поведение с точки зрения юзабилити. Чтобы сделать по-вашему, нужно ловить hover на самих ссылках и изменить правило для отображения подменю: #nav a:hover { color: #f00; } #nav a:hover + ul, #nav a + ul:hover { display: block; } Получится что-то вроде этого.

Как это "не как надо"? Это правило будет применяться к ссылкам, которые являются дочерними (т.е. напрямую вложены) по отношению к li. Остальные ссылки-потомки не изменятся. Вам как-то не так надо? Да, кстати, небольшие советы по коду. Во-первых, используйте классы вместо id для оформления элементов. Это позволит создать больше одного элемента на странице, если вдруг понадобится, а также облегчит возможные проблемы со специфичностью. Во-вторых, постарайтесь избегать лишней вложенности селекторов. Например, #nav ul li ul li:hover a можно было бы спокойно заменить на #nav li:hover a Код будет меньше зависеть от структуры, да и скорость селекторов немного возрастет.

#nav li:hover > a Либо вешать hover на сами ссылки.

Ну, можно прижать градиент к краю окна, а body задать тот цвет, которым он заканчивается. Но вряд ли это вас устроит. Ещё можно придумать что-нибудь с "фоновым" дивом, которому задать один крайний цвет, а боди - другой, но это уже извращение какое-то. Лучше выбрать другой вариант.

А вы уверены, что хотите растянуть изображение на весь экран? Это ведь смотрится ужасно. Навскидку, есть следующие варианты: 1. Если градиент простой — использовать CSS-градиенты, предоставляя для старых браузеров упрощенную версию. 2. Воспользоваться свойством background-size, но оно, опять же, работает не везде. 3. Не растягивать изображение, а сделать мягкий переход в сплошной цвет. Этот приём часто используется, он кроссбраузерный, но подходит не для всех случаев. 4. Использовать костыль с элементом img вместо фоновой картинки.

Список не заходит под контент, он обрезается из-за того, что у его родителей задано overflow: hidden. Воспользуйтесь другим способом очистки потока.