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

CSS табы

Alex — Sun, 19 Sep 2010 18:13:25 +0000

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

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

Разметка простая. Каждый элемент li это отдельный слайд.

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

Ссылки указывают на соответствующие id слайдов. Слайдам указаны ширина и высота равные блоку tabs-content.

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

Демо

CSS3 Media Queries

Alex — Thu, 22 Apr 2010 12:49:36 +0000

Обычно, для того чтобы поменять что-либо на странице при различных разрешениях, используется 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

Alex — Mon, 14 Dec 2009 13:19:53 +0000

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

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

1	<input type="text" />

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 начинает смещаться.

Демо

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

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

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

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

Выпадающее меню без javascript 2

Alex — Thu, 08 Oct 2009 08:33:22 +0000

На CSSplay недавно была опубликована новая версия выпадающего меню на «чистом» CSS. В этой версии никаких хаков, условных комментариев и таблиц для IE6.

<ul id="nav">
  <li><a href="">Главная</a></li>
  <li><a href="">Товары</a>
    <ul>
      <li><a href="">Компьютеры</a></li>
      <li><a href="">Мониторы</a></li>
      <li><a href="">Комплектующие</a></li>
    </ul>
  </li>
  <li><a href="">Услуги</a>
    <ul>
      <li><a href="">Сборка</a></li>
      <li><a href="">Ремонт</a></li>
      <li><a href="">Обслуживание</a></li>
    </ul>
  </li>
  <li><a href="">Условия</a></li>
  <li><a href="">Карта сайта</a></li>
</ul>

*{
  margin:0;
  padding:0
}
#nav{
  font-size:0.7em;
  list-style-type:none;
  width:600px;
  height:25px;
  display:inline-block;
  background:#355C96;
  line-height:25px
}
  #nav li{
    float:left;
    width:120px;
    margin-top:-10000px
  }
    #nav li a{
      width:120px;
      text-decoration:none;
      text-align:center;
      color:#fff;
      position:relative;
      float:left;
      margin-right:-119px;
      margin-top:10000px
    }
    #nav li a:hover, #content #nav li a:focus, #content #nav li a:active{
      background:#DCE2FC;
      margin-right:0;
      color:#355C96
    }
    #nav li ul{
      background:#6286BD;
      float:left;
      margin-top:-25px;
      padding-top:25px;
      margin-bottom:-10000px;
      list-style-type:none
    }
      #nav li ul li{
        float:none;
        margin:0;
        width:auto
      }
        #nav li ul li a{
          float:none;
          display:block;
          margin:0;
          margin-right:-1px;
          background:#6286BD
        }

Демо

Position fixed в IE6

Alex — Mon, 03 Aug 2009 10:30:19 +0000

Как известно IE6 не поддерживает position:fixed. Для эмуляции данного эффекта можно использовать position:absolute и CSS expression.

#fixed{ /* Стили для IE6 */
  position:absolute;
  top:expression(eval(document.documentElement.scrollTop))
}

Чтобы не было подергиваний фиксированного блока, нужно добавить элементу html или body фоновое изображение. В качестве значения background можно использовать about:blank.

1
2
3

html{
  background:url(about:blank)
}