CSS верстка без фиксированной ширины

Question

Я никоим образом не разбираюсь в CSS; Я знаю это в некоторой степени, но не очень глубоко; поплавок и IE6 заставляет меня плакать. Поэтому я всегда рад видеть, что люди могут с этим сделать.

Однако в большинстве примеров, которые я вижу, используются фиксированные размеры. Насколько я понимаю, это потому, что CSS такой хитрый, и гораздо проще взломать, когда элементы имеют ширину, особенно в IE6.

Но мне действительно нравится гибкая ширина. И поэтому я не понимаю, почему неправильно делать дизайн с помощью таблиц? Есть книга под названием & Quot; Все, что вы знаете о CSS, неверно! & Quot; что объясняет, как хорошо, что теперь мы можем создавать макеты таблиц с помощью CSS в последних браузерах ... но разве мы не можем делать это все время с помощью HTML-таблиц? Да, это не CSS и, возможно, не так чисто, как чистый CSS ... но, в конце концов, макет таблицы IS , что нам часто нужно, и если нам нужно выбирать между злым хакерским CSS и простым но не достаточно чистая таблица HTML, я не понимаю, почему любой из этих вариантов следует считать плохим. ПОЦЕЛУЙ это хорошо, не правда ли?

Или, может быть, я не понимаю этого, и вы МОЖЕТЕ сделать макеты в виде таблицы в CSS - которые работают в IE6 - без особой боли в заднице? Есть примеры таких сайтов?

ОБНОВЛЕНИЕ: Да, я знаю о разделении контента и стиля. На самом деле, я фанатичен в отношении DRY, SRP и других вещей, которые должны сделать дизайн Вот почему я действительно пытался делать вещи в CSS; но если это НАСТОЛЬКО сложнее и ненадежнее таблиц, например, написано в книгах, подобных упомянутым выше, то зачем так стараться? Я не говорю, что все должно быть сделано в таблицах; но если это действительно проще , чем CSS - почему я должен предпочесть CSS простому и предсказуемому решению?

То есть я не говорю, что вы должны использовать таблицы всегда. Имейте в виду макет главной страницы - он независим и не влияет на другие страницы, я могу без проблем переключаться с CSS на таблицы и обратно через 20 минут (на самом деле я это уже делал) - ПОЧЕМУ я должен придерживаться CSS, даже если таблицы без вреда?

ОБНОВЛЕНИЕ: я нашел, что это очень хорошее резюме того, что я пытался сказать: http://www.flownet.com/ron/css-rant.html . И обсуждение http :. //rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments

Для тех, кто заинтересован, вот еще лучшая статья: http://kv5r.com/ статьи / DEV / layouttables1.asp

Answer 1

Вы по сути правы. Нет ничего плохого в использовании таблиц для разметки, если для доступности порядок ячеек соответствует странице. Лично я считаю фиксированную ширину гораздо худшим ухудшением юзабилити, чем таблицы для макета.

Когда вы используете таблицы для разметки, обязательно используйте стили width: 100%; table-layout: fixed (и <col> со стилем width), чтобы браузеры могли правильно выложить таблицу с самого начала (что исправляет один из проблемы с удобством использования таблиц имели макеты), и поэтому вы не зависите от довольно плохого автоматического определения ширины в IE.

Хотя я, конечно, предпочитаю CSS для макета везде, где это возможно, и наиболее простые макеты сайтов могут быть разумно достигнуты с использованием только CSS (особенно сейчас IE5 и его Quirky Box Model больше нет), в некоторых случаях CSS не может его взломать и столы могут. Распространенным случаем являются сложные формы ширины жидкости.

Наиболее существенной проблемой является отсутствие возможности произносить такие вещи, как width: 100%-10em, чтобы получить столбец, ширина которого составляет окно просмотра минус фиксированный размер для другого столбца. Для простых случаев вы можете обойти это с помощью полей и div-обертки, но как только вы начнете переупорядочивать элементы на своей странице и добавляете несколько оберток просто для того, чтобы заставить работать CSS-макет, вы уже перепутали презентацию с содержание: не очень сильно отличается от таблиц.

В худшем случае вы получите глупые & # 8216; CSS-фреймворки & # 8217; которые требуют, чтобы вы использовали вложенные и фиксированные имена классов, чтобы полностью указать макет внутри самой разметки. Это не лучше, чем таблицы вообще; Я нахожу абсолютно веселым, что этот безнадежный возврат к старым плохим временам считается модной передовой техникой Web 2.0.

CSS3 работает над некоторыми интересными альтернативами текущим вариантам позиционирования, которые могут день доставить на обещание полной разметки и разделения макета. Но сегодня далеко.

Answer 2

Посмотрите Yaml и Жидкость 960gs . И то, и другое очень помогает с кросс-браузерной версткой. Макеты таблиц не являются ответом, и IE6 рано или поздно исчезнет.

Answer 3

Существует причина, по которой таблицы HTML плохи для чего-либо еще, кроме табличных данных. HTML является языком разметки для содержимого данных и, следовательно, должен содержать группы фактических данных, а не макет для этих данных. CSS предназначен исключительно для макетов и стилей; таким образом, его имя. Поэтому CSS должен содержать весь внешний вид веб-страницы, в то время как HTML содержит структуру данных; и никогда не встретимся между ними.

Делать все в таблицах плохо по причине.

Вы должны думать об этом как об абстракции между стилем и содержанием, и вы можете получить хорошее краткое изложение здесь: http://www.alistapart.com/articles/separationdilemma/

Также в прямом ответе на ваш вопрос перейдите к «A List Apart» и найдите свои статьи. Они как бы описывают путешествие, которое вы собираетесь совершить здесь: http://www.alistapart.com / статьи / путешествие /

почему я должен предпочесть CSS простому и предсказуемому решению?

Это то, что мы пытаемся сказать. В краткосрочной перспективе это может показаться проще, но все, что вы напишите, будет менее трудоемким и трудным для редактирования в будущем. Вы можете пойти и написать веб-страницу, которая кажется проще в краткосрочной перспективе, но вы просто наносите удар себе в ногу на потом, когда хотите сделать больше. Почему бы просто не сделать это правильно в первый раз? (это всего лишь небольшое количество дополнительных усилий на самом деле)

Answer 4

Просто потому, что CSS-разметка является проблемой для вас, это не делает ее хуже таблиц. Заявив об этом, вы совершаете логическую ошибку, известную как релятивистская ошибка.

Как только вы полностью поймете CSS, как его использовать и большинство различных браузерских изысков, вы обнаружите, что он значительно превосходит HTML-таблицы.

Разметка должна быть семантической. То есть он должен точно описывать содержание, которое он содержит. Это делает его машиночитаемым (для SEO и других приложений). Таблицы для разметки совсем не семантические.

Абстракция различных слоев помогает сделать сайт намного проще в обслуживании. Сохраняйте содержимое в HTML, поведение в Javascript и представление в CSS.

Вы правы, что у CSS есть свои недостатки. Но таблиц гораздо больше, что намного хуже.

Answer 5

Причина, по которой вы не хотите создавать разметку с использованием таблиц в качестве макета, заключается в разделении дизайна и содержимого.

Ваша разметка должна рассматриваться как идеальное описание содержимого, которое в ней находится. По сути, вы должны разметить свои страницы в HTML, прежде чем вы когда-либо коснетесь стилей. Затем вы бы использовали CSS, чтобы изменить способ, которым ваша семантическая разметка выглядит по умолчанию.

В том-то и дело, что выкладываемый вами веб-контент не является «табличными данными» - разметка предназначена для чтения компьютерами / ботами, а стили, которые мы видим, для нас, смешивание двух просто смешивает одно или оба стороны, как правило, за дополнительную стоимость ремонтопригодности.

Answer 6

Вот сценарий, с которым я столкнулся лично, и который мне понравится. Примечание: я не защищаю & Quot; no-table-at-all & Quot;, это действительно отвечает другим требованиям.

Я создал форму (визуально нисходящий поток):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

Тогда заказчик хотел более структурированный трубчатый, подобный этому:

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

Поскольку я не использую таблицу типа TR TD, я могу легко (почти) преобразовать структуру с помощью модификации CSS и незначительных изменений разметки HTML.