Разделы
vvShop | RSS © 2008 – 2017
Контакты
email: igor@veselov.sumy.ua
skype: utz0r2

Динамические колонки


Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют “резиновыми”).

Недостатком фиксированных колонок при их использовании в “резиновом” блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ширина меньше ширины столбца:
Динамические колонки

“Резиновые” же колонки не оставляют избыточных пустого пространства и прекрасно вписываются в родительский блок. Однако их недостаток заключается в том, что в строку мы можем поместить только фиксированное число столбцов:
Динамические колонки

Решение

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

Посмотреть примерПодробнее

hover и IE6


Многие верстальщики сталкивались с необходимостью использования :hover в своих шаблонах. Практически всегда данный псевдокласс используется для ссылок (тег a), для которых :hover работает всегда и везде, но бывают ситуации, когда встает задача сделать подсветку для других элементов, например для div или td, и вот здесь появляется «подводный камень», известный нам как IE6. С данным браузером всегда было достаточно много проблем, но все они само собой имеют пути решения. В данном топике я приведу 3 способа реализации :hover для IE6

1) hover.htc
<attach for=element event=onmouseover handler=topm>
<attach for=element event=onmouseout handler=verm>
<script>
  function topm(){element.className='hover';}
  function verm(){element.className='';}
</script>

Как пользоваться скриптом
Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):
* {behavior:url("hover.htc")}

Либо, вот так (если хотим его применить только к конкретному элементу):
li {behavior:url("hover.htc")}

А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:
li:hover ul, /* для современных браузеров */
li.hover ul { /* для Internet Explorer 6 */
  display: block
}

Обратите внимание, что класс .hover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.

2) SuckerFish hover
sfHover = function() {
   var sfEls = document.getElementById("Id родительского элемента").getElementsByTagName("Имя тега для :hover");
   for (var i=0; i

Как пользоваться скриптом
Сначала нам нужно подключить его в шаблон либо просто вставив в его целиком
<script type="text/javascript">
sfHover = function() {
   var sfEls = document.getElementById("Id родительского элемента").getElementsByTagName("Имя тега для :hover");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

или же создать, допустим, файл hover.js и подключить его так
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/hover.js"></script>

Так как данный скрипт не нужен никому, кроме тех посетителей, которые используют IE6 сделаем его подключение через условный комментарий
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/hover.js"></script>
<![endif]-->

В css шаблона
li:hover ul, /* для современных браузеров */
li.sfhover ul { /* для Internet Explorer 6 */
  display: block
}

Обратите внимание, что класс .sfhover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.

3) Ну и само собой использование jQuery
Сначала нам нужно скачать саму библиотеку jQuery, затем подключить ее в шаблон
Подключение библиотеки через условный комментарий аналогичен сути предыдушего метода
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/jquery-1.2.6.min.js"></script>
<![endif]-->

После этого добавить инициализацию
$('#Тут id элемента с указанием тега, требующего :hover (например, #block div)  ').hover(function() {
  $(this).addClass('hover');
}, function() {
  $(this).removeClass('hover');
});

В итоге получается
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$('#block div ').hover(function() {
  $(this).addClass('hover');
}, function() {
  $(this).removeClass('hover');
});
</script
<![endif]-->

В css шаблона
#block:hover div, /* для современных браузеров */
#block.hover div { /* для Internet Explorer 6 */
  display: block
}

Подводя итоги о работе данных способов можно сказать, что использование способа 3) не рационально без использования jquery на сайте вообще, так как подгружать ~55кб библиотеки jquery ради реализации работы :hover в IE6 не имеет смысла, когда есть два других значительно сжатых способа.
Способ 1) Самый минимальный в плане кода, а способ номер 2) имеет наивысшую совместимость со старыми версиями IE Начиная от 5.0, так же он валиден в плане css, так не требует использования behavior

display:inline-block


Для наглядности, рассмотрим пример списка с закруглённым бекграундом.
display:inline-block

Создаём стандартный список
<ul>
    <li><a href="#">Lorem ipsum dolor</a></li>
    <li><a href="#">Sit amet</a></li>
    <li><a href="#">Consectetuer</a></li>
    <li><a href="#">Adipiscing sed</a></li>
    <li><a href="#">Diam nonummy nibh</a></li>
    <li><a href="#">Quismod tincidunt</a></li>
</ul>

теперь пишем цсс стили для нашего списка
ul {
  list-style-type:none;
  font-size:0.75em;
}
ul li {
  line-height:1em;
  background:#36e428 url(../images/list-left.gif) 0 top no-repeat;
  padding:6px 0 8px 13px;
}
li a {
  text-decoration:none;
  color:#000;
  background:url(../images/list-right.gif) 100% top no-repeat;
}

Теперь немного объяснений. Если мы выполним, поставленную перед нами задачу, именно таким способом, то на выходе мы получим:
display:inline-block

что, мягко говоря, не то что нам нужно.

Человек знающий такое свойство блока как display:block предложит решить эту проблему методом добавления тегу а свойств блока и перенесением на него нужных падингов т.е. наш цсс будеть иметь вид:
ul li {
  line-height:1em;
  background:#36e428 url(../images/list-left.gif) 0 top no-repeat;
}
li a {
  text-decoration:none;
  color:#000;
  background:url(../images/list-right.gif) 100% top no-repeat;\
  display:block;
  padding:6px 0 8px 13px;
}

но если мы взглянем на то что у нас получилось:
display:inline-block

прийдем к выводу, что это тоже не то что нам бы хотелось видеть.

А вот теперь и начинается самое интересное. Из выше приведённых примеров ясно, что нам не подходит не display:block не display:inline свойства элементов, значит будем использовать именно то, что и предназначено для таких случаев, а именно свойство display:inline-block. Для этого нам необходимо немного изменить наш хтмл-файл.
<ul>
    <li><span><a href="#">Lorem ipsum dolor</a></li>
    <li><span><a href="#">Sit amet</span></a></li>
    <li><span><a href="#">Consectetuer</span></a></li>
    <li><span><a href="#">Adipiscing sed</span></a></li>
    <li><span><a href="#">Diam nonummy nibh</span></a></li>
    <li><span><a href="#">Quismod tincidunt</span></a></li>
</ul>

Как видете, мы взяли тег а в тег span для того, чтобы в последствии задать этим элементам, которые «по умолчанию» являются строчными элементами т.е. имеют свойство display:inline, нужное для нас display:inline-block.

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

Итак, наш цсс:
ul li {
  line-height:1em;
  padding-bottom:4px; /* отступ для элементов списка */
}
ul span {
  background:#36e428 url(images/list-left.gif) 0 top no-repeat;
  display:inline-block;
}
li a {
  color:#000;
  text-decoration:none;
  background:url(images/list-right.gif) 100% top no-repeat;
  display:inline-block;
  padding:6px 12px 8px 13px;
}


И если после этих манипуляций, мы взглянем на то что у нас получилось:
display:inline-block

Выводы: свойство display:inline-block позволяет нам использовать паддинги для изначально строчных элементов, а так же делать обтекаемыми блочные элементы.

Халявные домены третего уровня


http://www.unonic.com/ Регистрирует домены вида:

.net.tf
.us.tf
.eu.tf
.ca.tf
.int.tf
.edu.tf
.de.tf
.at.tf
.co.at.tf
.ch.tf
.ru.tf
.pl.tf
.cz.tf
.bg.tf
.sg.tf

http://www.cydots.com/ Регистрирует домены вида... Подробнее

@import и link в чем разница?!


— это базовый, я бы сказал основной, метод подключения CSS к странице. Он позволяет связать веб-страницу и CSS-стили. Вызов добавляется между и вашего HTML документа, например:
<link href="styles.css" type="text/css" />

@import — Импорт позволяет импортировать одну таблицу стилей в другой. Он работает несколько иначе нежели «линк», так как вы можете импортировать таблицы стилей внутрь связанной через «линк» таблицы стилей. Но не желательно включать @import между и вашего HTML документа, например:
<style type="text/css">@import url("styles.css");</style>

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

Зачем использовать @import?

Наиболее распространенная причина использования @import вместо (или вместе с) состоит в том, что старые браузеры не распознают @import, поэтому вы можете таким образом спрятать от них стили. В частности:

скрыть таблицу стилей от Netscape 4, IE 3 и 4 (но не 4.72):
@import url(../style.css);

скрыть таблицу стилей от Netscape 4, IE 3 и 4 (но не 4.72), Konqueror 2 и Amaya 5.1:
@import url("../style.css");

скрыть таблицу стилей от Netscape 4, IE 6 и ниже:
@import url(../style.css) screen;

скрыть таблицу стилей от Netscape 4, IE 4 и ниже, Konqueror 2:
@import "../styles.css";

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

Зачем использовать ?

Одной из наиболее весомых причин в пользу использования связанных через таблиц стилей является возможность использования альтернативных стилей для ваших клиентов. Такие браузеры как Firefox, Safari и Opera поддерживают атрибут rel="alternate stylesheet" и когда есть возможность позволяют пользователям переключаться между таблицами стилей. А для переключения между таблицами стилей в IE придется использовать javascript свитчер. Такой способ наиболее часто используется для подключения стилей для страниц в увеличенном формате. Как известно, IE не способен нормально увеличивать страницы, поэтому вы можете предложить альтернативный CSS.

Одним из недостатков использования @import является то, что если у вас есть очень простой только c правилом @import, ваши страницы могут отображаться некорректно, в основном в IE6 с так называемым эффектом FOUC. Простым фиксом этой проблемы является внедрение в , по крайней мере, одного дополнительного элемента или .

Media Type

Многие пишут о том, что можно использовать media type для сокрытия таблицы стилей от старых браузеров. Зачастую, этот довод приводится в пользу при сравнивании способов подключения таблиц стилей, но подвох заключается в том, что на самом деле можно использовать media type в обеих случаях, и браузеры, не поддерживающие media type не будут видеть таблицы стилей. Например, Netscape 4 не распознает media type, так что вы можете использовать как связанную через таблицу стилей, чтобы скрыть стиль от этого браузера, так и правило @import:
<link href="styles-nons4.css" media="all" type="text/css" />


Но вот в некоторых версиях IE (6 и ниже) не поддерживается тип носителя при использовании правила @import, так что вы можете использовать это, чтобы скрыть таблицу стилей от них:
<style type="text/css">@import url(styles.css) all;</style>


Итак, какой метод нужно использовать?

Лично я, как и автор статьи, предпочитаю использовать , а затем импортировать таблицы стилей в мой внешний файл стилей. Таким образом, я имею только 1 или 2 строки кода в своем html-документе. Но в общем, все зависит от вас. Если вас больше устраивает @import, то используйте его! Оба метода соответствуют стандартам и, если вы не планируете поддержку действительно старых браузеров (например, Netscape 4) не существует веского довода в пользу какого-либо метода.

Что разделяет дизайн и искусство


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

Что разделяет дизайн и искусство

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

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