Ваше местоположение в сети:
Рубрика:

Путеводитель по интернету

Трюки веб-дизайна

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

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

Резиновые колонки одинаковой высоты

Речь вот о чем. Многие сайты, и мой - не исключение, располагают информацию в несколько колонок (в моем случае, сайдбар и контент). Заранее неизвестна высота этих колонок; более того, неизвестно, которая из колонок окажется длиннее - если для статьи в принципе ожидаемо, что контент займет больше места, чем сайдбар, то для какой-нибудь рубрицирующей страницы может случиться обратное - сайдбар будет длиннее. Но колонки тем не менее должны иметь одинаковую высоту, и под ними должет идти общий подвал. Как ни странно, эта на первый взгляд простая задача не имеет простого решения, и веб-дизайнеру приходится находить обходные пути. Дело в том, что есть возможность задать колонки распаложенные параллельно:

float:left;

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

clear: both;

Однако все браузеры задают колонке со стилем float высоту равную высоте ее содержимого. Никакие

hight: 100%

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

margin-bottom 9999px; padding-bottom -9999px;

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

background-image: url('АДРЕС РИСУНКА ВЫСОТОЙ В 1 ПИКСЕЛЬ ДЛЯ ФОНА'); background-repeat: repeat-y;

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

Закругленные углы

Еще один фокус. Дело в том, что в интернете ничего круглого нет. Нет объекта "круг", и все тут. Наилучший способ сделать углы закругленными - использовать рисунки. Если вы посмотрите на дизайн моего сайта, то увидите, что у белого фона контента углы закрыглены. С верхним закруглением все понятно, оно является частью шапки. Нижнее же закругление достигается путем использования небольшого рисунка в футере, а не в контенте, примыкающего к верхней границе футера.

Исправление: css3 позволяет создать закругленные углы без рисунков, но поскольку он до сих пор не является стандартом, полной кросс-браузерной совместимости вы таким способом не добьетесь. Более того, даже браузеры, поддерживающие css3, используют различный синтаксис для указания этого свойства ("-moz-border-radius" для firefox и "-webkit-border-radius" для chrome и safari).

Задымленные счетчики

Я уже писал когда-то про счетчики на сайтах, даже сделал свой счетчик любви Google. Так или иначе, мы вынуждены счетчики размещать. А когда у сайта сделан красивый дизайн, эти счетчики могут совершенно наглым образом этот дизайн нарушать. Спрятать их вообще нельзя, поэтому наилучим решением является задымление счетчиков, если же к счетчику подводишь мышь, он тут-же проявляется во всей красе. Привожу кусок кода (content - имя div-а, содержащего счетчики):

#counters a img
{
opacity:0.3; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
-moz-opacity:0.3; /* Mozilla 1.6 */
filter:alpha(opacity=40); /* IE 5.5+*/
}
 
#counters a:hover img
{
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}

Остальные вопросы, наверное, будут слишком специфичны. Но если есть ощущение недосказанности, спрашивайте - постараюсь ответить!

Дата: 27 октября 2009 г., категория: настройка сайта.

Хотите знать все об интернете?

Введите свой адрес электронной почты чтобы подписаться на обновления!



Доставляется при помощи FeedBurner. Никакого спама. Всегда можно отписаться!

Кстати, у нас уже более трех тысяч подписчиков!

← 32 бит или 64 битSocks proxy →

comments powered by Disqus

Подписаться на  комментарии к статье (rss).