Blog: Alter World

Виртуальный мир является своеобразным Alter Ego мира реального…

Blue Marble: CSS раскладка

Комментариев нет 2 января 2007, 13:15 • (X)HTML, CSS, UA, Мысли по поводу..., Заметки..., Дизайн

Интересное оформление веб-странички попалось на NASA Earth Observatory.

В данном конкретном случае все сделано на таблицах и просматривается попытка создать “полиграфический” (журнальный?) вид страницы. На чистом CSS с привлечением div'ов такую вещь также можно реализовать достаточно просто при одном условии – каждая такая страница должна верстаться индивидуально. Для малых проектов это оправданно, а вот для средних и больших... сами понимаете какой объем трудозатрат светит в этом случае.
Blue Marble

Самый простой пример мало-среднего проекта – блог или электронный журнал. С одной стороны блоги и электронные журналы достаточно похожи друг на друга, с другой у них есть и свои фундаментальные отличия, но при всем этом аналогичный вариант раскладки применим к ним. Понятное дело, что писатель статьи в блог или журнал будет концентрироваться именно на написании статьи и оформлении ее графическими элементами (имеется ввиду содержательная часть статьи), а не ломанием головы над вопросом: “А как же это теперь сверстать для веба?” Значит нужно сделать универсальный и максимально простой вариант такой верстки именно для писателей.

На первый взгляд можно попытаться извлечь содержимое атрибута title элемента img в отдельный псевдо-слой и работать уже с ним. Извлекать можно при помощи чистого CSS или с привлечением ECMAScript. С первым вариантом я уже когда-то баловался – оказалось, что без “костылей” в этом вопросе никак. В случае примения скриптов также можно нарваться на постройку “костылей”, но тут уже окончательный приговор дадут только тесты из разных браузеров.

Что-ж, задача сформулирована – осталось ее решить.

Изначально я подумывал об использовании специальных слоев для всего текста, но по зрелому размышлению пришел к выводу об избыточности костылей. Учитывая, что сами картинки и абзацы имеют блочную “основу” я остановился на использовании этих свойств соответствующих тегов.

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

В данной верстке есть пару моментов, которые я не знаю как решить простым способом:
1. Ширина картинок может быть либо 350, либо 500 пикселей (или других фиксированных размеров — в зависимости от ширины блока #content). Если делать картинки произвольной ширины, то нужно будет подумать о написании других CSS-правил (основная проблема возникнет с однопиксельной границей справа).
2. Описание узкой картинки не должно быть более высоты картинки.

Комментариев нет

Вы можете подписаться на комментарии к этой статье через RSS или отправить к ней TrackBack.

Оставить свое мнение

XHTML: Вы можете использовать эти тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>