Присоединяйся
Об авторе
Настоящее имя
Сергей Савостин
Местоположение
Запорожье
Род занятий
программист
Меню
RSS-лента
Симпатишный булет
12/04/2007 15:20 — savostin
Вот такой вот стиль:
выглядит вот так:
Привет
безо всякой графики. ;-)
P.S. Немного сперто и не совсем валидно, чисто для демонстрации...
<style>
.mybox
{
BORDER-WIDTH: 0.5em;
BORDER-STYLE: solid;
BORDER-COLOR: #A0F700 #65C000 #48A300 #82DA00;
display: block;
width: 0px;
float: left;
position: relative;
top: 0.2em;
margin-right: 0.2em;
}
</style>
выглядит вот так:
Привет
безо всякой графики. ;-)
P.S. Немного сперто и не совсем валидно, чисто для демонстрации...
- Блог пользователя savostin
- Войдите или зарегистрируйтесь, чтобы оставлять комментарии
Комментарии
Хм, хм-хм
1) Все надо перевести в lowercase
2) Это nonsemantic и, пардон, ИМХО, плохой пример использования CSS
Зачем писать навернутый излишний код (span) если тот же самый буллет, но с картинкой :) можно сделать стандартными средствами, отделив презентацию от содержания (что и является одним из преимуществ CSS дизайна) Такая картинка, помимо того, что кэшируется, "весить" будет байт 400
3) Использование position:relative мягко говоря чревато в некоторых контекстах, особенно содержащих float property.
семантик :)
О, пошли споры о семантике :) . Как я помню - xhtml все в нижнем нужно, а вот CSS - как нравится, хотя не в этом дело. Полного отделения презентации от содержания все равно не получится, не тот сейчас уровень поддержки CSS . Даже самые гуру семантического подхода, наподобие Зельдмана - все равно используют разные уловки.
А position:relative конечно чревато - но оно то и сделано для создания гибких разметок. Абсолютным позиционированием все не сделаешь.
я так и знал и сразу - в отказ
Я спорить о глупостях не хочу :) Но, вкратце отмечусь :)
"Полного отделения презентации от содержания все равно не получится, не тот сейчас уровень поддержки CSS "
Это глупости, простите. Современный уровень поддержки CSS (наименьший общий делитель - IE 6) вполне позволяет использовать XHTML 1.0 Strict Doctype в котором обязом презентация отделяется от содержания. Я делаю такие сайты с 2004 года.
"А position:relative конечно чревато - но оно то и сделано для создания гибких разметок. Абсолютным позиционированием все не сделаешь."
:) Абсолютным позиционированием все делать и не надо и вредно.
В указанном примере используется и флоат и релатив, в случае если все это в контейнере, который, например флоат куда-то - это все может развалиться из-за того, что вместо простой картинки используется нестандартный подход - наворот. Это вредно, особенно в категории "Мастеркласс"
Ну что же - честь вам и хвала, если такие сайты делаете :) . Просто мне кажется, если бы семантический подход был так удобен, прост и универсален - все бы на него давно перешли. Но этого не происходит.
:) Если бы все было так просто
За похвалу, честное спасибо, но есть такая поговорка "Отсутствие порока не есть благодетель", так что гордиться особо тут нечем, разве что можно более-менее уверенно считать себя в этом деле профи.
"Просто мне кажется, если бы семантический подход был так удобен, прост и универсален - все бы на него давно перешли. Но этого не происходит."
Рыба ищет где глубже, а человек, - где легче. Легче - просто потому, что есть "старая" школа (если говорить о русскоязычных мастерах, то это те, которые учились на "Ководстве") и "новая" школа CSS дизайна. Старичкам несруки, некогда, а то и просто "влом" изучать новые, современные техники кодирования. Оно и понятно, вот только может ли считать себя такой человек профессионалом? Это вопрос. К тому же, и я постоянно в этом убеждаюсь, понятие "веб-дизайнер" воспринимается как "специалист по корелу, иллюстратору, фотошопу и флэшу", а, к сожалению, никак не "специалист по веб-технологиям, UX, информационой архитектуре, SEO, accessibility и usability.
Что касается "неудобства" семантического подхода, то я лично, не понимаю о чем Вы говорите, уверяю Вас - это НАМНОГО удобней, чем паять табличные теги.
Делать меню на списках - намного удобней и проще, чем таблицами.
Редактировать текст, размеченный параграфами - намного удобней и проше, чем тотже текст, размеченный таблицами.
Использовать стандартные заголовки намного проще и выгоднее (с точки зрения SEO), чем выделять слова жирным текстом с помощью презентационных тегов.
Список можно продолжать долго, я уже, если честно, запарился об этом писать :)
Что может быть проще и удобней, чем использовать соответствующие смыслу и значению элементы разметки?
Лень и пофигизм кодеров, плюс "раннее отрочество" нашей индустрии мешают продвижению современных технологий, не более того. Но это не долго уже продололжаться будет, - когда владельцы начнут реально терять бабки на поделках, вот тогда многие "веб-дизайнеры" пойдут заниматься более интересным для них делом :)
Интересное обсуждение выросло из статьи о кнопочке :))) . Сайт я ваш давненько уже читал, так что вашу позицию знаю.
Это все ясно. Логический подход лучше визуального. Но как мне кажется - есть одно но. Как бы ни был удобен структурный подход - на его изучение, а особенно на освоение продвинутых методик требуется немало времени, а табличный можно нормально разобрать если не за несколько часов - то за несколько дней. Да и это тоже общеизвестно.
И с русскоязычными учебными материалами все не так уж отлично. Сейчас намного лучше, но, к примеру, года 2 назад купил я книженцию по CSS (уже не помню, что за книга) - так лучше бы я ее и не открывал. Рассказ в ней был о развеселом строгании разного кода под нетшкаф 4 и ие 5. И это был как раз 2004 год :) . После таких материалов надолго отпадает желание лезть в семантические дебри, а спокойно размечивать таблицами.
Насчет удобства семантизма - я бы точнее сказал - структурный подход менее интуитивно понятен. В обычном табличном - человек видит внутреннюю структуру и внешняя примерно ей же соответствует. Ему больше ничего не нужно. А отдельные элементы CSS, тоесть меню на списках, стандартизированные заголовки и тд - используют многие вместе с таблицами. Вопрос именно в полном отделении структуры от содержимого.
Насчет Ководства не соглашусь - там скорее общие идеи дизайна и компоновки обсуждаются. Если Лебедев там про таблицы и упоминал, то что-то не припомню...
И совсем лирическое отступление. Лень и пофигизм кодеров будут всегда. Идеальный мир появится еще нескоро. Не лучше ли предложить подход, использующий эти их качества :) .
Мне трудно согласиться
"Насчет удобства семантизма - я бы точнее сказал - структурный подход менее интуитивно понятен."
Мыслить "ячейками" прикажете? Или сетками? Абзац - это абзац, p, заголовок это хидер -h список это ul (unordered list) или ol (ordered list) или dl (definition list). Как Вы представляете себе "интуитивную логику" табличного дизайна? Я, конечно, имею ввиду не лично Вас, а защитников табличного дизайна.
Я думаю, что не ошибусь - большинству - лень переучиваться и все. А еще скорее всего, начинали-то с программ, типа фотошопа, который может "порезать" картинку на "слайсы". Привыкли.
"Как бы ни был удобен структурный подход - на его изучение, а особенно на освоение продвинутых методик требуется немало времени, а табличный можно нормально разобрать если не за несколько часов - то за несколько дней"
!SIC!
"Структурный код" - это простейший, я подчеркиваю, простейший HTML. Абзацы, списки, дивы, спаны, заголовки - ВСЕ. Да и DTD наизусть учить нет необходимости :)
CSS позиционирование, конечно, несколько сложнее. Но достаточно освоить базовые приемы и сделать пару страниц и многое прояснится. Нужно иметь, также, возможность просматривать код в различных браузерах ВО ВРЕМЯ создания, чтобы было сразу понятно, где вылазят косяки.
Но даже если бы это было действительно очень сложно, значит ли это, что нет смысла внедрять эту методику? Почему сайт должен обладать худшими, низкими техническими характеристиками из-за того, что его кодер "ламо"? Так скоро, в исторической перспективе, большинство сайтов станут представлять из-себя те или иные виды веб-сервисов, конформных (и валидных!) XML ресурсов. Вы же не думаете, что XSLT парсеру понравится извлекать данные из табличной ячейки третьего, а то и четвертого уровня вложенности? Это врядли.
Чего ж это вы так завелись :) . Я не сторонник табличной разметки, я просто пытаюсь описать альтернативное мнение и изучить причины, почему его используют. И не приказываю я ничем вам мыслить :) .
Насчет "лень переучиваться" - вероятно вы правы :) . Я бы точнее сказал - лень учить то, что даст, на первый взляд, тоже, что и так есть вместе с абстрактными перспективами.
:) есть две шутки на эту тему
1) Есть только 2 мнения, мое и неправильное
2) Геббельс известен в частности тем, что говорил, "Когда я слышу слово "культура" моя рука тянется к парабеллуму". Моя рука тянется, когда я слышу "табличная верстка"
а если серьезнее, то так называемая табличная верста, -это не альтернатива, это, увы, анахронизм.
Совет начинающим тут простой, читайте блоги и не читайте книг по HTML, изданных до 2004 года
Для новичков табличная верстка может и подходит... А для профессионалов выбор однозначен.
Как минимум: SEO, трафик, поддержка, редизайн, и.т.д.
Все это делает табличную верстку морально устаревшей.
Это более простое, но менее выгодное решение в долгосрочной перспективе.
А кто учит новичков?
Вот тех, кто учит новичков верстать таблицами надо палками бить. Больно.
И заметьте, ни слова не было сказано о таком понятии как accessibility, людей не жалко вам, изверги? :)
Я не за то, чтобы учить новичком, которые станут профессионалами.
Я к тому, что если Вася Пупкин захочет сделать себе сайт, то на данный момент ему проще это будет сделать таблицами :)
ура
наконец-то появились люди, которым это интересно ;-)
а то я со своими занудными штуками видать не то пишу.
это конечно же не пример для подражания и не библиотека для мастер-класса (просто больше некуда было), а способ найти людей тут.
бум писать дальше ;-) а что другие молчат в своих "блогах" - делимся опытом же ж...
надо просто сайты делать
И продавать их дороже
тебя спросят, а почему твой сайт, на котором меньше картинок, нет флэша и баннеров мигающих, а стоит он дороже, чем у васи пупкина. А ты ответишь им, - а мой сайт готов к распечатке автоматически (дополнительный маркетинг), лучше позиционируется в рейтингах поисковиков (PR выше), прост и удобен в использовании, а баннеры просто не отвлекают пользователя от поиска и усвоения информации, к тому же, такой сайт куда проще администрировать, это сможет делать даже ребенок.
И идешь в банк за деньгами :)
Тоже не аксиома
Это тоже тема для обсуждения. Встечал немало сайтов совершенно невыразительных и серых, но имеющих валидный код и обвешаных значками соответствия стандартам W3C как орденами. Складывалось впечатление, что их создателям кроме структуры больше ничего и не нужно. Только вот и их сайты мало кому нужны, так как не дают никакого визуального и эмоционального контакта, а еще воспитывают отсутствие вкуса у посетителей.
И насчет PR выше - это вы уже говорите глупости. Занимаюсь SEO уже не первый год и вполне уверенно могу сказать, что нормально сделанные табличные сайты практически ничем не проигрывают сайтам на CSS в этом плане. Тут важнее структура организации самого сайта, а также внешние факторы. Ну да это уже другая история :) .
По поводу SEO в этом плане думаю так: они (таблицы) ТОЧНО не выигрывают, а в недалеком будущем тенденция только к отставанию от семантичных.
так практически или ничем?
Мой аргумент - лучше индексируются, так как "глубже" прочитываются, за счет того, что контента больше, чем кода. Я согласен, что это не главный, ведущий аспект хорошего SEO, но тем не менее он имеет место. Я так же согласен, что табличные сайты могут иметь нормальное позиционирование. Я думаю, что самый самый страшный секрет SEO это количество внешних ссылок и пролинкованность внутренняя, плюс нюансы. Ну и конечно, вебрайтинг.
Насчет непривлекательных валидных сайтов - надо ли говорить, что это все вторичные факторы, и сегодня, ни у кого уже не вызывает сомнения, что на CSS позиционировании можно делать великолепные, интенсивно насыщенные графикой страницы? Таблицы тут нидочого :)
"а еще воспитывают отсутствие вкуса у посетителей"
Отсутствие вкуса у посетителей воспитывают порталы, наполненные всплывающей в центр экрана баннерной рекламой.
Сайт, выполненный в стиле минимализма не может воспитать отсутствие вкуса, хотя бы потому, что как правило, такой сайт сосредоточен на подаче информации, а не графики. Информации. Хороший дизайн он прозрачен, как говорят, его вообще, не видно :)
Мое мнение - сайтам нужны "шкуры", скины, а не пренасыщение графикой, а любой грамотный "скин" это чистый минимализм.
Никаких страшных секретов SEO нет :). Купите книгу Ащманова - там все описано.
Я говорю не о том, что нельзя сделать великолепные сайты :) . Я подметил, что сейчас при CSS разметке некоторые считают только ее наличие достаточным и приводят доводы, о которых вы говорили выше.
К слову, о минимализме. Приведу еще раз одну из цитат Клонингера. Это естественно мое личное мнение :)
"В конечном счете людьми (да, даже заказчиками) движут чувства. Любой акт успешной коммуникации затрагивает не только ум, но и все человеческое существо - тело, душу и дух. Да, посетители должны суметь воспользоваться сайтом. Но они также должны иметь возможность прочувствовать ваш сайт. Сеть не база данных. Сеть является способом коммуникации".
100%
Я согласен с Вами и Клонингером на сто процентов. Та проблема, о которой Вы говорите, скорее всего проистекает вот откуда - люди просто учатся СРАЗУ верстать стилем и чувствуют свое "превосходство" что-ли. Эстетика сайта приходит уже потом и прицепить ее (эстетику) гораздо легче, освоив CSS
А вообще эта ветка дискуссии как спор какая лучше, - умная или красивая :) Лучше когда умная красавица, не правда ли? :)
Несомненно :0) . Но как и в жизни - это случается не так часто, как хотелось бы.
хм
какой замечательный булет, да IgrOK? ;-)
Замечательна такая дискуссия на сайте :)
Вебстандарты - фигня
Вы бы сразу написали, стандарты- фигня, CSS- "косячит", сырой еще, не готов к использованию, а таблицы рулят и тогда флейма будет достаточно :)
IgrOK может подраздел какой в мастерклассе - "полезные ссылки", пусть народ изучает - каждый день можно чтук по 20 добавлять :)
Обязательно! У самого такая идея давно уже зреет. Сегодня сделаю.
А если развить тему - и сделать именно подборку ссылок и замечаний для последовательного изучения без лишних ошибок :), организовать что-то вроде wiki , в друпале это есть.
продолжим?
<div class="container"> <div class="corner"> <div class="forImage"> <div class="forPadding"> <div class="forPos"> <div class="forSomething"> Кусок текста </div> </div> </div> </div> </div> </div>не более
симпатишнасемантична, чем<table class="some"> <tr> <td> Кусок текста </td> </tr> </table>Что скажете? ;-)
Согласен. Но как же модные округлости? :)
э-э
я чего-то не знаю в терминологии? какие округлости?
Сглаженные уголки.
а
так вот откуда ноги у таких конструкций растут!
Да "округлости" и в табличной верстке приносят много лишнего кода.
Но вопрос опять же в том, что реально добиться нужного "выгляду" с помощью 100% семантического CSS нельзя, так? Более того, табличная верстка жестче в смысле изменения размеров окна - ничто не плывет, проще привязывать к размерам окна (особенно в нижней части). Только с развитием CSS верстки начали появляться в таком количестве всевозможные хаки и пр. "хитрости", которые ну никак не вяжутся со стремлением "сделать все по-правилам". Так куда это все приводит? ;-)
Да все можно
Уметь надо. Все это очень зависит от задачи и от контекста. Иногда правильнее дизайн изменить, но с точки зрения доступности, использовать таблицы там, где нет табличных данных это неправильно и вредно. О чем тут спорить?
Нафик округлости :) . А такие конструкции некоторые называют дивитсами :))) .
Это классическая подмена понятий
Во-первых, divities, действительно bad practice, но, в отличие от таблицы или табличной ячейки, div, равно как и span НЕ ИМЕЕТ СЕМАНТИКИ, то есть не несет семантического значения вообще. Это надо понимать. И с точки зрения скринридера, этот убогий пример действительно намного более accessible, чем таже байда в таблице, так что пальцем в небо.
Во-вторых, извратить можно любое понятие и начинание. Вы что изобразить-то хотели этим примером? Если "модные округлости", которые к тому же еще и резиновые, то, опять же, это более правильно, чем использование таблиц. Также, для этого эффекта можно использовать JavaScript.
Чтобы понять насколько удобнее и правильнее использовать семантическую верстку (я так понимаю Вы это хотите показать, а не обратное :) ) - лучший пример это простое меню
Правильно делать списком, некоторые делают с помощью таблиц.