Верстка табов

Justnewone · April 21, 2011

Может кто покажет нагугленое место? Я чего-то никак не могу найти.

Подозреваю, что это непросто, по крайней мере сейчас не знаю как.

задача следующая, табы, сделанные на вложенном списке.

первый уровень - заголовки, сами табы.

второй, собственно представление табов, их содержимое.

пока пришел к единственному решению, но мне не очень нравится, измерять l с помощью JS и назначать для LI отриц. левый маргин.

Иллюстрация

Great Rash · April 22, 2011

Вот мне интересно, а такое не пойдет?

http://chikuyonok.ru/playground/tabs/

mishka · April 22, 2011

GreatRash, спасибо

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.tab-list {
			padding: 20px 0 0;
			overflow: hidden;
			list-style: none;
			margin: 0;
		}
		.tab-btn {
			float: left;
			margin: -19px 0 0;
			border: 1px solid #000;
			background: #f00;
			height: 18px;
		}
		.tab-content {
			display: none;
			float: right;
			width: 100%;
			margin: 0 0 0 -100%;
		}
		.tab-active .tab-content { display: block; }
	</style>
</head>
<body>
	<ul class="tab-list">
		<li class="tab-holder tab-active">
			<span class="tab-btn">tab 1</span>
			<div class="tab-content">
				text
			</div>
		</li>
		<li class="tab-holder">
			<span class="tab-btn">tab 2</span>
			<div class="tab-content">
				text 2
			</div>
		</li>
	</ul>
</body>
</html>

Допилить до кроссбраузерности. Особенно опасаюсь ие7. Из-за отсутствия хаслаяута на лишках - вполне возможны баги в ие7 во время смены табов

Justnewone · April 22, 2011

GreatRash, спасибо
Допилить до кроссбраузерности. Особенно опасаюсь ие7. Из-за отсутствия хаслаяута на лишках - вполне возможны баги в ие7 во время смены табов

Спасибо, господа, это очень круто!

похоже - как раз подойдет.

shtilev · May 7, 2011

Создаём новую тему!

Edited May 7, 2011 by psywalker
Создание темы в чужих постах.

Sign In

Верстка табов

Question

Justnewone

Link to comment

Share on other sites

29 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

shtilev

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information