Универ c CSS
Вот опять не знаю что меня подвигло на переделку сайта с таблиц. Но дело уже сделано. Жертвой стал сайт моего универа. 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 рулит.
Кстати подробнее о проблеме перехода рунета на “стандартную” верстку читайте на “информационном буме” в выпуске Артемия Ломова “Свобода выбора или выбор свободы?”
При такой вёрсте следует помнить о, возможно, узком окне браузера, и обеспечить в этом случае горизонтальную прокрутку, а не ломающийся дизайн. Один из вариантов: min-width (+ реализация для IE), другой вариант: overflow:hidden (+ глюки в Moz.)
В целом эксперимент действительно удачен.
P.S. Как шаблон (и не только) советую первоисточник: http://www.w3.org/TR/xhtml1/#strict
http://ezhe.ru/ib/issue.html?165 : )
Кстати коль уж речь зашла о min(max)-width.
Рекомендую всем это решение
http://www.svendtofte.com/code/max_width_in_ie/
(Спасибо Denny за ссылку)
Да, это и подразумевалось. Обычно я сочетаю в одном выражении для ширины (width:expression) и min-width, и max-width. Не стоит только забывать экранировать такие извращения от нормальных браузеров при помощи условных комментариев (conditional comments) <!–[if IE]> <![endif]–>
Ну, кому что нравится, я например предпочитаю использовать такую конструкцию
/* FOR IE/win */
* html #IE{
свойство: значение
}
/* END OF hACK*/
Хотя твой вариант наиболее универсальный.
Я ищу общение с людми которых волнует тема, трудо
-устройство инвалидов. Я сам являюсь инвалидом и тоже
ищу работу, хотелось бы найти себе работу по душе-
например, надомную работу на камп.