10 заметок с тегом

Верстало

Всех достаёт, меня тоже или «Как чистить кэш Оперы при отладке».

Как-то раз Опера была замужем за тем-самым-разрабом и они наделали кучу идей. Лет на десять точно. Румяные радовали планету с девяностых до инцеста с Хромом. Эти уродцы пошли в папу, а мамку стало дуть такими запорами, что вывалить из неё кэш одним нажатием, не могут сотней форумов со всеми кодинг-павликами. Годами причём.

Выход есть и не сильно кривой. Хотя бы править ничего не нужно, и то спасибо.

  1. Ctrl + Alt + I. Вылезет «Chrome DevTools» это теперь называется, а был какой-то «Dragon Fly», помнится.
  2. F1 → «Settings» → «Network».
  3. «Disable cache (while DevTools is open)».
  4. Рефрешить по Ctrl + R при открытом Девтуле.

Всякий новыйгод я это вспоминаю и забываю уже через день.

flushshsh

Чат Флайков прикручивается к сайтам, где общаются и готовы удивлять не меняя своего мнения.

Ни один Флайк не похож на другого фэйсом, за индивидуальность не беспокоимся. Сделать Флайка можно самому, а можно рискнуть и заказать случайного в реге чата. Только не обижаться — глаза и рот могут кого-то напомнить. Флайк как раз состоит из глаз и рта, генетическая особенность.

Каменты во Флайках пишутся как каменты, отправляются как и десять лет назад отправлялись.

Ничто не будет упущено: следи за всеми каментами сразу или за любой веткой. Вдавил кнопку где нужно, лови новости на почту. Надоело — отковырял.


Чего нет во Флайках

Во Флайках нет лайков и дизлайков. В них вообще нет репозаготовительной техники. Собеседники и критики оценивают и поддерживают друг друга бодрым словом.

Кроме лайков, Флайки лишены беспросветности затянувшихся диалогов. Чат сделан старпёрами, которые уже не помнят — зачем диалогу больше пяти уровней «отсир/ответ». Флайки завели себе хороших старпёров, плохому не научат.

Флайки как огня боятся мимики, они — ботоксные аскеты и вы не допроситесь у них смайликов, сколько не кликайте.

Нельзя Флайка заставить изменить своего мнения, на то и Флайк. Никаких редактур каментов.

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

Флайки могли бы обвешаться всяким, но любят себя за лёгкость на подъём. Так что никаких рег сквозь соцсетки, тут все свои. Зато нарваться на компашку Флайков где-то ещё, можно только неожиданно. При этом вам обязательно заорут «Флайкер!».

У Флайков пока нет кода, да и то ненадолго. Мало кто не захочет усадить внуков и выхватить от них лайфтайм-тоталреспект заявой «Это я кодил Флайков».

Кстати, во Флайках нет лишнего, тоже кое-что.

«Флайки»?

Некоторые Флайки скучают по лайкам, некоторые кричат «фу», но тех и других водой не разлить. Потому и «Флайки». А ещё они жидкие, флюшные, живут растеканием глаз и ртов во всю ширь. Биофак придерживается мнения о родстве с совами. Мы пока в шоке, а там видно будет.

Оккупация какая-то

Не стать хозяином своего Флайка не получится: раз зарегистрировался — всё, Флайк тебе.

Хорош понты колотить, покажи Флайка!

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

А без Флайка?

Флайкома вырастает с рожденья и на всю жизнь. Не нарисовал — сама вырастет, уж рега постарается. Вскочить может изумрудная или карминовая, не угадаешь. Общению любая не помешает: гордись, не ковыряй, общайся.

История

Сначала Флайков вообще хотели назвать Гибосами.

Цвет. Сплошной? Переливом?

Личико. Имячко.

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

Сайт — это прежде всего книга. Её можно просматривать, знакомиться с содержанием и картинками. А можно погружаться, становясь собеседником автору и соучастником героям.

Плохая книга, как и плохой сайт, читается «на отженись» — купил, пошёл отсюда, не мешайся. Хорошее пространство — это всегда квест с заветным концом и прозрачными промежуточными результатами. Так же и с разговаривающей книжкой — читаешь её раз, дружишься, а потом приходишь снова и снова — общаться-перечитывать.

Ускользающий смысл

Нет лучшего способа попросить посетителя уйти с сайта, чем встретить его маханиями рук перед носом — всеми этими самодвижущимися баннерами в пол-экрана. А то и во весь.

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

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

Посетитель (кстати за его счёт живут сайтики и владельцы) открывает страницы на своём устройстве. И управляет ими он же. Вэбмастер здесь давно номер десятый. Поэтому, одновременно с самостоятельным сдвигом чего-нибудь на экране, подсознание выдаёт чёткий сигнал — «вспышка слева». С вариациями.

Поднявшийся гость, отряхиваясь и озираясь, старается вспомнить — куда попал, что тут бумкнуло и откуда взялась тряпочка. Такая расфокусировка внимания — меньшее, о чём может мечтать электрокоммерсант, но тяга к халяве модели «успеть всё и сразу», либо «где-то видел, хочу так же», нередко шутит с ним шутки.

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

Я помню Тьму, в ней зарождалось зло. Ей имя было — Снежинки и Таракашки, убегающие из-под курсора и насылающие морок фриза на железо и ось. Время Тьмы отметилось всеобщими проклятьями Джаваскрипту. Предавался анафеме любой браузер без скила срубать его на подходе. Тьма не развеяна и ныне. Скриптохранилища планеты полны свежими версиями красоты под любую CMS: фэйды-параллаксы, гравитации-левитации, транзишены-ротэйшены заставляют верстал-импотентов ощутить себя голливудерами-на-час. Там своя атмосфера, в неё не вдуешь мыслей о разнице мощи мобил, ноутов и десктопов, о реальном мире с разными экранами и способами ввода.

В самих слайдерах нет зла, кроме сплошной пользы. Их тоже можно делать в обнимку с любовью, получая запредельные результаты. Достаточно помнить своё место и указывать его каждому элементу сайта. Выпилить функционал автопрокрутки — значит разгрузить слайдер, дав посетителю драгоценное время на осмысление рекламного месседжа. Понравится — сам покрутит: не исключено, что вы засунули туда реально интересные предложения.

Меня всегда удивляла та лёгкость, с которой иной электрокоммерс добровольно отказывается от целевого влияния на посетителя, прикрутив себе на лоб автоматику. «Влияние» звучит угнетающе, но в этом смысл общения — раскрыв рот, мы преследуем цель повлиять на собеседника: заявить о своём преимуществе, прослыть осведомлённым о ресурсах, чтобы в итоге стать нужным до градуса необходимости.

Настолько ли сложно понять разницу между субъектом рекламы и единомышленником?

Клиент — это товарищ, в первую очередь. А другой товарищ — поисковик. Уж кому, как не ему знать о способах обновления контента? Этот персонаж первым заметит разницу между мультиком и подбором содержимого для информационного блока, он распознает — настолько ли жив сайт, каким хочет казаться. Жизнь — это движение и обновлять блоки каждый день — значит получить полный контроль над вниманием посетителей, в зоне самой броской части экрана. Заполнил её мельтешением — до свидания весь сайт, накидал же конкретики — вовлёк посетителя в общую идею своего дела.

На этом месте проходят работоразделы, когда коммерс и клиент делят её поровну так же, как коммерс и поисковик. И если консенсус вступил в силу, то клиенту комфортно на подсознании, значит — его интерес реален, направлен более к тому как вы предлагает продукцию, нежели к её моделям.

Теперь в альфе. Таки удалось исполнить хомяка натягиванием скина на CMS «Эгея».

Бложик одинаково читаемо смотрится на экране любого разрешения и типа. Как-то так техзад и звучал. Теперь зализывание швов неспешным допиливанием и просевом багов. Было бы неплохо видеть в каментах отзывы, а то глаз замылился ещё в том году.

За тему спасибо Арётму Поликарпову. В темплейты «Фреша»: влиты поправки и добавки, недостававшие оригиналу Ильи Бирмана.

Помогайте авторам всяких хороших штук ссылками. Сами не попросят, пингвины гордые.

В который раз убедился в отсутствии смысла соскакивать с Эгеи обратно на Вордпресс. Соблазн заделаться блудным сыном наверное будет всегда — WP подсаживает на зависимость от разнообразия своих прилад. Впрочем, я в нём и без подсадки живу — часто просят сделать или допилить что-нибудь, никуда не денусь. Но теперь есть альтернатива для совращения на сторону.

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

Попробую обосновать смысл применения трёх народных движков — как для блогов, таки и для электрокоммерции. Сказать что-то отличное от не единожды звучавшего в баттлах, вряд ли получится, поэтому аргументирую «за» с точки зрения финансовых и временных затрат на реализацию того или иного проекта.

  1. Эгея. «Персональные блоги для каждого» — рекомендация самонадеянная, особенно на фоне Вордпресса. Уточню: для тех, кому дневник, а не рюшки.

    Хомяки на этом движке, по умолчанию лишённые привычного обвеса репостеров, сеошных и анимационных перегрузов, минимизированные по числу запросов на страницу, остаются с необходимым набором для боевой обстановки. Отсутствие у них админки — это доступ непосредственно из фронт-энда (что до сих пор редкость). Радует отсутствие понятия «разделы», навигация решена тегами. Установку на сервер Илья сделал не просто чуть проще, а принципиально простой. Отчаянно плюсую отсутствию Ворд-лайк инструментария для форматирования текстов. Ссылки, стили, списки, медиа — всё на собственном синтаксисе, быстро становящимся привычным . Кстати, это не ново для линомаководов, но в широкое применение ещё не вылезало, пора.
  2. Вордпресс — классика «всё в одном» для персоналок, блогов и новостников.

    Коробка со всем инструментарием, привычным офисному населению — от текстового редактора и медиа-галлерей до автоматики разветвлённых меню и раздельной работы авторов в рамках одного проекта. Тысячи плагинов на все случаи жизни, скорее перепугают, чем обрадуют выбором. Но их плюс в простоте создания под личные нужды. Но тут придётся взять на зарплату кодера «все-в-одном» — со знанием серверов, поисковиков и и вёрстки. Иначе впоследствии, на такие «мелочи» любой бюджет размечет по поляне, как ветер листву.
  3. Оупенкарт. Движок резвого электромагазина.

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

Возвращаясь к Эгее, скажу, что к ней остаётся масса вопросов и они будут множиться. На то и востребованный продукт (поныне фришный например). Вопросы вопросами, но факт: из резвых и безглючных, это единственный на сегодня блоговый движок, готовый к работе сразу после установки. Про Эгею есть много отзывов. Хорошо, что с налётом негатива — предвзятые :—)

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

Трент Уолтон, автор:

Чем больше разрабатываешь для вэба, тем больше ценишь независимость от причуд того или иного устройства.

Сначала CSS-брикпоинты в @media казались единственным решением для создания добротного сайта. В самом деле — постепенное изменение элементов, как и их взаиморасположение, при переходе от экрана одного размера к другому — это уже шикарно само по себе. Но со временем оказалось, что к окончательному решению надо бы двигаться чуть менее резво. Устройствонезависимость, как подход к проектированию и вёрстке, учитывает не рамки разрешений экранов «от и до», а их бесконечные комбинации. А кроме них — методы ввода, возможности браузеров и скорость интернета.

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

  • 1. Непослушные браузеры.
  • 2. Крошечные экраны.
  • 3. Медленный коннект.
  • 4. Сенсорный ввод.

Посмотрим — что получится.

Непослушные браузеры

Очевидно: попытка создать по версии сайту, для каждого из браузеров, способна привести к, мягко говоря, неоправданным затратам. Напрасный труд. Всё равно мы, как пользователи, не склонны следить за обновлениями, годами сидим на старых версиях и вообще хотим, чтобы софт занимал как можно меньше места, пусть и в ущерб качеству видуализации. Популярность Opera Mini не даст соврать. Так что, многие из «глупых» браузеров — это зачастую осознанный выбор прользователя и ничего с этим не поделать.

При этом, непослушность вовсе не ограничена браузерами. Её составляющими будут остальные спутники сёрфинга: и тормоза джаваскриптов, и регулярные проседания скорости интернет-каналов.

Такова природа вэба, требующая от нас постоянства в вопросе адаптации к ней. Приходишь к выводу о первостепенности доставки контента любому браузеру — всё тем же комбинированием HTML и CSS, но уже стартуя на принципе «mobile-first», с постепенным расширением дизайна до десктопов.

Крошечные экраны

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

90% пользователей, решают свои задачи, последовательно обращаясь ко множеству различных экранов. — Гугл, «Новый мультиэкранный мир».

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

Карен Макгрейн, для «A List Apart»:

Это ваша миссия — заставить отображаться содержимое на бог знает какой платформе и бог знает для какой аудитории. Ваши пользователи сами решат — когда и где им читать вас. Это вызов для профи — дать пользователям шанс привыкнуть к хорошему, к путешествию в качественном вэбе.

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

Медленный коннект

Тормозные страницы = досвидания посетители. Разработка сайтов в офисе, оснащённом каналом в 30–100 мбит/с, способна сильно исказить для разработчиков картину реального мира за окном. Джон Мэда трансформировал эту мысль в свой Закон Простоты:

Никто не любит ждать. Каждый из нас — как потребитель, так и производитель, — отыщет свой способ стукнуть по тикающей руке: мы всё равно пойдём своим путём, лишь бы избежать разочарования от потери времени. Но если соприкосновение с продуктом или услугой оказалось быстрым, то мы уже подсознательно свяжем это с простотой и эффективностью короткого пути к цели.

С 2010, вэб-страницы потолстели почти вдвое. Остаётся согласиться с Полом Айришем, отмечающим нынешнюю слабость требований к стандартам, одновременно с актуальностью зависимости производительности и скорости от каждой из частей содержимого и дизайна.

Тим Кадлек:

С добавлением чего бы то ни было на страницу, стоит спросить себя — «что ценного принесёт добавка» — и удостовериться в том, что цена не превратилась в мучение.

Похоже на то, что «мучение» Тима сродни «разочарованию от ожидания» Джона.

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

Сенсорный ввод

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

Мы давно живём в мире считывания и тыкания, мы буквально протискиваемся между экранами. Банкоматы, платёжные автоматы, терминалы аэропортов и вокзалов, телевизоры, десктопы под Виндоус-8...

Пора адаптироваться не только к методике «сначала для мобильного», но и к лозунгу «сначала для жирного пальчика». Ссылки под тачи занимают теперь куда больше места на экранах, чем кликабельные. И коли потребность в прикосновениях способна существенно повлиять на дизайн, то проще взять и угодить пальчикам изначально, а не ретроспективно (в особенности, когда в интерактивности участвуют статусы наведения курсора). Иначе, трудоёмкость активации системы обнаружения касания на готовом сайте, может стать вровень с его полной разработкой.

Спустя несколько дней после анонсирования Стивом Джобсом Айпада, в примечаниях от Эппл, можно было увидеть пророчество, сегодня ставшее реальностью: «Подготовка дизайна под Айпад обращает внимание на всю значительность появления мультитача для интерактивности. Всё то, что имело отношение к ответным действиям сайта на наведение курсора мыши на элементы с „hover state“, отныне имеет неопределённое будущее и способно стать проблемой для пользователя».


Для каждого из устройствонезависимых сайтов, есть смысл по умолчанию ориентироваться на четыре озвученные проблемы. Адаптивный дизайн может стать нелишней присыпкой, но жизни на годы вперёд, ему даст философия независимости — как от железа, так и от особенностей сети.

Резонный вопрос: так ли существенна разница?

Итан Маркотт по-своему определяет — что лучше и в чём разница:

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

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

Пользуясь термином «device-agnostic» для выделения того или иного сайта с добротным дизайном, на самом деле мы не имеем шансов сказать чего-то нового. Ещё в 2004, Джеф Вин сказал:

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

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

Перевод публикуется с согласия автора.

Это мне по работе нужно, по деланию сайтиков. Оставлю это здесь, чтобы не пропало. Может кто ткнёт в неисправности, либо чего нового подкинет. Изредка буду дополнять и сам. Теги соответствующие.

В связи со всё более плотным возвращением в работку, систематизирую всякое украденное и собственноручно придуманное — всё, что касается html-css вёрстки с уклоном в минимал и браузерную всеядность. Записи с примерами валялись у меня жуткой разносортицей папок и форматов, а теперь руки дошли унифицировать их в тру олдскул текстовый вид. В чём хочешь смотреть можно.

Нынче подборка примеров безболезненно-кроссбраузерной вёрстки блочных элементов, либо выдающих себя за них. Спустя время, выложу ещё адаптивные таблички для прайсов и, быть может, шаблон сайта мечты — адаптивный, но без брикпойнтов @media. За весь этот мат простите, рейтинг «7+».

1. Автосдвигающиеся блоки списком.
2. Автосдвигающиеся блоки.
3. Вертикальное и горизонтальное выравнивание блоков относительно друг друга.
4. Четыре варианта вертикального центрирования для локальных потребностей.
5. Метод вертикального выравнивания с дополнительным блоком.
6. Вертикальное выравнивание блока неизвестной высоты по центру или низу родительского, с дополнительным блоком.
7. Блоки одинаковой высоты, включающие в себя блок с контентом и блок с футером.

1. Автосдвигающиеся блоки списком

.......................  .......................  .......................
.  Header             .  .  Header             .  .  Header             .
.......................  .......................  .......................
.                     .  .                     .  .                     .
.  img                .  .  img                .  .  img                .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.  Some text          .  .  Some text          .  .  Some text          .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.......................  .......................  .......................

....................... 
.  Header             .
....................... 
.                     . 
.  img                . 
.                     . 
.                     . 
.                     . 
.  Some text          . 
.                     . 
.                     . 
....................... 
<style type="text/css">
	li {
		width: 200px;
		min-height: 250px;
		border: 1px solid #000;
		display: -moz-inline-stack;
		display: inline-block;
		vertical-align: top;
		margin: 5px;
		zoom: 1;
		*display: inline;
		_height: 250px;
	}
</style>

<li>
	<div>
		<h4>
			Header
		</h4>
		<img src="http://somepictohost.com/img.jpg" alt="lobster" width="75" height="75"/>
		<p>
			Some text
		</p>
	</div>
</li>
<li>
	<div>
		<h4>
			Header
		</h4>
		<img src="http://somepictohost.com/img.jpg" alt="lobster" width="75" height="75"/>
		<p>
			Some text
		</p>
	</div>
</li>
<li>
	<div>
		<h4>
			Header
		</h4>
		<img src="http://somepictohost.com/img.jpg" alt="lobster" width="75" height="75"/>
		<p>
			Some text
		</p>
	</div>
</li>
<li>
	<div>
		<h4>
			Header
		</h4>
		<img src="http://somepictohost.com/img.jpg" alt="lobster" width="75" height="75"/>
		<p>
			Some text
		</p>
	</div>
</li>

2. Автосдвигающиеся блоки

.......................  .......................  .......................
.  img                .  .  img                .  .  img                .
.......................  .......................  .......................
.                     .  .                     .  .                     .
.  Some text          .  .  Some text          .  .  Some text          .
.                     .  .                     .  .                     .
.......................  .......................  .......................

.......................
.  img                .
.......................
.                     .
.  Some text          .
.                     .
.......................
<style type="text/css">
	#catalog a { color: #666; }
	#catalog a:hover { color: #1fa0e2; }
	#catalog div {
		width: 110px;
		margin: 0 5px 15px 0;
		text-align: center;
		display: inline-block;
		vertical-align: top;
		}
	#catalog P { margin: 0 5px; }
	#catalog SPAN { color: #ccc; font-size: 0.8em; } 
</style>
<!--[if lte IE 7]>
	<style type="text/css">
		#catalog div { 
			display: inline;
			zoom: 1;
   }
	</style>
<![endif]-->

<div id="catalog">
	<div>
		<p><img src="http://somepictohost.com/img.jpg" width="75" height="75"/></p>
		<p>Some text</p>
	</div>
	<div>
		<p><img src="http://somepictohost.com/img.jpg" width="75" height="75"/></p>
		<p>Some text</p>
	</div>
	<div>
		<p><img src="http://somepictohost.com/img.jpg" width="75" height="75"/></p>
		<p>Some text</p>
	</div>
	<div>
		<p><img src="http://somepictohost.com/img.jpg" width="75" height="75"/></p>
		<p>Some text</p>
	</div>
</div>

3. Вертикальное и горизонтальное выравнивание блоков относительно друг друга.

.......................
.                     .
. ................... .
. .Some Text        . .
. ................... .
.                     .
.......................
<style type="text/css">
	.before {
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		}
.inner {
		display: inline-block;
		vertical-align: middle;
		border: 1px solid red;
		}
.outer {
		height: 100px;
		border: 1px solid blue;
		}
</style>

<div class="outer">
	<span class="before"></span>
	<span class="inner">
    Some<br>text
  </span>
</div>

4. Четыре варианта вертикального центрирования для локальных надобностей.

.......................
.                     .
.  Text p             .
.                     .
.......................

.......................
.                     .
.  img                .
.                     .
.......................

.......................
.                     .
.  Block of Text      .
.                     .
.......................

.......................
.                     .
.  CSS3 mixin Text    .
.                     .
.......................
<style type="text/css">
	.text p {
		position: relative;
		top: 50%;
	}

	.image img {
		position: relative;
		top: 50%;
	}
	.block-of-text p {
		position: relative;
		top: 50%;
	}
	@mixin vertical-align {
		position: relative;
		top: 50%;
	}
	.mixin p {
  @include vertical-align;
	}
</style>

<section class="text">
	<p>
  	Text p
	</p>
</section>

<section class="image">
	<img src="http://somepictohost.com/img.jpg" />
</section>

<section class="block-of-text">
	<p>
		Block of text!
	</p>
</section>

<section class="mixin">
	<p>
		CSS3 mixin Text
	</p>
</section>

5. Один метод вертикального выравнивания с дополнительным блоком.

,,,,,,,,,,,,,,,,,,,,,,,
,                     ,
,   floater block     ,
,                     ,
,*********************,
,                     ,
,,,,,,,,,,,,,,,,,,,,,,,
*                     *
*   child block       *
*   Some text         *
*                     *
***********************
.                     .
.   parent block      .
.                     .
.......................
<style type="text/css">
	#parent {height:200px;}
	#floater {
  	float: left;
		height: 50%;
		width: 100%;
		margin-bottom: -50px;
		outline: 1px solid red
		}
	#child {
		clear: both;
		height:100px;
		outline: 1px solid yellow;
		}
</style>

<div id="parent">
	<div id="floater"></div>
	<div id="child">Some text</div>
</div>

6. Вертикальное выравнивание блока неизвестной высоты по центру или низу родительского.

.......................
.                     .
. ................... .
. .    Some Text    . .
. ................... .
.                     .
.......................
<style type="text/css">
	.parent {
		width:500px;
		height:400px;
		text-align:center;
		border:1px solid #dd0;
		background: #ffa;
		}
	.child {
		display:-moz-inline-box;
		display:inline-block;
		vertical-align:middle;
		width:300px;
		border:1px solid #080;
		background: #DDF; zoom:1;
		//display:inline
		}
	.helper {
		display:-moz-inline-box;
		display:inline-block;
		height:100%;
		width:0px;
		vertical-align:middle;
		zoom:1;
		//display:inline
		}
</style>

<div class="parent">
	<div class="child">Some text</div>
	<div class="helper"></div>
</div>

7. Блоки одинаковой высоты, включающие в себя блоки с контентом и футером, неизвестной величины.

.......................  .......................  .......................
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.  Content            .  .  Content            .  .  Content            .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.......................  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .......................  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .......................
.......................  .......................  .......................
.  Footer             .  .  Footer             .  .  Footer             .
.                     .  .                     .  .                     .
.......................  .......................  .......................

.......................  .......................  .......................
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.  Content            .  .  Content            .  .  Content            .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.......................  .                     .  .......................
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.......................  .......................  .......................
.  Footer             .  .  Footer             .  .  Footer             .
.                     .  .                     .  .                     .
.......................  .......................  .......................
<style type="text/css">
		.wrap, .h, .f {
			display: inline-block;
			}
		.item {/*wraper*/
			display: inline;
			}
		.h, .f {
			width: 200px;
			}
		.h {/*content*/
			background: red;
			height: 100px;
			vertical-align: top;
			}
		.f {/*footer*/
			background: blue;
			height: 20px;
			color: #fff;
			vertical-align: bottom;
			margin-left: -200px;
			}
</style>
cover! white transparent

Я двумя статьями разразился, защищая приоритетность самогенерирующейся-тэговой навигации перед специально-менюшной. А Илья Бирман, чей движок Эгея я с придыханием пользую для блога, взял и давно реализовал на практике совершенный способ. Да я бы и сам, но чо уж)

Движок не любит меню в принципе, хотя имеет его. В моей теме оно слева. Но его пункты — это ни что иное, как выбранные тэги.

Настраивается не менее элегантно. Лезем в любой тэг, а в ответ, он отображается очередным пунктом меню. А когда это делает админ, то напротив пункта появляется кнопка «закрепить». Закрепил и теперь тэг — пункт.

И вообще — движок без админки, с редактированием всего на фронтэнде, это самое удобство и быстрота. Бирман чо.

Картина «Тэги на сортировке»

Логоперс