Ludwig Voltman

Тут ничего не напутано? Блин, две ошибки в одном посте. Стыд и срам! )) Конечно, все наоборот.

Сигма, спасибо, поправил.

Тема очень полезная, спасибо, Клерик! Вот ещё одна штука: Элементы, которым задается позиционирование, отличное от static/relative или перемещение (float, отличное от none) автоматически становятся блочными, т.е. не нужно им прописывать display: block. Особенно часто лишняя строчка с display: block встречается у псевдоэлементов. Однако, здесь меня терзают смутные сомнения: лишний display: block в позиционируемых псевдоэлементах часто встречается в коде у опытных верстальщиков. Может эта фича такая? Или я правильно говорю? По поводу вопросов Чакры: 1) про display:inline vs float: left Макфарланд отвечает на это примерно так: если у навигационных ссылок должна быть четкая ширина и высота, или же рамка -- то используем display: inline. Если нет -- float: left. Можно также использовать строчно-блочные элементы, но они не поддерживаются в ИЕ7 2) про img vs background я рассуждаю так: при печати background не отображается. Какие элементы заслуживают того, чтобы быть напечатанными? Логотип, картинки к статье -- заслуживают. Иконки, закругленные уголки и градиенты -- нет. Графические буквицы (ну, как пример) -- заслуживают. Вот по такой логике я и оформляю картинки. 3) про книжку с "почему" могу посоветовать книгу Мейера. Или же спецификацию (сам, правда не читал )

Про горизонтальное позиционирование кнопок - тут все просто. Либо вы можете позиционировать их через float (задать float: left span'у перед кнопками, и кнопки обтекут его справа). Правда возникнут сложности с вертикальным выравниванием, если элементы разной высоты. Поэтому я бы просто сделал div'ы-кнопки строчно-блочными (dispay: inline-block). Это очень удобно, т.к. элементы 1) будут выровнены по одной горизонтальной линии (baseline), независимо от высоты 2) строчно-блочным элементам можно будет задавать высоту и верхние рамки как блочным (что пригодится для кнопок). Правда сточно-блочные элементы не будут работать в IE6,7, но это решаемо (если я не ошибаюсь, в условных комментариях для этого браузера нужно прописать display: inline; zoom: 1;). Подробнее можете почитать в книге Влада Мержевича, очень сжато и по-существу. По поводу классов и айди: разница между ними не очень большая. Id 1) имеют большую специфичность 2) используются для js-скриптов 3) могут встречаться только один раз на странице. В хорошей верстке (примеры Мейера, Макфарланда) id присваиваются основным контейнерам (header, footer, content etc.) и формам. Но многие вообще не используют id и присваивают только классы. Обычно так делают чтобы не мучиться со специфичностью и лимитом на одно использование элемента с id. В случае использование к-л ява-скрипта элемент с классом просто заменяется на элемент в id.

1) Если указываете в доктайпе html5, то ссылку на файл стилей можно писать короче: <link href="..." rel="stylesheet">. Type не обязателен. При использовании тега <script> type тоже можно не указывать 2) Название сайта лучше поместить в <h1> вместо стерильного тега <span> 3) Основную навигацию необязательно заключать в тег <div id="navigation">, просто присвойте этот id списку (ul). 4) Аналогично и с <div id="columns1> и <div id="columns2"> 5) Не советую указывать height для блоков с текстовым содержимым. Лучше заменить на min-height или же просто указать padding-top/padding-bottom 6) Очень намудрили с кнопками: отрицательные поля, зачем-то указано абсолютное позиционирование... Не совсем понял замысел. Это вы так хотели расположить блочные элементы горизонтально? 7) У четырех колонок в футере стилизация одинакова. Зачем заводить 4 разных id, когда можно обойтись одним? 8) специальный <div class="line"> который идет после каждого пункта меню во всех четырех колонках сильно перегружает html код. Лучше задать верхнее и нижнее подчеркивание элементам меню. Так линии наложатся друг на друга и создастся эффект объемности, которого хотел добиться дизайнер. При этом нужно отменить верхнее подчеркивание у первых пунктов через псевдокласс 9) зачем использовать везде id? Class я встретил только 1(!) раз на странице. Соотношение должно быть противоположным, имхо

По поводу верстки: что тут говорить, по мне так все супер. Ничего не сыпется, при добавлении текста ничего не разваливается. Ну разве что: 1) всем элементам с position или float автоматически задается display: block, отдельно прописывать его не нужно (я имею ввиду стилизацию псевдоклассов :before, :after) 2) для даты поста в статье вместо span можно использовать специальный тег <time> 3) я бы все-таки в h1 заключил не слоган, а название сайта - по вопросам: 1) в IE7 все отображается хорошо, но тормозит по-страшному 2) по поводу блока с новостями: я недавно верстал новостную ленту и так же использовал теги (ещё <time> добавил для даты). Я рассудил так: то, что у структурных элементов нет заголовков -- не страшно, это опциональное требование. Использовать "стерильные" теги тоже смысла не имеет, т.к. содержательное значение в ленте новостей есть. А из всех структурных элементов подходит только article, его я и использовал. 3) по поводу остального сказать нечего

1) тегам header и footer я бы задал class/id, т.к. на странице они могут встречаться не раз. Еще так можно сделать: <header role="banner"> и задавать css по селектору атрибутов (header [role=banner] { style: ...;}. Html5 ARIA, как я понимаю, может считаться семантической заменой именам классов/айди. 2) навигационная панель вверху может быть оформлена так же: <nav role="navigation"> вместо id. Кстати, в футере nav нужно убрать, т.к. нижняя навигационная панель дублирует верхнюю 3) вместо <section id="content"> я бы использовал тег <main>. Id ему можно не задавать (т.к. этот тег на странице используется один раз 4) в статье картинку с девушкой можно заключить в тег figure 5) в статье нижнюю панель с тегами и информацией об авторе можно заключить в footer (вместо div'a) 6) копирайт нужно заключить в тег <small class="copyright"> (вместо div'a)

По поводу книг: Когда мне было лет 13 и я ничего не понимал в вебе, я начал изучение html с этой книги: http://www.postroika.ru/html/ Написано очень просто (пожалуй, самое простое описание html, которое я видел), правда книжка довольно старая, некоторые вещи уже не используются. CSS я начал изучать недавно по книге Макфарланда (Большая книга CSS). В этой книге главное делать упражнения, которые идут в конце каждой главы. Если не делать -- все быстро забудется. Ну и нужно как можно раньше тренироваться в верстке макетов (я начал после того, как прочитал пол-книги Макфарланда). После Макфарланда я решил прочитать книгу Мейера (Каскадные таблицы стилей), уже больше половины прочитал. Если сравнивать Мейера с Макфарландом, то можно сказать, что у Макфарланда больше практики, а у Мейера -- больше теории. У Мейера почти не написано о том, что, например "эта плюшка не работает в браузере Сафари такой-то версии", или что "кнопку лучше верстать вот так, а не так". Зато у Мейера написано о том, как браузер обрабатывает определенный код и многие тонкости, с которыми не так часто встречаешься на практике, но знать которые необходимо для ПОНИМАНИЯ css. Иногда эти тонкости настолько неочевидны, что приходится перепроверять: не ошибся ли Мейер? Не ошибся

Spy7190 Да, макет суперский. Сможете выложить на форум? Думаю будет много желающих сверстать. В интернете подобных макетов не найти

1) Шрифты я бы подключал через font squirrel или google fonts, так как для отображения шрифтов во всех браузерах (в т.ч. старых) необходимо загрузить несколько различных расширений одного и того же файла. 2) Лого (надпись indo tourism) я бы сделал h1. Кстати, использовать тег strong для выделения слова indo не совсем семантично, т.к. вряд ли во фразе indo tourism слово indo несет какую-то дополнительную важность. Лучше, как мне кажется, для этих целей использовать либо тег <b>, либо тег <i>. 3) С новыми структурными тегами я сам не разобрался, могу только сказать, что блок с лого и навигацией это header, а сама навигация -- это nav. Галерею картинок (которая реализована через таблицы) структурными тэгами можно заверстать так: <figure><img><figcaption>Описание картинки</figcaption></firure>. Копирайт внизу можно обернуть в small.

http://cssdeck.com/labs/full/9gtebpt6 Как-то так?

Да, а ещё можно сверстать что-нибудь из этого раздела форума: http://htmlforum.ru/index.php?showforum=31

Можно бесплатно скачать Photoshop CS2 с официального сайта.

Слишком простой макет! Попробуйте сверстать что-нибудь серьезнее, гораздо больше опыта приобретете. Да и рассматривать сложную верстку гораздо интереснее. 1) не очень правильное, имхо, решение с background для body, не гибкое. Я бы реализовал путем создания нескольких блоков и наложения их друг на друга с помощью отрицательных полей. Но здесь, наверное, вкусовщина, т.к. нет оригинального макета, чтобы понять задумку дизайнера. 2) постарайтесь избегать !important. Без них сложно обойтись на больших динамичных проектах без методологии верстки, здесь же -- макет простой. 3) зачем в блоках относительное позиционирование? Это хак какой-то? 4) информацию о копирайте и авторах дизайна (хы-хы) я бы заключил в тэги small. 5) ссылки на сайт дизайнера надо как-то стилизовать 6) фиксированную высоту для текстовых блоков лучше не задавать (или делать её через min-height). Цитата (класс лучше назвать quote) выходит за границы отведенного для неё блока (blockquote) 7) обратите внимание на структурные тэги в html5 -- есть над чем работать. Я тут советовать ничего не могу, т.к. сам с этой темой не разобрался.

Неплохо сверстано, аккуратно, ничего не разваливается. Вот что я бы покритиковал: 1) очень мудреная реализация меню. Зачем каждой кнопке (!) давать свой класс и назначать ей фиксированную ширину? Тогда уж лучше вообще не мудрить, и сделать меню картинками По идее Вам нужны кнопки, растягивающиеся по ширине. Для этого можно использовать display: table (эту штуку я пока не пробовал) или решение с сайта css-live (растягивающееся кроссбраузерное меню через text-align: justify). 2) Список (Наши услуги) я бы тоже реализовал через ul-li. 3 дива ради одного пункта меню -- очень много, имхо. 3) Наши услуги, Главная -- это заголовки (h2) 4) Империал Строй -- это заголовок h3 5) а вот картинка с логотипом -- это заголовок h1 (пункты 3,4,5 - мое субъективное мнение) 6) кнопка "вызов мастера" я бы реализовал через скругленные углы и фоновую картинку. Это труднее, чем спозиционировать текст и картинку, но гораздо динамичнее. Сейчас -- добавление текста и эта кнопка потеряет вид. Чем такое решение лучше обычной вставки картинки? 7) В html5 в тэге <link> можно не прописывать type="text/css". Аналогично с тэгом <script>. Т.е. уже подразумевается, что скрипт - это java, а таблица стилей -- это css.