Универ c CSS

11 Oct, 2004

Вот опять не знаю что меня подвигло на переделку сайта с таблиц. Но дело уже сделано. Жертвой стал сайт моего универа. http://univ.kiev.ua/ru/.

Почему Юнив.киев.юа?

Да просто потому что я студент этого ВУЗа. К тому же, случайно натолкнулся на форум, где его обсуждали.

Здесь все было не так просто как с Тендером. Код был не такой "плохой", тэг font не использовался. Однако таблиц было все же немало. И мне стало интересно сколько можно сократить?

С чего начал?

Начал разумеется с LAYOUT, то есть с основного разделения странички на блоки или информационыые области. С ширинами этих самых областей была такая путаница, что я решил не смотреть в оригинал и сделать все по-своему.

Для этого я использовал технику описанную в статье "Creating Liquid Layouts with Negative Margins".

Я разделил весь сайт на две информационные области. одна слева с изменяющейся шириной. Другая справа с фиксированной. Дальше применил вышеуказанную технику. И получил копию(почти) табличной структуры оригинала.

Структура

Стрнаничку верстал с шаблона XHTML 1.0 Strict., ворую тут. (но надеюсь скоро воровать с webstandard.ru) Для структурирования я использовал списки <dl> . Просто потому, что их удобно стилизовать. К тому же это один из ссамых гибких по семантике тэгов. Рекомендую. Вот собственно и все про структуру.

Подгонять?Увольте...

Где то на втором часу этого увлекательного занятия, оно мне вдруг надоело. Просто задолбало подгонять попиксельно к оригиналу.
Кроме того структура была составлена. То есть код бы уже не увеличился. Дописывал только CSS файл. Который к концу эксперимента занимал все еще меньше чем CSS файл оригинала. Поэтому я спокойно прекратил это убийство времени. Результат бы уже практически не изменился.
Поэтому то что сверстал я выглядит не совсем как оригинал, но по информации полностью соответствует. Только это мне и надо было.

Результат

Результат такой. У оригинала был размер кода (без картинок) 14.8(CSS) +5.5(CSS).
То что сделал я занимает соответственно 7.5(CSS) +3.5(CSS).
Урезало почти в два раза.
Я считаю эксперимент удачным.

Вывод

CSS+XHTML рулит.

Кстати подробнее о проблеме перехода рунета на "стандартную" верстку читайте на "информационном буме" в выпуске Артемия Ломова "Свобода выбора или выбор свободы?"

Сравнить

6 комментариев к “Универ c CSS”

1.Vanav | 11 Oct, 2004
При такой вёрсте следует помнить о, возможно, узком окне браузера, и обеспечить в этом случае горизонтальную прокрутку, а не ломающийся дизайн. Один из вариантов: min-width (+ реализация для IE), другой вариант: overflow:hidden (+ глюки в Moz.) В целом эксперимент действительно удачен. P.S. Как шаблон (и не только) советую первоисточник: http://www.w3.org/TR/xhtml1/#strict
2.witness | 12 Oct, 2004
http://ezhe.ru/ib/issue.html?165 : )
3.akella | 12 Oct, 2004
Кстати коль уж речь зашла о min(max)-width. Рекомендую всем это решение http://www.svendtofte.com/code/max_width_in_ie/ (Спасибо Denny за ссылку)
4.Vanav | 13 Oct, 2004
Да, это и подразумевалось. Обычно я сочетаю в одном выражении для ширины (width:expression) и min-width, и max-width. Не стоит только забывать экранировать такие извращения от нормальных браузеров при помощи условных комментариев (conditional comments) <!--[if IE]> <![endif]-->
5.akella | 13 Oct, 2004
Ну, кому что нравится, я например предпочитаю использовать такую конструкцию /* FOR IE/win */ * html #IE{ свойство: значение } /* END OF hACK*/ Хотя твой вариант наиболее универсальный.
6.Leonid | 14 Oct, 2004
Я ищу общение с людми которых волнует тема, трудо -устройство инвалидов. Я сам являюсь инвалидом и тоже ищу работу, хотелось бы найти себе работу по душе- например, надомную работу на камп.