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.

Спасибо за ответы! Какая-то странная штука: похоже здесь Dropbox виноват. Когда компилирую файлы, лежащие вне директории dropbox ошибка не выходит. В интернете такая проблема время от времени встречается, правда методов исправления не предлагают. Попробовал использовать googledrive аналогичная ошибка -- не видит директории. Вот такие вопросы ещё возникли: 1) У меня у всех проектов структура одинаковая: PROJECT NAME index.html other.html style style.css scss style.scssМеняется только имя проекта. Можно как-то через командную строку сделать так, чтобы компилировались все файлы всех проектов за один раз? Или для каждого проекта задавать команду sass --watch? 2) Где можно отредактировать настройки чтобы директория по умолчанию (та, которая появляется, когда запускаешь командную строку) была другой? Чтобы каждый раз cd /d не набирать.

Вчера начал читать небольшую книжку о SCSS, решил освоить препроцессоры. Уже половину книги прочитал, а все никак не могу настроить командную строку. ОС: Windows XP Что я сделал, шаг за шагом: 1) скачал ruby installer 1.9.3, установил его 2) прописал в командной строке gem install sass 3) sass установился. Но директория по умолчанию не та, которая мне нужна. 4) меняю директорию: cd /d D:\Dropbox\Верстка\Workshop 5) теперь я хочу, чтобы sass автоматически компилировал sass файл в css. Этот файл лежит по адресу: D:\Dropbox\Верстка\Workshop\Mold\style\scss\style.sass 6) Для этого пишу в командной строке: sass --watch Mold\style\scss\style.sass:Mold\style\style.css 7) Результат - ошибка: no such file or directory - style\scss\style.sass ERRNO::ENOENT: No such file or directory - D:\Dropbox\Верстка\Workshop\Mold\style\scss Но директория правильная, и файл лежит на месте! Файл style.css создается там, где нужно. Правда вместо результата компиляции -- сообщение об ошибке (такой же как и в командной строке). Почему появляется эта ошибка? Что сделано не так?

Хром хорош. Но как в других браузерах проверять? Взять, например, формы. В одном браузере нормально, в другом какие-то странные отступы появляются, которые надо исправлять. существует аналогичный плагин для googlechrome Да, есть. Но он привязан к браузеру, а скриптом можно и в других браузерах смотреть макет. А чем хром плох? Какая разница где будет окно с версткой

существует аналогичный плагин для googlechrome Да, есть. Но он привязан к браузеру, а скриптом можно и в других браузерах смотреть макет.

Сам хотел создать подобную тему. Вопрос по-моему очень актуальный. Описание структурных тэгов, как мне кажется, слишком неоднозначно, не хватает конкретики. Вот как я бы разметил эти страницы: 1) main это то - что не футер, и не хеадер. Поэтому в первой картинке я бы внес в него и основной контент, и навигацию. А скорее всего бы вообще не использовал. 2) вторая картинка -- это галерея. Её я бы оформил вот так: <section><h1>HEADER</h1><figure><img><figcaption>Добавлена, рейтинг, подробнее, комменты и т.п.</figcaption></figure></section>3) здесь я бы так сделал: <section><h1>PHOTO_NAME</h1><figure><img><figcaption>описание, рейтинг и т.п.</figcaption></figure></section><article>форма отправки комментария<article>комментарий</article><article>комментарий</article> etc.</article>

Я большим опытом похвастаться не могу, но если верстаю, то без попиксельного задротства. Главное чтобы блоки были на месте. В статье про чек-лист верстки фигурировало такое требование: погрешность в пределах пяти пикселей. Мне кажется этого достаточно. Пиксельперфект увы, не работает на новых версиях мозиллы(или фаербага?), поэтому использую javascript modulargrid.

По поводу БЭМ и каскадности. В статьях написано примерно так: "каскадность в БЭМе допустима, но с ней нужно быть осторожнее. Если хотите 100% надежность -- лучше не использовать её вовсе".

А вот чего до сих пор не понял: обязателен ли для структурных элементов заголовок? В примерах везде его вставляют. А вот если его нет? Пример из макета - новостная лента: <section class="news"><h1>Новости</h1><article><time>11.11.12</time><a>Сегодня что-то там случилось</a></article><article><time>11.11.12</time><a>Сегодня что-то там случилось</a></article><article><time>11.11.12</time><a>Сегодня что-то там случилось</a></article></section>Как тут быть? Так что ли извращаться? <article><time>11.11.12</time><a><h1>Сегодня что-то там случилось</h1></a></article>Или ну его нафиг этот заголовок?

Bassline, тот макет, который ты верстал -- он откуда? Я просто когда-то давно на каком-то сайте видел список макетов для верстки по нарастающей сложности. Там вроде даже ТЗ было. Этот макет не с того сайта?

1. Почему-то ни одного стиля не присвоено html5 тэгам. Если беспокоитесь за кроссбраузерность, используйте html5shiv (подробнее в статье "Новые тэги" на этом сайте). Если присвоите стили html5 тэгам вместо div'ов, то сможете избавиться от кучи div'ов 2. Два подряд идущих заголовка можно объединить в hgroup 3. копирайт внизу можно заключить в тэг <small> 4. контактный адрес в футере можно заключить в тэг <address> 5. картинки с девушками, наверное, можно сделать через новый тег <figure>, подписи к картинкам через <figcaption> 6. список с популярными постами (popular posts) в футере тоже можно сделать через какой-то новый тэг (может быть, aside?) 7. Маленькие картинки (interface design, motion graphic etc.) лучше делать спрайтом. Сейчас чувствуется подгрузка новой картинке при наведении на ссылку