CSS табы

19 09.10
33

Обнаружил в интернете очень простой способ создания табов без использования JS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Разметка простая. Список .tabs используется для навигации. Далее идет контейнер .tabs-content со списком, в котором каждый элемент li это отдельный слайд.

1
2
3
4
5
6
7
8
9

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

Ссылки в навигации указывают на соответствующие id слайдов. Слайдам установлена ширина и высота равные внешнему контейнеру.

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

Теги: •

CSS3 Media Queries

22 04.10
6

Обычно, для того чтобы поменять что-либо на странице при различных разрешениях, используется js. С приходом CSS3 сделать это станет гораздо проще благодаря CSS3 Media Queries.

Media Queries дают возможность применять различные CSS стили в зависимости от возможностей устройства на котором просматривается страница.

Например, чтобы применить особое оформление в случае, если ширина экрана меньше или равна 1000px, нужно использовать следующую конструкцию:

1
2
3

@media screen and (max-width:1000px) {
    /* Стили при ширине экрана <= 1000px */
}

Для наглядности откройте демо и попробуйте изменить размер окна.

Media Queries поддерживаются Webkit-браузерами, Opera и Firefox начиная с версии 3.5. Internet Explorer к сожалению данную возможность не поддерживает и не известно будет ли поддержка в 9-й версии. В Internet Explorer 9 (Second Preview) появилась таки поддержка CSS3 Media Queries.

Теги:

Смещение фонa у input в IE6 и 7

14 12.09
23

Зачастую многие дизайнеры в своих работах используют отличные от стандартных элементы форм. К сожалению, в процессе вёрстки подобных элементов иногда возникают те или иные трудности. Например, Dimox недавно поднял вопрос вертикального выравнивания у кнопок в FF.

Я же хочу обратить ваше внимание на баг, который присутствует в IE6, 7 у текстовых полей с фоновым изображением.

1

<input type="text" />
1
2
3
4
5
6
7
8

input{
   width:200px;
   height:19px;
   padding:8px 10px;
   border:none;
   background:url(images/input-bg.png) no-repeat left top;
   font:1em Arial,Helvetica,sans-serif
}

В том случае, если введенный текст превышает ширину элемента, фоновое изображение в IE6, 7 начинает смещаться.

Смещение фона у полей ввода текста в IE6 и 7

Использование background-attachment: fixed работает только в IE6, в 7-ке проблема остаётся.

Можно указывать background-position: right bottom для фона. В этом случае изображение смещается в противоположную сторону, и смещения не видно, если не перемещать курсор обратно, в начало текста.

Наиболее универсальным способом является использование дополнительного элемента, например span, с необходимым фоном.

Жду ваших комментариев.

Теги: •