Как улучшить вид 3 старых добрых статей в футере?

    Из-за того, что под название каждой статьи в футере отводится 33%, а длина названий различна, появляется пара-тройка неприятных эффектов:
    1) пустоты, если названия короткие, а соседнее — длинное;
    2) названия прилипают к верхней кромке блока;
    3) кликать нужно только на текст, а не на весь блок.

    Например, здесь в средней ссылке, как и во всех, надо целиться в текст.

    Что, если их несколько облагородить?



    Даже если облагородить вид ссылок — убрать подчёркивания, сделав только изменение цвета по наведению, разнобой высот не очень радует (так работала последние 2 месяца версия юзерстилей ZenComment). И разместить их вертикально по центру без скрипта не получится, так как это — дивы, и даже на стили table — table-row — table-cell не хватает элементов. А что, если разместить 3 блока в таблицу и не заботиться о ширине? Результат — отличный: ширина таблицы — 100%, а ширины ячеек сами выстраиваются по контенту.



    Для того, чтобы ссылка была активной по всему полю ячейки, ей надо сопоставить свойство {display: table-cell}. Даже если иногда таблица не может полностью выровнять содержимое (вполне штатный случай), то свойство ячейки {vertical-align: middle} исправляет ситуацию.



    Код HTML:
    <div class="rotated_posts" style="display: table; width: 100%;">
    	<div class="rotTRow" style="display: table-row;">
    		<a class="grey" href="http://habrahabr.ru/post/147042/">
    			Как воровать бензин с помощью Ассемблера (основано на реальных событиях)
    		</a>
    		<a class="grey" href="http://habrahabr.ru/post/149179/">
    			Как, зная только имя и email человека, злоумышленники получили доступ ко всем его аккаунтам и удаленно уничтожили информацию на всех его устройствах
    		</a>
    		<a class="grey" href="http://habrahabr.ru/post/147828/">
    			Восстановление расфокусированных и смазанных изображений. Практика
    		</a>
    	</div>
    </div>
    

    Основные стили CSS:
    .rotated_posts{
    	display: table;
    	width: 100%;
    }
    .rotated_posts .rotTRow{
    	display: table-row;
    }
    .rotated_posts .rotTRow a.grey{
    	display: table-cell;
    	padding:0 12px 4px;
    	vertical-align: middle;
    }
    
    (Этот способ не будет работать в IE6-7, им надо писать таблицы явно, но годится для юзерскриптов, где по определению нет IE.)

    Зазоры между ячейками выбраны в 24 пикс., поэтому соседние названия никогда не слипаются:



    Здесь смещаем постепенно край окна мышью, она становится всё меньше, потом прыжок — и все 3 ссылки заняли 2 строчки, а таблица перестроилась. По скриншоту видим, что достаточно навести на любое место блока, чтобы ссылка стала выбранной.

    Увидеть в действии и пользоваться такими стилями футера (как и полусотней других улучшений) можно в юзерстилях ZenComment совместно с юзерскриптом HabrAjax. Скрипт здесь преобразует HTML в нужную конфигурацию, а стили паомогают всё расставить.

    Даже если использовать отдельно HabrAjax, футер тоже будет выглядеть неплохо:

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 9

      +2
      WoW!
        +5
        Я тебя уже по скринам узнаю.
          +7
          Лично мое мнение — несоблюдение сетки — нехорошо.
            –1
            Соблюсти элементарно: .rotated_posts .rotTRow a.grey{width:100%). И обяжите всех писать названия одинаковой длины. И статьи — одинакового размера. Несоблюдение формата — нехорошо.
            –2
            Это наблюдение совершенно справедливо, но оно неизбежно вызовет злобу и бешенство у фанатических ненавистников табличной вёрстки.
              –2
              Они просто не понимаю прелести не разваливающееся верстки, при этом еще и быстрой. Пусть учаться, детки. Не зли их.
              +3
              Я согласен, что в том виде, в котором эти три ссылки есть сейчас, это ужасно. Но предложенный вариант мне тоже не нравится. Во-первых, не надо убирать подчёркивания у ссылок. Во-вторых, вертикальное выравнивание по middle выглядит плохо.

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

                Only users with full accounts can post comments. Log in, please.