19 Февраля 2012 11:18

Меню с перекрывающимися вкладками HTML+CSS без javascript

Еще одна статья посвященная верстки меню в виде вкладок.



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

Дизайнеры - это такие люди, которые все время что то креативят. Ох уж мне их креатив. Зачастую, взглянув на их дизайна, потом сидишь и часами ломаешь голову - как бы сделать получше. Вот и наш дизайнер родил нечто подобное.


Отказываться от подсветки пунктов меню при наведении курсора мыши - клиента не устраивает. Просто нарезать на кусочки (как показано на рисунке), но тогда проблема с перекрывающимися частями меню.
Выхода нет делаем нормальные вкладки. ;)

Суть правильной вкладки в том, что доведя курсор до последнего пиксела вкладки, курсор должен быть еще на этой же вкладке, а не на соседней. При чем левая(кому нравится можно правую) часть вкладки должна частично скрываться за вкладкой, которая находится левее, а при наведении на эту вкладку, она должна полностью выходить на передний план. В прочем, всё это хорошо продемонстрировано в примере из шапки данного поста.

HTML код вкладок
Код
<ul id="lineTabs">
   <li><a href="#">4rd Tab</a></li>
   <li><a href="#">Third Tab</a></li>
   <li><a href="#" class="active">Second Tab</a></li>
   <li><a href="#">First Tab</a></li>
</ul> 
Здесь все просто и думаю понятно. Единственное на что следует обратить внимание, это на последовательность вкладок. Он перевернута. Т.е. начинается с последней а заканчивается первой. Это из-за того что выравнивание в данном методе идет по правому краю (float:right;).


CSS код для вкладок
Код
#lineTabs{
   height:30px;
   list-style:none;
   margin:0px auto;
   padding:0px;
   padding-right:30px;
   padding-left:10px;
   width:440px;
}
#lineTabs li{
   display:block;
   float:right;
   margin:0px;
   padding:0px;
   position:relative;
   overflow:visible;
   text-align:center;
   width:110px;
}
#lineTabs li a{
   background:url(images/tab.png);
   color:#dbdbdb;
   display:block;
   font:normal 14px arial;
   height:16px;
   margin:0px -10px;
   padding:7px 20px;
   position:relative;
   text-decoration:none;
   width:90px;
}
#lineTabs li a.active{
   background:url(images/tab_act.png);
   color:white;
   z-index:50;
}
#lineTabs li a:hover{
   background:url(images/tab_act.png);
   color:white;
   z-index:30;
}



Немного прокомментирую в чем суть этого метода:

1. Обтекание справа для элементов списка – дает нам возможность производить наложение элементов справа-налево.

Код
#lineTabs li{
   float:right;
}



2. Общую ширину (width+padding) вложенных тегов url в тег * делаем больше, чем у родительского элемента *.

Код
#lineTabs li{
   margin:0px;
   padding:0px;
   width:110px;
}
#lineTabs li a{
   margin:0px;
   padding:7px 20px;
   width:90px;
}


3. Отрицательные отступы с краёв – благодаря этому наши табы будут наезжать друг на друга.

Код
#lineTabs li a{
   margin:0px -10px;
}
4. Задаем относительное позиционирование на случай для IE6.
Код
#lineTabs li a{
   position:relative;
}

5. “Подымаем” вкладку под курсором над остальными, за счет z-index.

Код
#lineTabs li a:hover{
   z-index:30;
}



Вот и все.

Просмотров:5637 0   Комментариев:0

'bitrix:asd.share.buttons' is not a component

19 Февраля 2012 10:52

Меню вкладки HTML+CSS без javascript

В свое время пришлось убить несколько часов что бы найти нужное решение, поэтому здесь собраны найденные варианту решений.
Начну с простого меню, когда вкладки отделены друг от друга. Придумал не я, описание нашел вот здесь www.alexilin.ru.

Метод для построения этого меню называется «Sliding Doors». Его плюсами является то, что оно имеет резиновые кнопок.

На рисунке вкладки меню имеют три состояния:
  • Обычное
  • Активное
  • При наведении мыши

Ширина вкладки зависит от содержимого. Внутри ссылок находится тег SPAN.


Для создания эффекта при наведении и выделения активной вкладки меню используется одно фоновое изображение:




Далее приведу html и css код.


HTML код
Код
<ul class="tab">
    <li class="active"><a href="home.html"><span>Главная</span></a></li>
    <li><a href="community.html"><span>Сообщество</span></a></li>
    <li><a href="blog.html"><span>Блог</span></a></li>
    <li><a href="messages.html"><span>Сообщения</span></a></li>
    <li><a href="contact.html"><span>Контакты</span></a></li>
</ul>

CSS код
Код
ul, li{
    border:0;
    margin:0;
    padding:0;
    list-style:none
}
ul{
    border-bottom:solid 1px #DEDEDE;
    height:29px;
    padding-left:20px;
}
li{
    float:left;
    margin-right:2px;
}
.tab a:link, .tab a:visited{
    float:left;
    height:30px;
    background:url(tab-round.png) no-repeat right -30px;
    color:#666;
    font-weight:bold;
    text-decoration:none;
    padding:0 14px 0 0;
}
.tab a span{
    float:left;
    height:30px;
    background:url(tab-round.png) no-repeat left -30px;
    padding:0 0 0 14px;
    line-height:30px;
    cursor:pointer
}
.tab a:hover{
    background-position:right -60px;
}
.tab a:hover span{
    background-position:left -60px;
}
.active a:link, .active a:visited, .active a:visited, .active a:hover{
    background-position:right 0;
}
.active a span, .active a:hover span{
    background-postition:left 0;
}

Другие интересные источники: http://woork.blogspot.com/2008/03/clean-tab-bar-digg-like-using-css.html

Просмотров:6238 0   Комментариев:0

'bitrix:asd.share.buttons' is not a component

26 Сентября 2010 18:58

Использование любых шрифтов на своем сайте

Иногда клиент заказывает сайт и просит использовать не традиционные шрифты на сайте. Как тут быть и сделать так что бы они отображались корректно в разных браузерах.
В просторах инета сейчас существует несколько решений, но наиболее практичные с моей точки зрения следующие три:
  • Typeface.js
  • Cufon.js
  • FLIR


Теперь о каждом из ни чуть поподробнее:

Typeface.js
Решение на чистом javascript (никакого флеша и php). Для своей работы скрипт использует SVG и VML. Итак как это работает.

Для начала, идем на страницы загрузки и качаем саму библиотеку. Далее нам нужен будет специальный файл со шрифтом. Для этого выбираем нужный нам ТруТайп шрифт и конвертируем его. Подключаем к странице вот так:
Код
<html>
<head>
<title>Тестируем typeface.js</title>    
<!-- сначала грузим любые внешние файлы стилей -->
<link rel="stylesheet" type="text/css" ref="/style.css">

<!-- потом грузим библиотеку и файлы шрифтов -->
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
</head>

<body>
<!-- А тут уже можно добавить стилей к шрифту с помощью CSS -->
<div class="myclass typeface-js" style="font-family: Helvetiker">
Немного пробного текста, чтобы посмотреть что и как...
</div>
</body>
</html>

Вы также можете посмотреть примеры или почитать подробнее об особенностях установки на сайте проекта. Довольно удобная качественная вещь.


Cufon
Еще одно решение, тоже на js + SVG/VML. Собственно, принцип работы и порядок действий такой же, как у typeface.js. Как плюс можно отметить, что есть поддержка не только .TTF, но и .OTF шрифтов.

Идем на сайт проекта, качаем библиотеку и генерируем файл шрифта (ух, как много полей). Теперь имплементим на сайт.

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Библиотеке -->
<script src="cufon-yui.js" type="text/javascript"></script>

<!-- Файл шрифта -->
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>

<!-- Указываем, к чему применить шрифт (в данном случае ко всем заголовкам h1) -->
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>Пример заголовка первого уровня</h1>
</body>
</html>

Опять же, советую почитать про особенности установки более подробно.

FLIR
Эта штука заменяет указанные вами части текста... картинками. Вот такое, с одной стороны, оригинальное, а с другой, привычное решение.

Для работы необходимо иметь PHP (желательно пятый) и GD на сервере. На сервере-то как раз и будут происходить все операции со шрифтами. На клиенте же нужно только задать правила, как и что заменять.

Источники
http://habrahabr.ru/blogs/webdev/61033/
http://vremenno.net/design/use-any-font-on-website/

Просмотров:1955 0   Комментариев:0

'bitrix:asd.share.buttons' is not a component

4 Ноября 2009 1:58

Как прижать footer к низу окна

Вот что недавно нарыл в инете по этому поводу. Сразу пример

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<Head>
  <Title>Test</Title>
  <Style>
    html, body {
      height:100%; margin:0;
    }
 
    html>body {
      min-height:100%;
      height:auto;
    }
 
    body {
      position:relative;
    }
 
    #footer {
      position:absolute;
      bottom:0; width:100%;
    }
 
    #main {
      padding-bottom:50px;
    }
 
    #header,
    #footer {
      color:white; background:green;
      height:50px;
    }
  </Style>
<Body>
<div id="header">Header</div>
  <div id="main">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  </div>
<div id="footer">Footer</div>


Смысл этой фичи:
- футер вместе с остальным контентом лежит в неком главном блоке
- главный блок растягивается на минимальную высоту свойством min-height
- причем для IE эту роль выполняет просто height, который по счастливому случайному багу работает как раз как min-height
- футер вешается абсолютно внизу, но значит погребет под собой и нижнюю часть main'а
- чтобы этого не было, main'у ставится нижний padding размером ровно в футер.

Просмотров:1770 0   Комментариев:0

'bitrix:asd.share.buttons' is not a component

IT-технологии
WEB сервера, настройка и конфигурирование, интересные решения
Программирование
WEB программирование, WEB дизайн, Кросс-браузерная верстка
Технические науки
Физика, Математика, Химия и все-то, что лежит в основе наших знаний