Catherine

Доброго времени суток, уважаемые жители форума! Сверстала несколько страниц, крайне нуждаюсь в критике В прошлый раз мне советовали взять работу посложнее(за что огромная всем благодарность), и, как мне кажется, теперь явно будет к чему придраться Интересует все, что может касаться верстки: общее впечатление, разметка блоков, использование свойств и классов, оптимизация графики, явные ошибки, правильность выбора jQuery-плагинов, и на что вообще стоит обратить внимание. Собственно первая страница, вторая, третья. По идее, кроссбраузерность от IE7, Safari, Chrome, FF, Opera-последние версии браузеров. Скроллинг динамической высоты, в зависимости от высоты окна браузера. Буду благодарна любой конструктивной критике по верстке. Заранее спасибо, что уделили этой теме внимание! UPD: больной вопрос-тултипы на первой странице. Стояла следующая задача- наклонный блок с полупрозрачным фоном, нижним уголком фиксированной высоты, с тенью, нефиксированного размера, скругленными углами. Решено, но довольно грубо, хотелось бы знать, может, кто подскажет более изящное кроссбраузерное решение? Спасибо!

А вот у меня почему-то все получается background-position задает положение фонового изображения, цвет же фона распространяется на весь элемент за вычетом margin'ов. А в Вашем примере указан цвет фона (см. http://htmlbook.ru/css/background-color), но не указана картинка (см. http://htmlbook.ru/css/background-image), соответственно, background-position (см. http://htmlbook.ru/css/background-position) ни на что не влияет. UPD: У меня есть совсем необоснованное предположение, что Вы хотите разместить фоновое изображение в бэграунде документа, но не указали высоту для body и html. Может в этом дело?

Вы что, и в самом деле думаете, что все так и кинутся просто так верстать, еще и по Вашим требованиям? Культура поведения в разделе

Может, Вам нужно не блок, а его фон растянуть на 100%? Вот одно из решений, фон на всю высоту страницы, с фиксированными отступами сверху и снизу.

Огромный недостаток ресурса xiper.net, из-за которого его следует обходить стороной — пересказ своими словами в меру понимания (не всегда полного), и отсутствие ссылок на первоисточники. Может он и отличный для тех, кто ни бум-бум в английском, но там переводы западных статей и решений, без указания ссылки на первоисточник, как справедливо заметил коллега. Я почти ни бум-бум в английском, впрочем, как и в jQuery, но на xiper.net очень доступным русским языком приведены примеры, которые в состоянии использовать даже я) Ссылки на первоисточники, по крайней мере, последние пол-года, у них есть в разделе "Материалы" в каждой статье внизу страницы, куда я и заглядываю, если что-то не получается. В том числе, и в указанных в этой теме статьях.

Спасибо за подробное объяснение!

Вот и я не нашла упоминаний о том, что label должен находиться именно внутри form. Так что хочется верить, что это все-таки фича, но без теоретического подтверждения использовать в самом крайнем случае и с осторожностью

Прописать в стилях высоту <hr> такой вариант подойдет?

Слишком просто Ну тут же речь шла именно об использовании свойства background-position-y. Автору топика предлагаю использовать до лучших времен background-position.

Сработает, но только когда картинки являются обобщенными родственными элементами: <div> <img src="image/cont-img1.jpg" alt="" width="201" height="103"> <hr /> <img src="image/back.png" alt="" width="20" height="22"> <a href="#">Back</a> </div> Если картинки не обобщенные родственные элементы, а используется нижеприведенный код <div class="left-panel"> <a href="#"><img src="image/cont-img1.jpg" alt="" width="201" height="103"></a> <hr /> <a href="#"><img src="image/back.png" alt="" width="20" height="22"></a> <a href="#">Back</a> </div>то в этом случае обобщенными родственными элементами будут теги a, и тогда надо использовать .left-panel a ~ a img{} ссылка

Если картинки разделяет </hr>, можно использовать селектор обобщенных родственных элементов: .left-panel img ~ img{} Пожалуйста

Извиняюсь за не точную формулировку, хотелось что бы свойства убирались когда наводились на другие li. Тойсть когда наводят на другой ли, убирается фон у .active. Возникла проблема с выборкой селекторов. Есть картинки, к одной нужно сделать border. Цеплять класс думаю это не очень правильно. Пытался выбрать такими способами: .left-panel img img{} - что бы сбросить бордер и задать свойства второй картинке .left-panel img:first-child{} - что бы задать только первой Код: <div class="left-panel"> <a href="#"><img src="image/cont-img1.jpg" alt="" width="201" height="103"></a> <hr /> <a href="#"><img src="image/back.png" alt="" width="20" height="22"></a> <a href="#">Back</a> </div> .left-panel img{ margin: 0 0 19px 23px; border: 3px solid #000; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .left-panel img img{} не сбросит свойства второй картинки, он будет искать все img внутри img, а вот .left-panel img + img{} задаст свойства всем картинкам, кроме первой. Почитайте про контекстные селекторы и соседние селекторы. Если картинок всего две, можно попробовать задать бордер второй картинке и как-нибудь так: .left-panel img{ margin: 0 0 19px 23px; border: 3px solid #000; border-radius: 3px; } .left-panel a:first-child img { border: none; } Но если картинок будет больше, то все-таки лучше задать нужной картинке класс.

а ноут какой? извините за оффтоп http://rozetka.com.ua/samsung_rv509_np_rv509_a04ua/p137483/

Спасибо за совет! Уже пробовала Понравилось

А что мешает? Хочу Kubunt'у альтернативной ОС поставить, второй месяц как набираюсь смелости, глаза боятся, да руки не доходят

Человек уже сделал, выкидывать вряд ли будет. Согласна с Searcher, цвет однозначно надо поменять, тут больше подойдут камуфляжные цвета, хаки, и т.д. Возьмите, к примеру, цветовую гамму с WorldOfTanks посмотрите, какой красивый зеленый в форме советских генералов А вот еще варианты камуфляжа: И бэграунд в выпадающих меню менее прозрачным сделать, текст нечитабельный при перекрытии.

К счастью, по умолчанию подключаемые ролики с Yotube загружаются без автоматического проигрывания. Если надо, чтобы ролик запускался при загрузке страницы, то добавьте в код к ссылке &autoplay=1 Пример: было: стало:

А насколько вообще такой вариант правильный? Я думала, что тег <label> должен размещаться внутри <form>, но валидацию пример с <label> вне контейнера <form> проходит.

Спасибо за совет! Oracle VM VirtualBox с WinXP уже есть, поглядываю в сторону IE Collection, осталось выбрать место и время Да-да, есть такое дело, а также есть дома второй комп с kubunt'ой(неплохо бы и на ноут поставить ),где иногда тайком посматриваю сверстанные странички, но в этой теме хотелось бы все-таки именно про IE7-8 пофлеймить.

.topnav ul li .active:hover { /*новые свойства*/ }

Тогда Вам просто повезло, по-белому завидую Вопрос звучал "Как Вы тестируете свою верстку", поэтому можете смело ставить "свой вариант" или "никак", поскольку, не уверена, что это такой распространенный вариант. Но Вы все-таки смотрите верстку под VB . Согласитесь, что верстальщики в большинстве своем все-равно хоть как-то да и проверяют свою верстку перед тем, как отдать ее тестировщикам-заказчикам-программистам-и_кому_то_там_еще. Вот я лично стараюсь делать так, чтобы косяков не было в заявленных браузерах, и стараюсь тщательно проверять сверстанное. Возможно, я педантична до безобразия, но люблю завершенную работу. Да и не хочется получать минуса в карму, гораздо приятнее услышать ответ "все отлично" или "а можно там где-то что-то подвинуть/переместить", чем "ой, а у меня все разъехалось(((" и начинать искать свои же ошибки. Спасибо всем ответившим! Вы мне очень помогли!

Если ширина левого блока заранее не известна, можно сделать так

Я вставляю ttf вот так: @font-face { font-family: 'Futuris Cyrillic'; src: url('../fonts/Futuris-Cyrillic.ttf') format('truetype'); font-weight: normal; font-style: normal; } Сайт на русском языке? Ваш файл шрифта поддерживает кириллицу? А вообще, если есть ttf-файл, можете воспользоваться генератором шрифтов для создания файлов шрифтов с другими расширениями. P. S. Только меня смущает пробел в имени файла Futuris Cyrillic.ttf ? Не рекомендуется использовать пробел в именах файлов, лично я вместо пробела использую дефис.

Присоединяюсь к поздравлениям! Желаю активным обитателям htmlbook.ru мужеского полу творческих успехов, сил, удачи и процветания :rolleyes:

После этого я попросил бы их выйти из зала Но он сдержался