Antichat снова доступен.
Форум Antichat (Античат) возвращается и снова открыт для пользователей.
Здесь обсуждаются безопасность, программирование, технологии и многое другое.
Сообщество снова собирается вместе.
Новый адрес: forum.antichat.xyz
 |
|
[CSS] Табы как в Windows Vista |
24.08.2006, 04:01
|
|
Познавший АНТИЧАТ
Регистрация: 26.11.2004
Сообщений: 1,149
Провел на форуме:
941818
Репутация:
569
|
|
[CSS] Табы как в Windows Vista
Сдеалем-ка меню в стиле висты.
Да, вот именно такое =))) Не знаю зачем оно может пригодится, но в данной статье я хотел рассказать небольшой трюк, который недавно использовал. Лучшим примером будет как раз такое Tab-меню.
Начнем. Для начала нам нужен обычный список:
PHP код:
<ul id='tabs'>
<li><a href=''>Formats</a></li>
<li><a href=''>Location</a></li>
<li><a href=''>Keyboards and Languages</a></li>
<li><a href=''>Administrative</a></li>
</ul>
Замечательно.
Теперь разберемся с CSS кодом. Для начала я позиционирую как список, так и все его элементы по левому борту, т.к. нам нужно горизонтальное меню. Одновременно немного настраиваю отображение списка. в частности делаю отступ от левого борта для первого таба и прописываю общую длинну списка:
PHP код:
<style>
#tab, #tab li, #tab a{
float:left;
}
#tab{
padding-left:2px;
width:300px;
}
Замечательно.
Теперь играемся с "a"... Пару бордеров, пару отступов итп:
PHP код:
<style>
#tab, #tab li, #tab a{
float:left;
}
#tab{
padding-left:2px;
width:500px;
list-style:none;
}
#tab a{
padding:0 5px;
height:17px;
line-height:17px;
color:black;
text-decoration:none;
border:1px solid #8B8C91;
border-bottom:0;
font-family:tahoma, verdana, arial;
font-size:12px;
background:#EDECF4;
}
</style>
замечательно =)))
Теперь используем обычный трюк с class='active'. Элементу, который в данный момент активный, присваивается class='active' и пишется несколько другой CSS код.
PHP код:
<ul id='tab'>
<li><a href=''>Formats</a></li>
<li class='active'><a href=''>Location</a></li>
<li><a href=''>Keyboards and Languages</a></li>
<li><a href=''>Administrative</a></li>
</ul>
код списка. Как вы могли заметить, li для "Location" приобрел class='active' (вы уж простите что так разжевываю, просто чтоб вопросов менье было у начинаюих =))
и пишем CSS для него:
PHP код:
#tab .active a{
height:19px;
line-height:19px;
color:black;
background:#fff;
}
Заметим, что активный элемент сполз вниз, а не возвысился над остальными, как было задумано.
Чтобы поправить это достаточно присвоить margin-top:2px для всех элементов a, кроме активного. Т.е. опустить все элементы на 2 пикселя, кроме активного.
куда лучше =))) ну а теперь тот самый трюк, о котором я и хотел поведать. Как можно заметить, каждый элемент a имеет бордеры справа и слева. Поэтому на стыке получается линия в 2 пикселя, что не очень красиво. Теоритически можно задать только левый или только правый бордер и конечному\начальному элементу присвоить другой класс и заливать оба бордера. Но у нас с вами один из элементов выше других, а значит он должен иметь оба бордера. Какзалось бы ситуация сложная, но все оказалось проще.
PHP код:
#tab li{
margin-right:-1px;
}
мы просто "сдвигаем" все элементы li списка на один пиксель влево, причем их абсолютная позиция не меняется. Т.е. элементы как бы наезжают друг на друга, но зато мы видим то, что хотели добиться
Дело за малым. Осталось прорисовать горизонтальную черту списку и все будет готово. Тут я уже воспользуюсь не своим трюком, а трюком известного немецкого дизайнера Дэна (simplebits.com)
Ведь если мы просто проведем border-bottom для списка, то получим такую картину
Как видим, линия проходит и под активным элементом. Я долго марался с этим но понял что кроссбраузерно проблему решить нельзя с помощью border-bottom. Трюк Дэна прост - мы заливаем в бэкграунд списка эту линию и активный элемент смещаем чуть вниз. А точнее мы смещаем вниз все элементы, просто у остальных a элементов появляется нижний бордер. Но это не суть, для начала нам нужен 1 пиксель гифом нужного цвета - цвета линии, чтобы залить бэкграунд. делаем. Конечный код выглядит примерно так:
PHP код:
<style type='text/css'>
#tab, #tab li, #tab a{
float:left;
}
#tab{
padding-left:2px;
width:500px;
list-style:none;
background:url('1px.gif') repeat-x left bottom;
}
#tab a{
padding:0 5px;
height:17px;
line-height:17px;
color:black;
text-decoration:none;
border:1px solid #8B8C91;
font-family:tahoma, verdana, arial;
font-size:12px;
background:#EDECF4;
margin-top:2px;
}
#tab .active a{
height:19px;
line-height:19px;
color:black;
background:#fff;
margin-top:0;
border-bottom:1px solid #fff;
}
#tab li{
margin-right:-1px;
}
</style>
<ul id='tab'>
<li><a href=''>Formats</a></li>
<li class='active'><a href=''>Location</a></li>
<li><a href=''>Keyboards and Languages</a></li>
<li><a href=''>Administrative</a></li>
</ul>
посмотреть вживую можно тут:
http://exot.ru/trin/vista.php |
|
|
24.08.2006, 13:15
|
|
Постоянный
Регистрация: 17.07.2005
Сообщений: 475
Провел на форуме:
1665310
Репутация:
488
|
|
Прикольно, спасибо
|
|
|
|
24.08.2006, 21:23
|
|
Познавший АНТИЧАТ
Регистрация: 26.11.2004
Сообщений: 1,149
Провел на форуме:
941818
Репутация:
569
|
|
=) велком =)
тут еще пару статей было, как будет время - еще ченить напишу.
http://doci.nnm.ru/trinux/30.10.2005/php_css_alendar_sobytijnovostej
http://doci.nnm.ru/trinux/26.01.2006/css_zakruglyaem_kraya_blokov_bez_kartinok
http://doci.nnm.ru/trinux/27.01.2006/css_effekt_3d_dlya_tablic
|
|
|
|
27.08.2006, 05:57
|
|
Постоянный
Регистрация: 08.05.2006
Сообщений: 559
Провел на форуме:
1593567
Репутация:
354
|
|
очень полезно =)
+
|
|
|
|
28.08.2006, 02:47
|
|
Участник форума
Регистрация: 14.03.2005
Сообщений: 267
Провел на форуме:
2827464
Репутация:
545
|
|
Сообщение от Trinux
Как видим, линия проходит и под активным элементом. Я долго марался с этим но понял что кроссбраузерно проблему решить нельзя с помощью border-bottom. Трюк Дэна прост - мы заливаем в бэкграунд списка эту линию и активный элемент смещаем чуть вниз. А точнее мы смещаем вниз все элементы, просто у остальных a элементов появляется нижний бордер. Но это не суть, для начала нам нужен 1 пиксель гифом нужного цвета - цвета линии, чтобы залить бэкграунд. делаем. Конечный код выглядит примерно так:
А зачем вообще нужна эта картинка? У тебя в именно последнем варианте как раз сделано, что для a рамка есть всюду и снизу тоже одного цвета
#tab a{
...
border:1px solid #8B8C91;
...
}
а у active снизу она закрашивается светлым просто..
border-bottom:1px solid #fff;
И так все выглядит хорошо. Убрать то свойство с картинкой
background:url('1px.gif') repeat-x left bottom;
И все равно получается все как задумано.. или я что то не вижу?
|
|
|
|
28.08.2006, 04:46
|
|
Познавший АНТИЧАТ
Регистрация: 26.11.2004
Сообщений: 1,149
Провел на форуме:
941818
Репутация:
569
|
|
И все равно получается все как задумано.. или я что то не вижу?
Да, как вариант, но одно. в случае, если вам нужно нарисовать линию до элементов и после, т.е. как закладки в папке:
(видим что линия начинается не с первого таба, а на 3 пикселя ранее и не заканчивается последним, продалжается), то это достаточно трудно. Нужно еще 2 элемента списка, первый имеет 3 пикселя в длинну, второй - все остальное пространство. Да, моя погрешность, я написал стать относительно своего стиля float позиционирования. А в float я не могу указать 100% =( он его не понимает =( в дивном, абсолютном или табличном позиционировании этот трюк прошел бы, при float не получится - надо заранее знать всю длину. Хотя можно, конечно, поместить список в div без float, ограничить его размером и сделать overflow-x:hidden. Это кстати идея =))) над этим надо будет поработать...
Но все равно проще намного залить пиксель в бэкграунд списка
|
|
|
|
28.08.2006, 10:59
|
|
Умиротворенн
Регистрация: 09.12.2004
Сообщений: 996
Провел на форуме:
2386719
Репутация:
1384
|
|
позновательные статьи.
P.s. в Опере9 табы не работают.
__________________
http://madnet.name - madnet - blog | homepage (Мысли, релизы, скрипты, софт)
http://antichat.ru - Лучший сайт по безопасности
irc.antichat.ru:7771 #antichat - общение online
ГАРАНТ ФОРУМА
|
|
|
|
28.08.2006, 18:09
|
|
Познавший АНТИЧАТ
Регистрация: 26.11.2004
Сообщений: 1,149
Провел на форуме:
941818
Репутация:
569
|
|
2 madnet
=((( можешь скрин скинуть?
 |
|
|
|
29.08.2006, 19:28
|
|
Banned
Регистрация: 03.08.2005
Сообщений: 430
Провел на форуме:
639191
Репутация:
60
|
|
Красиво, все статьи хорошии  |
|
|
|
30.08.2006, 10:52
|
|
Умиротворенн
Регистрация: 09.12.2004
Сообщений: 996
Провел на форуме:
2386719
Репутация:
1384
|
|
Сообщение от Trinux
2 madnet
=((( можешь скрин скинуть?
Они отображаются, но не переключаются.
__________________
http://madnet.name - madnet - blog | homepage (Мысли, релизы, скрипты, софт)
http://antichat.ru - Лучший сайт по безопасности
irc.antichat.ru:7771 #antichat - общение online
ГАРАНТ ФОРУМА
|
|
|
|
|
|
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|
Похожие темы
Линейный вид
