Табы с помощью CSS

19 09/10
32

Обнаружил в интернете очень простой способ создания табов (сменяющих друг друга блоков с контентом). Обычно подобные вещи делаются с помощью javascript, либо сейчас еще экспериментируют с CSS3. Данный пример обходится без этого.

HTML

<ul class="tabs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
</ul>
<div class="tabs-content">
    <ul>
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three">3</li>
        <li id="four">4</li>
        <li id="five">5</li>
    </ul>
</div>

Структура простая, думаю комментировать тут нечего.

CSS

.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content li {
    width:960px;
    height:300px;
}

Ссылки в навигации указывают на соответствующие id блоков с контентом. Этим блокам указаны ширина и высота равные блоку tabs-content. По умолчанию, при нажатии, браузер ищет в контенте блок с id указанным в ссылке. А т.к. отображаться может какой-либо один блок, это заставляет показывать актуальный.

Работает в Firefox, Opera (для старых версий нужно немного дополнить css), Safari, IE6+.

Казалось бы всё просто и очевидно, но честно говоря я как-то не предполагал подобного поведения браузеров.

Теги: •

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

05 08/10
24

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

После публикации статьи «jQuery: Настраиваем внешний вид скроллбара» многие просили показать аналогичный пример, но с горизонтальной полосой прокрутки. Собственно вот и он.

Для создания будет использоваться jQuery плагин jScrollHorizontalPane.

HTML

Разметка очень простая. Необходим добавить контенту один внешний блок:

<div id="scroll-box">
    <!-- Контент -->
</div>

CSS

Подключаем файл jScrollHorizontalPane.css, а также прописываем необходимые для работы и оформления стили:

#scroll-box{
    width:300px;
    height:150px;
    overflow:hidden;
    float:left;
}
#scroll-box p{
    width:1000px;
}
a.jScrollArrowLeft{
    height:20px;
}
a.jScrollArrowRight{
    height:20px;
}

Чтобы появился эффект переполнения, необходимо контенту установить ширину большую, чем ширина внешнего блока.

Javascript

Подключаем необходимые скрипты:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.min.js"></script>

Ну и указываем к какому именно блоку установить прокрутку:

$(function(){
    $('#scroll-box').jScrollHorizontalPane({
        showArrows:true,
        arrowSize:20,
        scrollbarHeight:20,
        scrollbarMargin:0
    });
});

Немного о параметрах, используемых в примере.

  • showArrows — отвечает за отображение кнопок «Назад» «Вперёд» на полосе прокрутки
  • arrowSize — ширина этих кнопок в px (если не указано здесь, должна определяться через css)
  • scrollbarHeight — высота полосы прокрутки в px
  • scrollbarMargin — отступ справа от полосы прокрутки

Удачи!

Теги: • • •

Шпаргалка по HTML, CSS, SVG, XPath от W3C

30 07/10
6

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

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

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

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

Теги: • • • • • •

Результаты голосования: Вы ещё поддерживаете IE6?

18 07/10
22

Очередное голосование закончено. И его результаты, честно говоря, немного неожиданны, но неудивительны. 70% проголосовавших оставили IE6 в прошлом. Очевидно, что этот браузер постепенно уходит из жизни. Для многих он уже умер, кто-то доживает с ним последние дни, а некоторые пока не хотят (или не могут) расстаться.

Вы ещё поддерживаете IE6?

Поддерживать или нет? Устраивать очередную дискуссию по этому поводу не вижу смысла, их уже достаточно. Думаю каждый уже сделал выбор, исходя из личных взглядов, требований заказчиков и т.д. Я же на данный момент, всё ещё учитываю IE6, опять же из-за соответствующих требований заказчиков.

Хотелось бы узнать у тех кто еще поддерживает IE6, как долго вы ещё собираетесь это делать?

Теги: