Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 49
Спасибо за очередной качественный перевод, плюс к карме.
Замечена опечатка: "Поскольку относительное позиционирование не влияет на потоМ (flow) документа".
Замечена опечатка: "Поскольку относительное позиционирование не влияет на потоМ (flow) документа".
Спасибо за перевод, очень интересно.
Вижу навскидку два минуса приведённого способа:
- вот это приблизительное 5em для цены
- результат грустно выглядит без css
Я бы сделала таблицей. Исходя из соображения, что прайс-лист — вполне себе таблица.
Но это я, видимо, занудствую.
Вижу навскидку два минуса приведённого способа:
- вот это приблизительное 5em для цены
- результат грустно выглядит без css
Я бы сделала таблицей. Исходя из соображения, что прайс-лист — вполне себе таблица.
Но это я, видимо, занудствую.
да нет, не занудствуете, если походить по ссылкам на готовом примере, там есть вариант с таблицей. Автор утверждает, что кода на 30% больше. Я не вижу в этом большого преимущества (да и семантическая ценность сомнительна), но в данной статье просто представлен красивый пример CSS-верстки.
а я делал подобное через список определений. ИМХО он для данной цели замечательно подходит
Спасибо за начинание и перевод, но пробегитесь ещё разок по опечаткам и попробуйте вставить больше кода, может быть. Почему-то тяжело идёт.
А я все ждал, когда переведут :)
для любопытствующих 
CurlyBrace
CurlyBrace
Читал это в каком-то левом переводе, только сейчас разобрался.
СПАСИБА!!!
СПАСИБА!!!
класс! давно искал хорошее, пошаговое руководство о том, КАК же надо с помощью css верстать ;) (а то у самого выходить корявовато). спасибо за перевод, а статью в закладку...
кстати, в html есть такие неплохие тэги dl dd и dt
В данном случае список определений (DL) не применим, ибо всегда можно добавить рядом с ценой, например, калории или вес, а это будет уже стандартно-табличная структура, ну ненумерованный список, на худой конец, но никак не пара заголовок-описание.
Ведь одному заголовку вполне может соответствовать несколько описаний, не так ли?
формально вы правы, но список определений не для того придумывали, чтобы таблицу заменить. Процитирую w3.org
да, othеr applications могут подразумевать все, что угодно. Но использовать список для связей одного-ко-многим не принято в мировой практике, мало распространено. Хотя ввиду тяжелого отношения браузеров с таблицами, это может быть единственным адекватным решением.
Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications).
да, othеr applications могут подразумевать все, что угодно. Но использовать список для связей одного-ко-многим не принято в мировой практике, мало распространено. Хотя ввиду тяжелого отношения браузеров с таблицами, это может быть единственным адекватным решением.
описание не может содержать количество калорий?
Обратите внимание на станицу конечного результата. Там есть пример и с dl:
http://www.pmob.co.uk/search-this/list-w…
http://www.pmob.co.uk/search-this/list-w…
Интересно было почитать. Хочу отметить что пунктиры в IE6 можно было бы оставить только потому что в этом случае не нужно использовать хаков. Кстати это интересная мысль: Что значит кросбраузерная вёрстка
1 сайт выглядит одинаково во всех браузерах?
2 сайт выглядит адекватно во всех браузерах?
1 сайт выглядит одинаково во всех браузерах?
2 сайт выглядит адекватно во всех браузерах?
ой, только недавно читал чью-то статью про "одинаковость" во всех браузерах, там автор придерживался мнения, что будем верстать по стандартам, а в IE покажет "урезанную" версию, типа 20% — уже хорошо. Сколько людей, столько и мнений. Мое личное видение: сайт должен выглядеть одинаково у 99,9%, у остальных — адекватно.
Опечатка. Абзац за вторым рисунком «Я не приводу сейчас полный код разметки…».
За статью — спасибо. Очень кстати пришлась. Заплюсовал бы, если б мог.
За статью — спасибо. Очень кстати пришлась. Заплюсовал бы, если б мог.
Учите, ребята, буржуйский. Не забывайте посещать их же ресурсы по данной тематике. И тогда не нужно будет ждать переводов :) И будет из вас хороший веб-дев чуть раньше, чем у тех, кто плохо дружит с английским.
А автору, anyway, огромное спасибо :)
А автору, anyway, огромное спасибо :)
я бы сказал не "чуть раньше", а "чуть дороже". Совсем чуть-чуть :))
Есть еще альтернативный путь развития - статей специально не читать, а тупо верстать, верстать, верстать. По необходимости уже находя решения и воркэраунды в гугле.
После 20-го сайта такие примеры будут решаться в уме с учетом большинства возможных подводных камней.
"Алгоритм" просто сам выстраивается в мозгу при виде задачи.
Может, это не самый лучший путь, изобретать велосипед. Времени он займет точно больше. Зато в мозгу укладывается прочнее и более органично что-ли.
Ни на чем так не учишся, как на своих ошибках =)
После 20-го сайта такие примеры будут решаться в уме с учетом большинства возможных подводных камней.
"Алгоритм" просто сам выстраивается в мозгу при виде задачи.
Может, это не самый лучший путь, изобретать велосипед. Времени он займет точно больше. Зато в мозгу укладывается прочнее и более органично что-ли.
Ни на чем так не учишся, как на своих ошибках =)
боюсь, что тут понадобится на 20, а 200 сайтов :)
Скорее это не альтернативный, а параллельный путь развития :) Опыт, как никак. Не все приёмы описаны в статьях ;)
Ваш путь, конечно, лучше и качественнее - самому всё изобретать, медленно но верно становится мастером. Но он нежизнеспособен в бизнесе. Пока будешь постигать всё методом тыка, конкурент прочтёт три книжки, посетит два курса и начнёт продавать сайты :)
Это просто чудо какое-то! :) Я нашел то, что искал. Как-раз вовремя. Плюсую, спасибо.
Спасибо! Очень полезная статья.
Огромное спасибо за проделанную работу!
Спасибо за перевод, статья хорошая, но вижу пару проблем.
CSS всё-таки создавался для быстрого и безболезненного изменения представления документа. Уменьшение размера страниц это его очень приятный побочный эффект. Я согласен с автором, что "стоит заботиться о чистоте кода и минимизировать разметку", но считаю ошибкой просто пытаться написать как можно меньше.
Например, использования <span> и <div> без указания классов зачастую приводит к необходимости изменения структуры кода самого документа при его расширении, что получилось у автора с тегом <p>. Документы, кстати, в количестве нескольких тысяч могут лежать в базе или кэше — попробуй обнови. Да и сами div и span с точки зрения семантики так и напрашиваются на то, чтобы уточнить, что же именно в них заключено.
По этой же причине мне не нравится, что автор использует список для эмуляции таблицы. Считаю, что предложенные данные это именно таблица из двух столбцов. Как "поковыряться" — интересно, но, как тут уже упомянули, если понадобится добавить вес, то без трудностей не обойтись. Да и реализация float в браузерах, на мой взгляд, работает не очень-то быстро — попробуйте поресайзить страницу с сотнями float-блоков.
Впрочем, превращать html в xml, перегружая семантикой, тоже не стоит. Рекомендую сначала просто полностью семантически сверстать сам html (для этого нужно понимать с какими данными ты работаешь и хорошо знать не depricated теги), а потом пытаться с помощью CSS привести его к необходимому виду. Если это не удается, тогда можно добавить дополнительные div'ы и span'ы, но желательно чтобы они также были семантически обоснованы.
Ну и замечу для новичков, что очень важно давать правильные имена классам. Они не должны описывать представление, а должны описывать суть. Т.е. нельзя использовать слова типа red, left, tabbed и т.д. Можно только семантические — menu, logo, totalCost и т.д. Когда пишут class="alignRight", это нисколько не лучше, чем align="right". Но тут также нужно заметить, что хороший CSS это прежде всего хорошая абстракция — нужно находить похожие элементы и выносить их в классы с адекватным названием. "alignRight" это уже просто слишком высокий уровень абстракции :) Баланс, как всегда ищется набиванием шишек)
В целом, если так подходить к верстке, то код получается очень чистым, наглядным и легко поддерживаемым, чего всем и желаю.
CSS всё-таки создавался для быстрого и безболезненного изменения представления документа. Уменьшение размера страниц это его очень приятный побочный эффект. Я согласен с автором, что "стоит заботиться о чистоте кода и минимизировать разметку", но считаю ошибкой просто пытаться написать как можно меньше.
Например, использования <span> и <div> без указания классов зачастую приводит к необходимости изменения структуры кода самого документа при его расширении, что получилось у автора с тегом <p>. Документы, кстати, в количестве нескольких тысяч могут лежать в базе или кэше — попробуй обнови. Да и сами div и span с точки зрения семантики так и напрашиваются на то, чтобы уточнить, что же именно в них заключено.
По этой же причине мне не нравится, что автор использует список для эмуляции таблицы. Считаю, что предложенные данные это именно таблица из двух столбцов. Как "поковыряться" — интересно, но, как тут уже упомянули, если понадобится добавить вес, то без трудностей не обойтись. Да и реализация float в браузерах, на мой взгляд, работает не очень-то быстро — попробуйте поресайзить страницу с сотнями float-блоков.
Впрочем, превращать html в xml, перегружая семантикой, тоже не стоит. Рекомендую сначала просто полностью семантически сверстать сам html (для этого нужно понимать с какими данными ты работаешь и хорошо знать не depricated теги), а потом пытаться с помощью CSS привести его к необходимому виду. Если это не удается, тогда можно добавить дополнительные div'ы и span'ы, но желательно чтобы они также были семантически обоснованы.
Ну и замечу для новичков, что очень важно давать правильные имена классам. Они не должны описывать представление, а должны описывать суть. Т.е. нельзя использовать слова типа red, left, tabbed и т.д. Можно только семантические — menu, logo, totalCost и т.д. Когда пишут class="alignRight", это нисколько не лучше, чем align="right". Но тут также нужно заметить, что хороший CSS это прежде всего хорошая абстракция — нужно находить похожие элементы и выносить их в классы с адекватным названием. "alignRight" это уже просто слишком высокий уровень абстракции :) Баланс, как всегда ищется набиванием шишек)
В целом, если так подходить к верстке, то код получается очень чистым, наглядным и легко поддерживаемым, чего всем и желаю.
Спасибо за перевод.
Очень интересная и познавательная статья.
Очень интересная и познавательная статья.
Тьфу, табличные данные — в таблицы!
Автору: было бы хорошо, если в теги добавите хотя бы CSS.
Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних <p>.
Непонятно, зачем делать 20x1 гиф, когда можно 2x1, и зачем юзать border dotted если все-равно резать этот гиф для IE (да ещё и вставлять хаком)... но это уже дело вкуса. :)
Ниже приведу свой вариант, вернее различия — можно заменить 4 соотв строчки и убирать лишние тэги p из оригинала:
#wrap ul { width: 420px; padding: 20px 40px; position: relative; bottom: 2px; right: 2px; list-style: none;
background: #eff2df; border: 1px solid #4c7300; }
#wrap li { width: 320px; padding-right: 100px; margin-top: .5em; position: relative;
background: url(images/dotted-leader.gif) left bottom repeat-x; line-height: 1.19; }
#wrap li em { background: #eff2df; padding-right: 5px; }
#wrap li span { background: #eff2df; padding-left: 5px; position: absolute; right: 0;}
Непонятно, зачем делать 20x1 гиф, когда можно 2x1, и зачем юзать border dotted если все-равно резать этот гиф для IE (да ещё и вставлять хаком)... но это уже дело вкуса. :)
Ниже приведу свой вариант, вернее различия — можно заменить 4 соотв строчки и убирать лишние тэги p из оригинала:
#wrap ul { width: 420px; padding: 20px 40px; position: relative; bottom: 2px; right: 2px; list-style: none;
background: #eff2df; border: 1px solid #4c7300; }
#wrap li { width: 320px; padding-right: 100px; margin-top: .5em; position: relative;
background: url(images/dotted-leader.gif) left bottom repeat-x; line-height: 1.19; }
#wrap li em { background: #eff2df; padding-right: 5px; }
#wrap li span { background: #eff2df; padding-left: 5px; position: absolute; right: 0;}
Может, фигню скажу, но почему не dt и dd используются?
делал недавно такое... только пришлось сделать через таблицы, причем каждая строчка - таблица.
а всё из-за того, что у меня на странице фон- картинка (т.е. закрашивать фон у div`ов - низя!)...
а всё из-за того, что у меня на странице фон- картинка (т.е. закрашивать фон у div`ов - низя!)...
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Практический CSS: рецепт успеха