Алексей Ильин » HTML

Шпаргалка от W3C

Alex — Fri, 30 Jul 2010 06:10:14 +0000

Пополнение в рядах шпаргалок по веб-технологиям. Новая версия ранее опубликованной шпаргалки от Dominique Hazaël-Massieux из W3C.

Шпаргалка представляет собой сервис, с помощью которого можно быстро получить информацию из различных спецификаций (HTML, CSS, SVG, XPath). В данной версии были добавлены новые HTML5 элементы. CSS3 пока нет.

Шпаргалка доступна как веб-сервис, а также в виде андроид приложения.

Кроссбраузерное использование inline block

Alex — Tue, 24 Feb 2009 18:03:26 +0000

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

Например так:

Если высота одинакова для всех блоков, то проблем возникнуть не должно. Решалось это путём использования плавающих блоков и указания им необходимой ширины и высоты. Но что делать, если в каждом блоке разный объём контента и соответственно разная высота. В результате вёрстка могла «поехать»:

Как написал автор оригинала: «Необходимо правильное и семантичное решение с гибкостью, которой обладают таблицы».

Использовать будем такую структуру:

<ul>
    <li>
        <img src="photo.jpg" width="75" height="75" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </li>
    …
</ul>

и следующие стили:

li {
    width:130px;
    border: 1px solid #ссс;
    display: inline-block;
    margin: 5px;
    padding: 5px
}

В FF3, Safari 3, Opera и IE8b2 выглядит вроде нормально, но что-то не так с вертикальным выравниванием:

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

li {
    width: 130px;
    border: 1px solid #ссс;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    vertical-align: top
}

То что нужно. Однако в IE6 и IE7 всё совсем не так.

IE6 и IE7 не поддерживают inline-block, поэтому с помощью условных комментариев прописываем для них display:inline.

Оригинал: Cross-Browser Inline-Block.

Делаем вертикальный «скроллбар»

Alex — Fri, 03 Oct 2008 14:39:31 +0000

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

Бывают ситуации когда необходимо иметь полный контроль на внешним видом скроллбара. Например если дизайнер сделал элемент со специфической полосой прокрутки.
Для решения этой проблемы нам на помощь приходит Javascript со своими возможностями. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.

HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.

<body>
    <div class="scroll-wrap">
        <div class="scroll-pane">
            ....
        </div>
    </div>
</body>

CSS:

.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:

<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:

$(function()
{
$('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43});
});

Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.

Удобство и доступность

Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в новом дизайне, элемент, которым они привыкли пользоваться. Вы должны быть уверены, что новый вид ассоциируется именно с полосой прокрутки. Якоб Нильсен написал неплохую статью «Scrolling and Scrollbars», в которой описал, что можно, а что нельзя делать, когда дело касается настройки скроллбара. Учитывайте это когда будете применять данный способ.

Оригинал: Styling Scrollable Areas

UPD: Пример горизонтальной полосы прокрутки.

Анимированное меню на Mootools

Alex — Tue, 23 Sep 2008 19:59:12 +0000

Сегодняшний урок описывает создание анимированного меню, с помощью библиотеки Mootools. По умолчанию внешний вид меню выглядит примерно так:

HTML представляет собой следующую структуру. У нас есть div с id="menu", который является контейнером для меню, заголовоки секций (элемент h3) а также меню секций (элемент ul):

<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 код текущего примера следующий, однако оформление вы можете изменить по своему вкусу:

#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>

и следующий код в секцию :

<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>

Пользуемся!

Оригинал: Nice animated menu using CSS and Mootools

HTML и CSS шпаргалки

Alex — Thu, 17 Jul 2008 08:16:28 +0000

HTML:

XHTML Character Entity Reference — 252 символа из HTML 4 и XHTML 1.0. Можно группировать по категориям и поэкспериментировать с различными шрифтами.
HTML Help Sheet
- PDF [112KB]
HTML Cheat Sheet — тэги, наиболее часто используемые символы, атрибуты, события — всё это удалось уместить на одном листе формата А4.
- PNG [77KB]
- PDF [563KB]
RGB Hex Colour Chart — 216 так называемых «безопасных» цветов
- PNG [48KB]
- PDF [199KB]
HTML Character Entities Cheat Sheet — HTML символы. Таблица имеет 4 колонки, каждая из которых в свою очередь поделена еще на 3. В первой отображается код символа, во второй сам символ, ну а в третьей описание символа.
- PNG [122KB]
- PDF [959KB]

CSS:

CSS Shorthand Cheat Sheet — таблица сокращенных CSS свойств.
- PDF [117KB]
CSS Help Sheet
- PDF [168KB]
CSS CHEAT SHEET
CSS Quick Reference Guide
- PDF [93KB]
CSS Cheat Sheet (V2) — CSS шпаргалка, в которую включены все селекторы (CSS 2.1) и свойства, показана визуальная модель контейнера, есть справка по единицам измерения и многое другое.
- PDF [316KB]
- PNG [77KB]