DIV всплывающий поверх flash-баннера

Вячеслав Гринин, May 11, 2010

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

Сам этот DIV имеет z-index больше нуля, и когда на странице нет никакой Flash-анимации, этот DIV плавает поверх страницы. Однако, как только появляется Flash-баннер, то баннер этот рендерится поверх любых плавающих DIV-ов.

Как и все гениальное, решение оказалось простым. Достаточно тегам OBJECT и EMBED добавить атрибут wmode со значение opaque.

Выглядеть это должно как-то так:

<OBJECT wmode="opaque" ...>
<EMBED ...>
<PARAM name="wmode" value="opaque">
</EMBED>
</OBJECT>

А связано это с тем, что по умолчанию, параметр этот принимает значение window, а это говорит браузеру, что флешку необходимо отрисовывать поверх страницы и всего, что на ней находится. Другие значения параметра wmode – opaque и transparent. Последний ко всему прочему позволяет задавать прозрачный фон для DIV’а, отображаемого поверх флешки. Учтите, что подобные игры с прозрачностью могут заметно ухудшать производительность работы браузера.

Хаки для браузеров

веб-дизайнер, April 15, 2009

Сегодня мне хотелось бы поговорить о так называемых «css-хаках». CSS-хаки используют тогда, когда один конкретный браузер надо заставить отображать некий блок разметки не так, как хотелось бы самому браузеру. Сразу оговорюсь, что использовать хаки нужно только тогда, когда это действительно необходимо. Скажем, всеми нами горячо любимый Internet Explorer (седьмой версии) имеет свои, сугубо специфичные представления о работе со списками. И иногда надо только ему объяснить, что он неправ:-)
Вообще задача раздельных CSS для разных браузеров имеет несколько путей решения. Один из них — встроить в <head></head> php-, или java-скрипт, определяющий тип браузера, и отсылающий конкретный браузер к предназначенной для него стилевой таблице. Второй — если проблемы возникают только с IE — так называемые «условные комментарии». В <head></head> задается конструкция вида:

<!–[if IE]><link rel=”stylesheet” href=”css/ie.css” type=”text/css” media=”screen” /><![endif]–>

или для конкретных версий Explorer’а:
<!–[if IE7]><link rel=”stylesheet” href=”css/ie7.css” type=”text/css” media=”screen” /><![endif]–>
<!–[if IE6]><link rel=”stylesheet” href=”css/ie6.css” type=”text/css” media=”screen” /><![endif]–>

И, наконец, третий путь — CSS-хаки.

Самый удобный в плане хаков браузер – Firefox (и относящиеся к его семейству), так как имеет свою группу css-классов, начинающуюся с перфикса @-moz-
Например:

@-moz-document url-prefix() {
.style {background: #F00;}
}

css-rule, x:-moz-any-link{

}

Для Opera:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;} /* только для Opera */
}

html:first-child {} /* только для Opera */
html:first-child .style {
background: #F00; /* только для Opera < 9.5 */
}

Также, можно создать специальный файл стилей для Opera и подключить его следующим образом:
<head>
<link rel=”stylesheet” href=”css/opera.css” type=”opera/css” media=”screen” />
&lt/head>

Google Chrome и Safari по способу работы с блочной моделью напоминают Opera и с высокой долей вероятности можно предполагать, что если ваша верстка нормально выглядит в Опере, то и в Хроме с Сафари с нею тоже все будет нормально. Однако, на всякий случай, хаки:

body:last-child:not(:root:root) .style {
background: #F00;
}

Ну, и наконец, хак для IE. Почему только один? По опыту решения конкретных задач могу сказать, что все проблемы верстки, с которыми мне приходилось сталкиваться, были одинаковыми у наиболее распространенных версий IE (6,7). Поэтому я пользовался (если пользовался) универсальным хаком, так называемым «holy hack»:

html {
background: #f00; (это понимают все браузеры)
* background: #0f0; (а это только ослики)
}

Напоследок напомню, что практически все хаки влияют на валидность полученного кода, поэтому, если есть возможность – надо обходиться без них. А такая возможность есть почти всегда, и исключение составляет только горячо любимый всеми нами Internet Explorer:-)

Облегчая себе верстку.

веб-дизайнер, March 17, 2009

Всем нам давно известно, что каждый браузер имеет свои дефолтные значения CSS для многих объектов, таких как, скажем, список, параграф, границы и тому подобное (подробнее, например, тут). Для того, чтобы верстать действительно кроссбраузерно нам необходимо сбросить стандартные значения на некий общий знаменатель, а потом прописать все заново.

Некий сознательный гражданин Эрик Майер предложил следующую версию стилей для обнуления всех значений:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: transparent;
}
/* Не забываем описать стили для :focus! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* Для таблиц все еще надо прописывать ‘cellspacing=”0″‘ в коде */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

В принципе, само по себе это правило достаточно хорошо за парой исключений. А именно – спорным является убирание рамки для псевдокласса :focus (это который рисует рамку вокруг нажатых ссылок), так как такими ссылками нельзя будет управлять с клавиатуры, нельзя будет понять, что они в данный момент в фокусе. Также спорным выглядит использование парных кавычек “”, так как в русской типографике используются обычно кавычки елочки «», вызываемые кодами &#171; и &#187;

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

Красивое выпадающее меню. Полупрозрачное и с тенью.

веб-дизайнер, February 24, 2009

Вот такое:

Нравится?:-) Научить, как делать нечто подобное? Устраивайтесь поудобнее, мы начинаем.
Начать следует с того, что сейчас большинство выпадающих меню (как горизонтальных, так и вертикальных) делают из несортированных списков (тег <ul> (сокращение от unordered list)). В совокупности с свойствами display:none и display:block (последнее для псевдокласса :hover, хотя, можно сделать и так, чтобы пункты меню прятались при наведении на них курсора мыши, да) получаются красивые и динамичные менюшки.

В данном меню html код выглядит так:

<div id=”shad”>
<ul>
<li><a href=”#”>Главная</a></li>
<li><a href=”#”>О нас</a>
<div id=”shad2″>
<ul>
<li><a href=”#”>История</a></li>
<li><a href=”#”>Команда</a></li>
<li><a href=”#”>Офис</a></li>
</ul>
</div>
</li>
<li><a href=”#”>Услуги</a>
<div id=”shad1″>
<ul>
<li><a href=”#”>Веб-дизайн</a></li>
<li><a href=”#”>Интернет</a></li>
<li><a href=”#”>Хостинг</a></li>
<li><a href=”#”>Доменные имена</a></li>
</ul>
</div>
</li>
<li><a href=”#”>Контакты</a>
<div id=”shad3″>
<ul>
<li><a href=”#”>Телефон</a></li>
<li><a href=”#”>E-mail</a></li>
<li><a href=”#”>Почта</a></li>
</ul>
</div>
</li>
</ul>
</div>

Если посмотреть внимательно, то мы увидим, что основой меню является ненумерованный список (как я и говорил). В отдельные пунты меню вложены другие списки (это субменюшки, которые будут распахиваться при наведении курсора мыши). Оборачивающие <div id=”shade#”> нам нужны для размещения теней от меню. Тут я использовал совсем простое визуальное оформление, просто чтобы донести идею. Естественно, ваша фантазия может быть безграничной:-)

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

Теперь откроем Photoshop и создадим новый файл высотой в 1 пиксель, а шириной равной ширине блоков нашего меню. Зальем его цветом и настроим прозрачность. А затем сохраним как png24 (с альфа-каналом). Это будет бэкграунд всех наших пунктов меню. Теперь создадим файлы по количеству блоков, а по ширине и высоте равные соответствующим блокам (вы ведь замерили высоту блоков?:-) ). Зальем их желаемым цветом, настроим прозрачность и мягкой стеркой дадим растушевку на краях, чтобы получились мягкие переходы. У меня вышло вот так:
bg_s
Тени тоже готовы. Теперь нам осталось задать css-стили:

#shad {
background: url(./bg_s.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 107px;
}

#shad1 {
background: url(./bg_s.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 107px;
}

#shad2 {
background: url(./bg_s1.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 83px;
}

#shad3 {
background: url(./bg_s1.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 83px;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #00ff3c;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 0px;
top: 0;
display: none;
}

li div {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #229922;
font-weight: bold;
background: url(./bg.png);
padding: 5px;
border: 1px solid #00ff3c;
border-bottom: 0;
}

li:hover div {
display: block;
}

li:hover ul {
display: block;
}

Итак, по пунктам. В моей стилевой таблице для начала заданы контейнеры, которые будут вмещать тени. Потом, мы сбрасываем на всех ненумерованных списках внешние и внутренние отступы, буллеты, задаем нижнюю границу нужного цвета. Далее, мы даем всем элементам списка position:relative, чтобы список вложенный в пункт вышестоящего списка наследовал его позицию в пространстве. Затем, спискам, вложенным в вышестоящий элемент списка даюм абсолютную позицию, чтобы они не раздвигали список-родитель, и задаем им позицию относительно вмещающего элемента списка. А также скрываем их пока от любопытных глаз:-) Следующим шагом мы задаем позиционирование контейнерам div, вложенным в вышестоящий пункт списка, и тоже скрываем их (мы ведь не хотим, чтобы тени ото всех подменю постоянно мозолили нам глаза?:-) ). Настраиваем стиль ссылок. Даем отступы, границы и прописываем наш полупрозрачный фон. И, наконец, говорим браузеру, что при наведении курсора мыши на элемент списка нам хотелось бы увидеть все вложенные контейнеры. И, вуаля. Наше меню работает.

Готовый пример можно скачать, и поковырять самостоятельно. Успехов!

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

И еще раз про анимированные ссылки

Вячеслав Гринин, February 20, 2009

Не так давно наш веб-дизайнер в своей статье Трюк со ссылкой – показываем картинку рассказал нам о том, как сделать красивую анимированную ссылку. Однако предложенное решение обладает одним недостатком – клик на подобной ссылке не срабатывает в IE. Ну, не воспринимает он SPAN вложенный в ссылку, так как нам хотелось бы. Клик на такой ссылке не срабатывает, даже курсор мыши остается обычной “умолчательной стрелкой”.

Ну, допустим, с курсором справиться проще всего, задав SPAN’у стиль cursor:pointer. Остается заставить IE правильно отрабатывать клики на подобных конструкциях.

Решение оказалось достаточно простым, правда чтобы сделать это нужно быть немного программистом. Для этого ссылка вместо конструкции <a href=”portfolio.html”>, приобретает чуть более сложный вид: <a href=”javascript:void(0)” onclick=”window.location=’portfolio.html’”>.

Как видим, здесь все очень просто. Событие onclick браузер отрабатывает нормально, а мы этим и воспользовались, по щелчку мыши свойству window.location присваивается значение ‘portfolio.html’, то есть как раз та самая ссылка, переход на которую нужно обеспечить. Атрибут href содержит теперь значение javascript:void(0), по сути, это пустой оператор, который в данном случае блокирует стандартное поведение браузера при переходе по ссылке.

А вот и весь текст этого трюка:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Анимированная ссылка</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<style type=”text/css”>
img {
border: 0px;
}

a span {
display: none;
}

a:hover #port1 {
display: inline;
position: absolute;
margin-left: -1px;
margin-top: -1px;
}

#port1 {
cursor: pointer;
}
</style>
</head>
<body>
<div id=”img1″><a href=”javascript:void(0)” onclick=”window.location=’portfolio.html’”><span id=”port1″><img src=”portfolio_big.png” alt=”" /></span><img src=”portfolio.png” alt=”" /></a></div>
</body>
</html>

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: