Трюки веб-дизайна
В прошлой статье про веб-дизайн я обещал вернуться к таким вопросам дизайна как резиновые колонки одинаковой высоты, закругленные углы и затемненные счетчиков. Обещание выполняю и сейчас обо всем расскажу. Опять-таки, я надеюсь, что эта статья окажется интересной не только вебмастерам, но и обычным пользователям интернета, тем, кто просто хочет лучше представлять, как устроен интернет.
В то же время, не стоит думать, что я зациклился на дизайне, и что больше вы ни о чем на этом сайте не прочитаете. Прочитаете, обещаю. Интернет многогранен, и у меня в запасе еще множество тем, о которых стоит рассказать! Так или иначе, если вас интересуют трюки, применяемые в дизайне, читаем статью дальше и комментируем!
А пока, особенно если вам дизайн не особо интересен, могу предложить рассылку FAQ Hard. Эта рассылка вопросов и ответов по компьютерному "железу" подписчиков и сайта SoobCha.EU. Задайте свой вопрос в рассылку и ответы экспертов вам прийдут на почтовый ящик. Постарайтесь подробно и грамотно описать свою проблему. На рассылку можно подписаться письмом: comp.hard.faqhard-sub@subscribe.ru.
Резиновые колонки одинаковой высоты
Речь вот о чем. Многие сайты, и мой - не исключение, располагают информацию в несколько колонок (в моем случае, сайдбар и контент). Заранее неизвестна высота этих колонок; более того, неизвестно, которая из колонок окажется длиннее - если для статьи в принципе ожидаемо, что контент займет больше места, чем сайдбар, то для какой-нибудь рубрицирующей страницы может случиться обратное - сайдбар будет длиннее. Но колонки тем не менее должны иметь одинаковую высоту, и под ними должет идти общий подвал. Как ни странно, эта на первый взгляд простая задача не имеет простого решения, и веб-дизайнеру приходится находить обходные пути. Дело в том, что есть возможность задать колонки распаложенные параллельно:
- колонки с таким стилем будут идти параллельно, если хватает ширины. Даже задача общего подвала решается - подвал в стиле должен иметь
Однако все браузеры задают колонке со стилем float высоту равную высоте ее содержимого. Никакие
не помогают. Чем это плохо? А тем что, как и у меня на сайте, вам может захотеться сделать разный фон у разных колонок. Так вот вон более короткой колонки в таком случае обрывается совершенно неожиданно. Вы могли видеть в интернете трюки с отрицательными нижними полями
Я не рекомендую этот трюк использовать. Не все браузеры после него вообще отображат подвал. На самом деле, решение довольно простое. Пусть у колонок разная ширина, мы просто будем использовать повторяющийся по вертикали фоновый рисунок высотой в один пиксель. Итак, создается общий div со свойством
В него уже помещаются описанные выше колонки и футер. Никакого хакерства, и все работает.
Закругленные углы
Еще один фокус. Дело в том, что в интернете ничего круглого нет. Нет объекта "круг", и все тут. Наилучший способ сделать углы закругленными - использовать рисунки. Если вы посмотрите на дизайн моего сайта, то увидите, что у белого фона контента углы закрыглены. С верхним закруглением все понятно, оно является частью шапки. Нижнее же закругление достигается путем использования небольшого рисунка в футере, а не в контенте, примыкающего к верхней границе футера.
Исправление, присланное мне харьковским вебмастером, автором блога интернет насквозь (кстати, рекомендую заглянуть на блог по ссылке - найдете еще много интересного про современные браузеры): css3 позволяет создать круглые углы без рисунков, но поскольку он до сих пор не является стандартом, полной кросс-браузерной совместимости вы таким способом не добьетесь. Более того, даже браузеры, поддерживающие css3, используют различный синтаксис для указания этого свойства ("-moz-border-radius" для firefox и "-webkit-border-radius" для chrome и safari).
Задымленные счетчики
Я уже писал когда-то про счетчики на сайтах, даже сделал свой счетчик любви Google. Так или иначе, мы вынуждены счетчики размещать. А когда у сайта сделан красивый дизайн, эти счетчики могут совершенно наглым образом этот дизайн нарушать. Спрятать их вообще нельзя, поэтому наилучим решением является их "задымление", если же к счетчику подводишь мышь, он тут-же проявляется во всей красе. Привожу кусок кода (content - имя div-а, содержащего счетчики):
{
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 г., категория: для вебмастеров.
| ← 32 бит или 64 бит | Socks proxy → |
Комментарии
1# |
а почему ты в мозиле делаешь 30% прозрачности счетчиков, а в ИЕ - 40%? |
2# |
хе... спасибо! что-то копировал и запутался! никакого секретного смысла нет! |
3# |
ооо кстати, я написал е-маил в форме написания коментария, мне пришло письмо со ссылкой по которой нужно нажать чтоб подтвердить подписку на коментарии, а по этой ссылке: Ошибка 404 |
4# |
о черт, я грохнул этот файл, и еще бы знать, когда. буду пытаться восстановить |
5# |
С колонками здорово. На счёт счётчиков -- Google Analytics не требует устанавливать графическое изображение на сайте, и статистика на высшем уровне, плюс интегрирована статистика AdSense. |
6# |
Эти счетчики нужны ради внешних ссылок. Каталог Рамблера и.т.п. Плюс ТИЦ плюс подписка subscribe.
|
7# |
Спасибо за полезную информацию задымлением уже воспользовался, только вот про закругление не совсем понял как делать. Свойство то какое? |
8# |
хмм где воспользовался? |
9# |
sem, если ты это читаешь, попробуешь еще раз подписаться на комментарии?
|
10# |
пробую :) |
11# |
я оказался уже подписан :) |
12# |
Отлично!
|
13# |
Воспользовался здесь () и () так, что на счет углов? |
14# |
а зачем ты его ващще удалил? :) |
15# |
насчет углов вот хорошая статья:
|
16# |
Александр, а я взглянул на блог, не нашел счетчиков и удивился.
|
17# |
sem, ага. Просто я пошел по старинке - муторно зато кросс-браузерно.
|
18# |
:) а дома зачем? может пригодилось бы |
19# |
ну так.. решил что мусор.. в общем, надо почаще архивы делать |
20# |
Воспользовался здесь () и () так, что на счет углов? |
21# |
сисадмины делятся на тех кто делает ежедневные бэкапы и на тех кто УЖЕ делает ежедневные бэкапы :) |
22# |
Всем спасибо за помощь! |
23# |
Саша, привет. Поздравляю со сменой холодного ледяного дизайна на теплый, песочный. Классно получилось. И карта в шапке очень хорошо смотрится. Я передал тебе эстафету А еще в этой статье сказал про тебя немало теплых слов. Заходи почитай. |
![[*]](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAA7ElEQVRIie2XTQ6CMBCF3xgPQsLWQ7is8TrlECYeAe7hrhzDHdzkueBX1KSdImjCS7roYuZrp28KFQDECtoDALksW0SwW5Q40gb+UXCZQUSeRlbq4fRSldM0rfcyTF755WjVxnmCSVa5oXX9jLnp4Jbuc1g8+N1CmiSGIZsGwChz1febOlYPrgtcrt3kgDQJT6EosqMdmWs4d/9Sq8DO6h2tB4/bKnSrMeDByWEtNAXrzWXPOKqDFa5O0kMEbpCgKfUsybyhqh+B/kNxQlHHLSDEWqP7eWFX01nV/TwF/9EZz6QNvIG/JsFKj7YHwRrAR6l51asAAAAASUVORK5CYII= "Гость")
