Serlutin

Хорошо, вот пример: http://serlutin.nxt.ru/example/no-table.html Сделал за 11 минут, профессионал сделал бы быстрее. Если что это пример с реального сайта, только там всё реализовывалось на js. За сколько вы такое сделаете на таблицах?

Если очень хочется, то палку можно обернуть в <span class="separator"> (так реально советуют). Смысл в этом есть только один, если нужно задать палке, кавычкам, стрелочке и т. д. красивый отступ справа и слева. Да и то, лучше задать отступ ссылкам, чем добавлять лишние элементы.

Тут ещё надо от конкретного примера исходить. Если вы напишете такую конструкцию span {color: red; display: block; width: 300px; height: 500px;} то ваш сайт станет практически не рабочем. Ведь практически все визуальные редакторы в качестве разметки используют span. Поэтому если кто-то в новость, статью или ещё куда-нибудь добавит этот элемент, то страница просто разлетится на кусочки. Логично будет определять span там, где он уже точно не появится. Например, в шапке сайта. Шанс того, что кто-то полезет в дизайн и вставит туда тег, очень небольшой (хотя всё зависит от адекватности сайтодержателя). Поэтому можно сделать что-то такое #header span {тут стили}

Вообще для резиновой вёрстки советуют min-width: 980px;

В Google <p class="breadcrumbs"> и они тоже не парятся. А вот на w3c сделано с помощью списков. Значит и тот, и другой вариант имеет право на существование. Всё зависит от того, насколько это обосновано.

Aleksty, все ваши приёмы-уроки довольны полезны для новичков (и не только), однако здесь ведь это скоро потеряется. Так что предлагаю вам сделать свой блог, а потом сыпать фразами: «Эту проблему я описал в своей заметке», «Вот моя статья по этому поводу» или «Это самый лучший блог по CSS» Если вам нравится писать такие заметочки, то блог в будущем может принести много пользы. Во-первых, у вас коллекция примеров, доступная из любого места, где есть интернет. Во-вторых, можно поразить заказчика своими знаниями. В-третьих, подзаработать на рекламе.

Посмотрим внешне, что такое "Хлебный крошки". По виду это обычная полоска, но не список. Поэтому оформлять лучше просто ссылками, а обернуть всё это можно в <p> (какой-никакой, а всё-таки параграф). Так, например, организована справка в Google. Однако, если используются не обычный вид ссылок, а стилизованный. Например, для каждой ссылки требуется несколько фоновых рисунков, то можно использовать и список. Так как по разметке он будет выглядеть лучше, чем простые теги, типа <span> или других.

Если это тот самый border-radius.htc, то у него были какие-то проблемы. css3piu же довольно монструозный и не слабо подвешивает IE, хотя он мне всё-таки больше нравится.

Точно Ну похоже это знаменитый прижатый подвал.

Да я же не спорю. Просто в данном конкретном примере отдельные стили для ie7-9 не нужны. Если они не нужны, то зачем заставлять их грузить лишний файлик. Просто там картинка относится чисто к дизайну. Поэтому если отключить стили в браузере, то картинка не будет сбивать с толку. Посмотрел, как сейчас сделан блок новостей. Я бы отказался от блока .news_body вообще, а фоновую картинку с линейкой повесил бы на .news_block.

В том то и дело, что в жизни никто (почти никто) по назначению тег <cite> не использовал. Поэтому whatwg решили изменить его назначение, вместо ссылок на источники, сделать его названием книги, фильма ит. д. Довольно опрометчивый шаг, как мне кажется. Ведь это переосмысление тега. Да и получается что те 2 с половиной человека, которые использовали тег правильно, теперь противоречат стандартам. Дело ведь не только в домохозяйках. Если посмотреть на разные блоги, то можно увидеть, что правильно их оформляют только верстальщики. Почему? Да потому что им не трудно редактировать текст в режиме HTML. Все же остальные будут пользоваться обычным редактором. Но большинство редакторов просто урезанная копия Word'a, ведь им умеет пользоваться большинство. Другое зло — bb-коды, которые просто противоречат сути HTML. Шанс на то, что когда-нибудь появится семантичный визуальный редактор, который позволит названия книг заключать в <cite> очень маленький, поэтому, как мне кажется, этот тег не приживётся. Да, в html такую понятную структуру будет выстроить нелегко. Однако преимущество html над xml в том, что есть единообразие. Ведь один человек название заключит в <title>, другой в <header>, третий в <nazvanie>, а четвёртый в <qwerty>.

Да всё просто. Смотришь на заголовки и делишь их по степени важности. <h1> лучше всего использовать для названия всего сайта, либо для названия какой-либо важной статьи, если она одна на странице. (имхо)

Кстати, с тем что в <cite> нельзя вставлять имя автора много, кто не согласен. Например, Bruce Lawson (не знаю, как по-русски произносится). Вот его мнение по этому вопросу. И то, что в комментариях для имени комментатора используется <cite> мягко намекает.

Ну я тоже с практической стороны. В данном случае, если подключать стиль для всех IE, то нужно мучиться с хаками. Дальше больше. Возможно я опять ошибаюсь, но IE7-8 будут пытаться выполнить экспрешн даже если он с помощью хаков отгорожен от них. Однако, конечно, лучше использовать один css файл для всех IE, чем 3 или 4 разных. Хотя в этом варианте тоже есть свои преймущества. Точно не уверен, но там дата обозначает не время добавления, а что произошло в этот день в компании. Да не, я не спорю. Я бы сам всё в одни блок бы вставил, однако и вариант, как у ТС тоже имеет право на жизнь. Ведь можно даже сейчас взять и эти два блока обернуть в <div id="footer">, но от этого ведь ничего не изменится. Совсем ничего.

Вот типичный пример записи в блоге <article> <header> <h1>Название</h1> <time datetime="2011-04-09T21:00">9 апреля</time> </header> <p>Текст статьи</p> <footer>Serlutin</footer> </article> Футер используется для данных о авторе, об источниках ит.д. Возьмем для пример сообщение на форуме. В <footer> можно поместить кнопки «Ответить» и «Цитата»

Можно, можно. Пруфлинк искать лень, но footer можно использовать и в article и в section.

Раз уж зашёл разговор про список определений, то такой вопрос. Чисто теоретически можно бы сделать вот такое сделать с помощью списков определений? У Яндекса сделано чисто практически с помощью огромного количества div и span, а вот как с точки зрения семантики?

Я бы сделал так. <div class="layer1"></div> <div class="layer2"> .... </div> На .layer1 мы фоном вешаем картинку и делаем его relative, а .layer2 смещаем вверх отрицательным margin. Если что пример я уже сделал, но пока не показываю. Ведь цель научиться, а не просто взять готовое решение. Верно?

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

border-radius не применяется к таблицам с border-collapse: collapse; Так что придётся смириться, либо пробовать пробовать скруглить tr или td.

>>Затем, чтобы во-первый иметь один лист стилей для всех ИЕ сразу, а во-вторых чтобы в будущем легко можно было внести правки для нужных браузеров. Просто в ie6.css содержатся чисто специфичные ошибки. min-width, двойной маргин ит. д. Макет сам по себе не сложный, так что особых проблем с IE7 и 8 возникнуть не должно. В будущем можно вообще удалить ie6.css и использовать один файл стилей для всех браузеров. >>Потому что заголовок новости != её дата. Странно, что для тебя нет разницы. Мне кажется, что дата может заменять заголовок при его отсутствии. Представим себе какой-нибудь путеводный дневник. В нём надпись «9 апреля» выполняет функцию заголовка, так как потом рассказывается, что случилось в этот день. Однако, если есть заголовок «Весёлые приключения», а где-нибудь в углу надпись 9.04, то тут это уже пояснение к заголовку, но не сам заголовок. Возможно, я и ошибаюсь. >>Логичнее помещать ссылки на другие страницы и т.д в Футер. Ты же учишь HTML5, должен знать вроде. В HTML5 с <footer> вообще всё сложно. Если смотреть применительно к этому макету, то естественно белая полоска тоже к нему относится (причём её ещё в <nav> нужно обернуть). Но в вёрстка сделана в xhtml, поэтому можно делать по желанию и удобству стилизации.

Не указан doctype может быть? У меня отсуп есть. Однако стоит помнить про схлопывание полей. Если у вас будет такой код: .big { margin-bottom: 20px; } .small { margin-top: 20px; } То margin всё-равно будет равен 20px. Читайте в самом конце про схлопывание. margin: 0 auto 20px auto;

>>1. Наверху есть отдельные стили для ИЕ6. Почему нет стилей для других ИЕ, которые ещё к тому же надо и объединить? Вопрос. А зачем делать стили для других IE, если они не нужны. >>4. <div class="left"> - что за left, я не знаю, кто это. Классы нужно задавать осмысленные. Как мне кажется, .left вполне осмысленное название. А если вдруг в будущем изменится дизайн, то с вероятностью 90% вёрстка тоже полностью изменится. >>5. <ul class="menu"> - то же самое, что за menu, непонятно мне вообще. Полностью согласен. .super-puper-main-navigation-menu-in-left-sidebar было бы лучше. >>6. <h5>31.12.2002</h5> - что за ужас? Зачем тут заголовок. Сделай <span class="date">31.12.2002</span>, и будет намного лучше и понятнее. Если дата новости непосредственно относится к новости, почему она не может служить заголовком? >>7. Сама новость <h5>31.12.2002</h5>[/i] <p class="news_bottom_line">To use flash and navi gate, fully customizab i syst add discussing andby topic oro alliscussing andy.</p> Что за бред? Почему каждая новость не в своём блоке? Почему всё замешано в одной кастрюле? Каждая новость - это отдельный самодостаточный раздел. Зачем вставлять лишний DIV если он не нужен? >>9. <div class="right"> - не знаю такого. Намного лучше писать <div class="aside2"> Какой ещё .aside2? .content или .main или ещё что-нибудь, но не .aside2 >>12. <h1>Welcome to company name</h1> - какого чёрта на странице 10 заголовков первого уровня? Да, <h1> там явно не к месту. Всё-таки в HTML 4 структуру выстраивать можно только с помощью заголовков. Сейчас же её выстроить нельзя. >>Во-первых это навигация (хлебные крошки), а значит нужно делать списком Почему? ПОЧЕМУ? Я понимаю, что этот совет пошёл со времен, когда навигацию делали таблицей. Естественно список лучше, чем таблица. Что изменится в конкретном случае при добавлении списка? Только несколько лишних пунктов в CSS. >>14. <div class="about about1"> - Что за класс about1? Вообще не вижу смысла в нём в этом месте. Кстати, а что он вообще делает) Намёк на гибкость. Если вдруг придётся каждый блок раскрасить в свой цвет, то можно это сделать сразу. Однако это так же вероятно, как и то, что .left должен будет отображаться справа. >>17. Кстати нижняя [панель] относится к футеру, так что тут так же грубая ошибка. Что же в этой ошибке грубого? Только то что .bottom_menu не входит в .footer. Если кто-то будет насаживать это на CMS, то ему совершенно всё-равно, как классы называются. >>19. В ИЕ6 вёрстка прыгает иногда, когда резко дёргаешь экран туда-сюда. В IE1 вообще ничего не работает. Очень плохо. >>21. В стилях нет совершенно организации. Очень плохо. Почему нет? Там есть совершенно чёткая организация. Комментарии, которые делят css на блоки и т. д. То что блоки не отделяются символами табуляции, то это всёго-лишь вопрос удобства.

Насколько я понимаю, тег <menu> должен использоваться для всякого рода тулбаров. Например, он бы подошёл для редактора bb-кодов на форуме. В моём понимании <menu> — это то, что не является ссылкой на страницу. Так что возможно <menu> подойдёт для 3. Контекстное меню для объекта на странице.

Так в копирайте стоит 2009 год. В то время border-radius в тестовом режиме реализовали в Firefox и Chrome. Да уже призывы были, но тогда игнорировать кучу браузеров было бессмысленно. А четыре пустых блока отличное решение для резиновых уголков. К тому же на семантику это никак не влияет. Пустой блок он и в Африке пустой блок. Они, конечно, не помогают, но и не мешают. Вопрос, а что из ещё предложенного на том сайте не рекомендуется делать? Например, можно ли с помощью списка определений делать формы? Я считаю, что можно, хотя уже начинаю сомневаться. Диалоги, конечно, тоже можно. Ведь для этого даже собирались новый тег в HTML5 вводить, но по мне довольно сложно потом с оформлением разбираться. Проще обычным параграфом сделать. Кстати, так что на счёт блока новостей? Просто меня немного смущает тот факт, что куча <article> будет без заголовка. Либо имеется ввиду то, что дата будет находится в <Hx>, и в <time>?