Chakra

del

notepad++

да так и есть, если картинка часть контента, то img, а если чисто декоративный элемент то в background, или ПЭ, в случае иконок каких-то А для маркеров элементов списка не логичнее background? Его, например, поменять легче, если будет необходимость. Вот не нравится мне этот before, вроде как нарушает структуру сайта. Разубедите меня, пожалуйста.

1. На форуме часто советуют оборачивать его в <h1>... 2,3,5 Это понятно, что зависит от задачи. Я ожидала, что можно сформулировать общий принцип (для такого-то класса задач используйте то-то). Например, используйте img для значимых картинок из контента сайта, а для его оформления вставляйте картинки через background.

Возможно, ответы на эти вопросы будут полезны начинающим (хотя бы ссылкой): 1. как правильно оборачивать логотип 2. использование <img> vs. <div> с background картинкой 3. использование <button> vs. <a> с background картинкой кнопки 4. проверка валидности и браузеры, в которых надо тестировать 5. использование для горизонтального меню float:left vs. display:inline-block p.s. Посоветуйте, пожалуйста, книгу, которая бы отвечала не только на вопрос "как?", но и "почему?"

В общем, согласна с вами: для такого посетителя, которого вы описали, этот сайт будет плохо воспринимаемым. В принципе, по части юзабилити ошибок много. Мне лично понравилась сама идея ромбовидного оформления, сразу представила как все это можно сделать в гораздо лучшем виде. Тем не менее это вариант) Понимаете, я просто пошутила...

С названиями, конечно, ошибка, но насчет дизайна не соглашусь, он интересный и сайт запомнится посетителю, что, возможно, увеличит вероятность превращения посетителя в заказчика. Но вот если верстальщик накосячит и сайт будет разваливаться при небольших изменениях, то такой дизайн лучше выбросить и использовать какой-нибудь стандартный, потому что для этого сайта важнее удобство использования (да и в старых браузерах точно будет отображаться некорректно...). Насчет блока "Адреса пунктов обслуживания" самый простой вариант тут http://jsfiddle.net/rXBuU/ . Может быть, с помощью svg это тоже осуществляется. Надеюсь, в будущем появится свойство shape-outside http://dev.w3.org/csswg/css-shapes/ , что позволит довольно просто реализовать интересные дизайны с более активным взаимодействием картинок и текста. Собственно, вас никто не заставляет его верстать, а у меня лично чисто спортивный интерес, хочется помучиться... ведь настоящий верстальщик должен быть немного мазохистом

Наоборот, ШП как раз рассчитан на новичка. Начинала изучение html/css с этого курса, но не совсем довольна: с одной стороны легко слушается, лектор приятный, есть практика, с другой стороны в итоге получила очень поверхностные знания и ощущение, что вот теперь я почти все знаю и могу спокойно верстать сайты, изредка заглядывая в справочники. В действительности это, конечно, не так, еще очень много материала надо понять и освоить. Не говорю, что курс плохой, но нужно помнить, что он дает представление только в общих чертах. Также слушала курсы Специалиста: понравились, хотя изложение более сухое, зато знания более глубокие (относительно ШП). А вообще у меня сложилось мнение, что все эти видео курсы подходят только для первого ознакомления или для получения базовых знаний по предмету. Лучше работать с хорошими подробными учебниками (http://htmlbook.ru/samhtml , http://htmlbook.ru/samcss , Макфарланд "Большая книга CSS", Мейер "CSS. Каскадные таблицы стилей"), выполняя задания (из учебников и http://htmlbook.ru/practical ), разбирая примеры (все, что заинтерсуют) и тренируясь в верстке макетов ( http://htmlforum.ru/index.php?showforum=31 , https://www.google.ru/#q=free+psd+templates , http://web.archive.org/web/20120419005535/http://divhack.com/ ).

Высоту блока я задала для наглядности. У меня другой минус: я задаю ширину li, поэтому вариант nightwolf'a http://jsfiddle.net/LLbCy/ все-таки лучше (кстати, этот же вариант используется на htmlbook.ru).

или так: http://jsfiddle.net/KEpB2/

Все-таки было бы интересно увидеть psd-макет и верстку по нему...

1. Оке, больше не буду) 2. На макете было так указано. Сделала более адаптивный вариант: http://chakra.besaba.com/examples/indotourism2/index.html 3. Переделала (ссылка п.2), а классы просто забыла убрать. 4. По-моему, все-таки лого важнее, поставила h2. 5. Ну не знаю, эта кнопка очень похожа на кнопку)) Не понимаю причину, поэтому оставила как было. Спасибо вам за комментарий!

В jsfiddle в firefox 26.0, причем в том же firefox открывала сайт с background-position: 9999em и все работало.

Radiocity, почему-то ваш вариант у меня не работает. Но когда поменяла position в background на 999em, то заработало. Насчет адаптивности согласна, но мне пока еще рано этим заниматься. Спасибо за комментарий!

Людвиг, спасибо за советы! Подключила шрифты через font squirrel (надеюсь, правильно, пока не могу проверить во всех браузерах), переделала теги для лого и еще кое-что (теперь работает в IE6, если верить IETester'у).

Вот тут сама верстка: http://chakra.besaba.com/examples/indotourism/index.html Тут шаблон страницы: http://all-psd.ru/files/19-05-2013/01910.zip Тут jpg этой страницы: http://i60.fastpic.ru/big/2013/1218/1f/58b7de3f68fbcda0f9bee9d6383b571f.jpg Буду очень признательна, если ответите на несколько вопросов: 1. Правильно ли я подключила шрифты (в частности, cufon для IE8-)? 2. У страницы горизонтальная симметрия, поэтому я отцентрировала основные элементы, но из-за этого элементы сдвинулись относительно их расположения на шаблоне. Такое допускается? Как обычно относятся к подобным "улучшениям"? 3. Возможно, нужно было использовать заголовки <h1>,... Если да, то где именно? 4. Тот же вопрос насчет новых тегов. Понимаю только, где <footer> :-)