Пополнение в рядах шпаргалок по веб-технологиям. Новая версия ранее опубликованной шпаргалки от Dominique Hazaël-Massieux из W3C.
Шпаргалка представляет собой сервис, с помощью которого можно быстро получить информацию из различных спецификаций (HTML, CSS, SVG, XPath). В данной версии были добавлены новые HTML5 элементы. CSS3 пока нет.
Шпаргалка доступна как веб-сервис, а также в виде андроид приложения.
Хочу поделиться с вами найденным решением проблемы, с которой я сталкивался раньше не один раз, но нормального выхода не находил. Проблема была связана с вёрсткой нескольких блоков, которые располагаются друг за другом.
Например так:
Если высота одинакова для всех блоков, то проблем возникнуть не должно. Решалось это путём использования плавающих блоков и указания им необходимой ширины и высоты. Но что делать, если в каждом блоке разный объём контента и соответственно разная высота. В результате вёрстка могла «поехать»:
Как написал автор оригинала: «Необходимо правильное и семантичное решение с гибкостью, которой обладают таблицы»
.
Использовать будем такую структуру:
1 2 3 4 5 6 7 | <ul> <li> <img src="photo.jpg" width="75" height="75" alt="" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </li> … </ul> |
и следующие стили:
1 2 3 4 5 6 7 | li { width:130px; border: 1px solid #ссс; display: inline-block; margin: 5px; padding: 5px } |
В FF3, Safari 3, Opera и IE8b2 выглядит вроде нормально, но что-то не так с вертикальным выравниванием:
На самом деле результат логичен, но это не то, что нам нужно. Чтобы скорректировать вид, сделаем выравнивание по верхней линии строки.
1 2 3 4 5 6 7 8 | li { width: 130px; border: 1px solid #ссс; display: inline-block; margin: 5px; padding: 5px; vertical-align: top } |
То что нужно. Однако в IE6 и IE7 всё совсем не так.
IE6 и IE7 не поддерживают inline-block, поэтому с помощью условных комментариев прописываем для них display:inline.
1 2 3 4 5 6 7 | <!--[if lte IE 7]> <style type="text/css"> ul li { display: inline } </style> <![endif]--> |
Оригинал: Cross-Browser Inline-Block.
В разных браузерах полоса прокрутки выглядит по разному. И когда возникает необходимость настроить внешний вид скроллбара, появляются мысли что это должно быть как-то связано с CSS. Если вы будете искать информацию об этом, то скорее всего обнаружите что есть стили с помощью которых можно настроить цвет скроллбара. Стоит заметить, что поддерживаются эти стили только браузерами IE 5.5 и выше.
Бывают ситуации когда необходимо иметь полный контроль на внешним видом скроллбара. Например если дизайнер сделал элемент со специфической полосой прокрутки.
Для решения этой проблемы нам на помощь приходит Javascript со своими возможностями. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.
HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.
1 2 3 4 5 6 7 | <body> <div class="scroll-wrap"> <div class="scroll-pane"> .... </div> </div> </body> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .scroll-wrap{ width: 300px; margin: 40px auto; background: #F7F1E5 } .scroll-pane{ width: 290px; height: 200px; padding: 0 0 0 10px; overflow: hidden } a.jScrollArrowUp{ display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; background:url(images/but.gif) no-repeat center top; height:18px; } a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; background:url(images/but.gif) no-repeat center top; height:18px; } .jScrollPaneDrag { position: absolute; cursor: pointer; overflow: hidden; background:url(images/drag.gif) no-repeat left top; height:42px } |
Далее необходимо подключить следующие файлы в секцию head:
1 2 3 4 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jScrollPane.js"></script> <script type="text/javascript" src="jquery.mousewheel.min.js"></script> <link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" /> |
Файл jquery.mousewheel.min.js необходим в том случае, если необходимо прокручивание содержимого колесом мыши.
и небольшой javascript:
1 2 3 4 | $(function() { $('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43}); }); |
Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.
Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в новом дизайне, элемент, которым они привыкли пользоваться. Вы должны быть уверены, что новый вид ассоциируется именно с полосой прокрутки. Якоб Нильсен написал неплохую статью «Scrolling and Scrollbars», в которой описал, что можно, а что нельзя делать, когда дело касается настройки скроллбара. Учитывайте это когда будете применять данный способ.
Оригинал: Styling Scrollable Areas
Сегодняшний урок описывает создание анимированного меню, с помощью библиотеки Mootools. По умолчанию внешний вид меню выглядит примерно так:
HTML представляет собой следующую структуру. У нас есть div с id="menu", который является контейнером для меню, заголовоки секций (элемент h3) а также меню секций (элемент ul):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="menu"> <h3 class="toggler menusection">Секция 1</h3> <ul class="element menusection"> <li><a href="">Ссылка 1</a></li> <li><a href="">Ссылка 2</a></li> <li><a href="">Ссылка 3</a></li> <li><a href="">Ссылка 4</a></li> </ul> <h3 class="toggler menusection">Секция 2</h3> <ul class="element menusection"> <li><a href="">Ссылка 1</a></li> <li><a href="">Ссылка 2</a></li> </ul> <!-- По необходимости добавьте дополнительные секции... --> </div> |
Вы можете добавить дополнительные секции, используя структуру кода как в предыдущих секциях.
CSS код текущего примера следующий, однако оформление вы можете изменить по своему вкусу:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #menu h3{ background:#E8D7B7; padding:4px; font-size:12px; color:#000; border-bottom:solid 2px #9C8B7B; cursor:pointer; font-weight:normal; text-transform:uppercase } #menu ul{ list-style:none } #menu li{ border-bottom:solid 1px #DEDEDE } #menu li a{ padding:3px 6px; display:block; color:#5CA8CC; text-decoration:none } #menu li a:hover{ background:#EFEFEF } |
Осталось добавить саму библиотеку Mootools:
1 | <script type="text/javascript" src="mootools.js"></script> |
и следующий код в секцию <head>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript"> window.addEvent('domready', function(){ var accordion = new Accordion('h3.menusection', 'ul.menusection', { opacity: false, onActive: function(toggler, element){ toggler.setStyle('color', '#333333'); toggler.setStyle('background', '#F7F1E5'); }, onBackground: function(toggler, element){ toggler.setStyle('color', '#333'); toggler.setStyle('background', '#E8D7B7'); } }, $('menu')); }); </script> |
Пользуемся!
