Помогите допилить TabControl с помощью Css3

YankovskyAndrey · April 29, 2011

Всем привет!

воодушевлённый этой статьёй, решил сделать свой таб контрол(ваш браузер должен поддерживать всякие модные штуки, эксплорер не покатит)

мне нужно дважды обратиться к псевдо селектору :target.

Сначала для того, чтобы применить стиль для выбранной вкладки:


.tabItemHeader
{
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  vertical-align: bottom;
  display: inline-block;
  margin: 5px 0px 0px 0px;
  border-width: 5px;
  padding: 4px;
  border-style: solid;
  border-radius:10px 10px 0 0;
  border-color: #666666;
  background: #666666; 	
}
.tabItemHeader:target
{
  border-bottom-width: 0px;
  border-color: #DDDDDD;
  background: #DDDDDD;	
}

второй раз, чтобы отобразить соответствующий вкладке текст:


.tabItemContent
{
  display: none;	
}
.tabItemContent:target
{
  display: block;	
}

собственно проблема. :target сопоставляется id элемента, который не может быть определён дважды.

нагляднее из разметки(повторяются id item1, item2, item3, item4)


<div id="tabControl">
    <div id="tabControlHeadersRow">
        <div class="tabItemHeader" id="item1">
            <a href="#item1">Item1</a>
        </div>
        <div class="tabItemHeader" id="item2">
            <a href="#item2">Item2</a>
        </div>
        <div class="tabItemHeader" id="item3">
            <a href="#item3">Item3</a>
        </div>	
        <div class="tabItemHeader" id="item4">
            <a href="#item4">Item4</a>
        </div>
    </div>
    <div id="tabControlContent">
        <div class="tabItemContent" id="item1">
            111111111111
            111111111111
            111111111111
            111111111111
        </div>
        <div class="tabItemContent" id="item2">
            222222222222
            222222222222
            222222222222
            222222222222
        </div>
        <div class="tabItemContent" id="item3">
            333333333333
            333333333333
            333333333333
            333333333333
        </div>
        <div class="tabItemContent" id="item4">
            444444444444
            444444444444
            444444444444
            444444444444
        </div>
    </div>
</div>

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

Спасибо

Edited April 29, 2011 by YankovskyAndrey

psywalker · April 29, 2011

Ну так в чём проблема? Вроде ты же уже всё сделал, что нужно?

YankovskyAndrey · April 29, 2011

Ну так в чём проблема? Вроде ты же уже всё сделал, что нужно?

мне надо чтобы и вкладки анимировались(они там смещаются вниз при выборе и меняют цвет), и при этом показывался соответствующий текст.

у меня либо одно, либо другое.

залил две картинки - как у меня это выглядит в хроме(мало ли у вас работает, а у меня нет)

выбрана вторая вкладка, курсор наведён на четвёртую:

анимируется вкладка, но текст не отображается

наоборот

Serlutin · April 29, 2011

Ух ты. Это же реально круто. Вкладки на css.

:target сопоставляется id элемента, который не может быть определён дважды.

Можно попробовать пойти немного другим путём. Нужно сделать разметку, в которой сам таб будет находится рядом с блоком. А потом показывать его через .tabItemContent: target > .blockname

Правда что-то я не очень уверен, что получится создать такую удобную для CSS разметку.

YankovskyAndrey · April 29, 2011

Ух ты. Это же реально круто. Вкладки на css.

вот вот)

:target сопоставляется id элемента, который не может быть определён дважды.
Можно попробовать пойти немного другим путём. Нужно сделать разметку, в которой сам таб будет находится рядом с блоком. А потом показывать его через .tabItemContent: target > .blockname
Правда что-то я не очень уверен, что получится создать такую удобную для CSS разметку.

я так и делал сначала. схематично:


<div class="tabControl">
  <div class="tabItem" id="item1">
    <div class="tabItemHeader">
    </div>
    <div class="tabItemContent">
    </div>
  </div>
  <div class="tabItem" id="item2">
    <div class="tabItemHeader">
    </div>
    <div class="tabItemContent">
    </div>
  </div>
  <div class="tabItem" id="item3">
    <div class="tabItemHeader">
    </div>
    <div class="tabItemContent">
    </div>
  </div>
</div>

но у меня не получилось правильно позиционировать вкладки. как бы заголовки идут в строчку, то есть как я понимаю именно у tabItem в таком случае должно быть проставлено display: inline. Но тогда вместо такого:

|^|_|^|____

|..........|

|__________|

получается

|^|_|^|

|.| |.|

|.|_|.|

|_|_|_|

ну я думаю вы поняли)

я пару дней всего в Html, не понимаю наверное чего-то.

вообще есть ещё всякие хитрые штуки типа ~ и +

смахивает на регэкспы)))

я попробовал, но как-то безуспешно.

хорошая статья

вообще надо разобраться как работают псевдо классы :hover :target и т.д.

Edited April 29, 2011 by YankovskyAndrey

psywalker · April 29, 2011

Всё верно, на :target ты лишь ссылаешься на контейнер, а для анимации уже нужно юзать ховер. Лови код и смотри в Хроме.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul { list-style: none; overflow: hidden;}
	li { 
		border: 1px solid #000;
		border-width: 1px 1px 0;
		-moz-border-radius: 5px;
		border-radius: 5px; 
		float: left;
		margin-bottom: -3px;
		-webkit-transition: all 0.3s ease-in;
		height: 40px;

	}
	li:hover { height: 30px; margin-top: 10px;}
	li a { padding: 10px 10px; color: red; text-decoration: none; display: block;}
.faq { display: none;}
.faq:target {
    color: red;
    padding: .5em;
	display: block;
}
</style>
</head>

<body>
<ul>
					<li><a href="#faq1">Question 1</a></li>
					<li><a href="#faq2">Question 2</a></li>

				</ul>
<section id="faq1" class="faq">
					<h1>FAQ 1</h1>
					<p>Augue eu eros pid cum in. Placerat lundium mid pulvinar a integer? Enim phasellus pid, ut! Ultric</p>
				</section>
<section id="faq2" class="faq">
					<h1>FAQ 2</h1>
					<p>Augue eu eros pid cum in. Placerat lundium mid pulvinar a integer? Enim phasellus pid, ut! Ultrices ut cras cras diam rhoncus magna integer et nec? Cras scelerisque magna velit sit amet sit!</p>
				</section>
</body>
</html>

YankovskyAndrey · April 29, 2011

Всё верно, на :target ты лишь ссылаешься на контейнер, а для анимации уже нужно юзать ховер. Лови код и смотри в Хроме.

я с этого примера и вдохновился.

НО

я хочу чтобы вкладка оставалась нажатой, выбранной. для этого мне ховера не достаточно, мне нужен :target.

в этом и проблема.

то есть я хочу в этом примере например

<li id="faq1"><a href="#faq1">Question 1</a></li>

li:target

{

сдвинуть и изменить цвет

}

ловится первый id который появляется в документе

Edited April 29, 2011 by YankovskyAndrey

psywalker · April 29, 2011

Лови

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul { list-style: none; overflow: hidden;}
	li {float: left;}
	li span { 
		border: 1px solid #000;
		display: block;
		border-width: 1px 1px 0;
		-moz-border-radius: 5px;
		border-radius: 5px; 

		margin-bottom: -3px;
		-webkit-transition: all 0.3s ease-in;
		height: 40px;

	}

	li a { padding: 10px 10px; color: red; text-decoration: none; display: block;}

.faq:target {
    color: red;
   height: 30px; margin-top: 10px;
}
</style>
</head>

<body>
<ul>
					<li><a href="#faq1"><span class="faq" id="faq1">Question 1</span></a></li>
					<li><a href="#faq2"><span class="faq" id="faq2">Question 2</span></a></li>
					<li><a href="#faq3"><span class="faq" id="faq3">Question 3</span></a></li>
					<li><a href="#faq4"><span class="faq" id="faq4">Question 4</span></a></li>
				</ul>

</body>
</html>

YankovskyAndrey · April 29, 2011

Лови

а текст?

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

я пытаюсь заставить их работать вместе.

Edited April 29, 2011 by YankovskyAndrey

psywalker · April 29, 2011

Лови
а текст?

А вот с текстом я пока не придумал, что делать.

Возможно даже, что так нельзя вовсе

Хотя не, гоню. Есть идея, сегодня - завтра попробую осуществить, покажу.

YankovskyAndrey · April 29, 2011

А вот с текстом я пока не придумал, что делать.
Возможно даже, что так нельзя вовсе

Хотя не, гоню. Есть идея, сегодня - завтра попробую осуществить, покажу.

кул. я просто не шарю в html. посмотри пожалуйста пятый пост(дерево из div), можно ли сделать так?

Edited April 29, 2011 by YankovskyAndrey

YankovskyAndrey · April 29, 2011

нашёл работающий пример

разбираюсь.

для хрома не пашет, под оперой красота. попробуйте

собственно неудивительно devOpera домен))

Edited April 29, 2011 by YankovskyAndrey

psywalker · April 29, 2011

нашёл работающий пример
разбираюсь.
для хрома не пашет, под оперой красота. попробуйте
собственно неудивительно devOpera домен))

Дружище слушай, у меня с английским не очень, поэтому просьба к тебе есть. Если всё таки разберёшься, выложи плиз рабочий примерчик, очень буду ждать

YankovskyAndrey · April 29, 2011

Дружище слушай, у меня с английским не очень, поэтому просьба к тебе есть. Если всё таки разберёшься, выложи плиз рабочий примерчик, очень буду ждать

нет проблем

с их сайта пример, работает только под оперой

я пока читаю

Edited April 29, 2011 by YankovskyAndrey

klierik · April 30, 2011

:target - не работает кроссбраузерно. какой смысл и подавно такое реализовывать елси все равно прийдется дублировать логику на JS?

уж лучше бы на кройяк :active использовать.. от сюда вытащить табы, по идее, более реальнее (сейчас не скажу нов ближайшем будущем очень даже возможно что попробую)

YankovskyAndrey · April 30, 2011

:target - не работает кроссбраузерно. какой смысл и подавно такое реализовывать елси все равно прийдется дублировать логику на JS?
уж лучше бы на кройяк :active использовать.. от сюда вытащить табы, по идее, более реальнее (сейчас не скажу нов ближайшем будущем очень даже возможно что попробую)

я вообще сильверлайтер. просто интересно)

mishka · April 30, 2011

Так вот оно будет, да только это не юзабельно.

Нельзя нормально применить на страничку несколько груп табов, так как поидее в каждой группе должен быть открыт хоть один таб, но тут так сделать нельзя, да и табы в табах не сделать.

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

Мое мнение - это нужно делать блоками, не списком.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Tabs</title>
	<style type="text/css">
		.tab-list {
			padding: 35px 0 0;
			overflow: hidden;
			list-style: none;
			margin: 0;
		}
		.tab-btn {
			-webkit-transition: all 0.3s ease-in;
			transition: all 0.3s ease-in;
			-o-transition: all 0.3s ease-in;
			-moz-transition: all 0.3s ease-in;
			border-radius: 10px 10px 0 0;
			-moz-border-radius: 10px 10px 0 0;
			-webkit-border-radius: 10px 10px 0 0;
			-o-border-radius: 10px 10px 0 0;
			float: left;
			margin: -34px 10px 0 0;
			height: 24px;
			padding: 5px;
			border: 1px solid #000;
			border-width: 1px 1px 0;
			cursor: pointer;
		}
		.tab-holder:target .tab-btn {
			background: #fff;
			position: relative;
		}
		.tab-content {
			display: none;
			float: right;
			width: 100%;
			margin: 0 0 0 -100%;
		}
		.tab-frame {
			border: 1px solid #000;
			border-radius: 0 0 10px 10px;
			-moz-border-radius: 0 0 10px 10px;
			-webkit-border-radius: 0 0 10px 10px;
			-o-border-radius: 0 0 10px 10px;
			padding: 10px 5px;
		}
		.tab-holder:target .tab-content { display: block; }
	</style>
</head>
<body>
	<ul class="tab-list">
		<li class="tab-holder" id="tab1">
			<a class="tab-btn" href="#tab1">tab 1</a>
			<div class="tab-content">
				<div class="tab-frame">
					text 1
				</div>
			</div>
		</li>
		<li class="tab-holder" id="tab2">
			<a class="tab-btn" href="#tab2">tab 2</a>
			<div class="tab-content">
				<div class="tab-frame">
					text 2
				</div>
			</div>
		</li>
	</ul>
</body>
</html>

psywalker · April 30, 2011

Вооо, отличный вариант, только я бы ещё добавил так:

                              
:target .tab-btn {
height: 15px;
margin: -25px 10px 0 0;
}

mishka · April 30, 2011

Ну анимации какие вам нравятся добавляйте сами.

Я бы делал все вкладки меньше, а активную - больше.

Еще один минус данного подхода - если табы будут расположенны внизу странички, так что до них нужно будет скролить, то при каждом переключении, страничка будет прыгать вверх и каждый раз нужно будет скролить вниз к табам.

psywalker · April 30, 2011

Ну анимации какие вам нравятся добавляйте сами.
Я бы делал все вкладки меньше, а активную - больше.
Еще один минус данного подхода - если табы будут расположенны внизу странички, так что до них нужно будет скролить, то при каждом переключении, страничка будет прыгать вверх и каждый раз нужно будет скролить вниз к табам.

Да, тоже аргумент, согласен.

Можно конечно же сделать кросс решение на ЖС, но тогда это накладно выйдет, если анимацию включать в меню.

mishka · April 30, 2011

Вот еще подобный пример с табами.

Раньше это неработало в опере в 9й, как в более ранних - незнаю.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Tabs</title>
	<style type="text/css">
		.t-holder {
			border: 1px solid #000;
			width: 500px;
			height: 200px;
			overflow: hidden;
		}
		.t-content {
			width: 500px;
			height: 200px;
			overflow: auto;
		}
	</style>
</head>
<body>
	<div class="t-pane">
		<a href="#tab1">tab1</a>
		<a href="#tab2">tab2</a>
		<a href="#tab3">tab3</a>
	</div>
	<div class="t-holder">
		<div id="tab1" class="t-content">
			tab1
			<p>Lorem ipsum dolor sit amet, tunc Stet consequat eiusdem ordo quos ducem! Volvitur ingreditur id quibus coronas talem metaphysicorum Apollonius, tharsiae in fuerat est Apollonius mihi servitute meam. Autem Apolloni ex civibus laude clamaverunt donavit beneficio usque vero diam nostra paupercula possunt autem nobiscum paulo. Virginis piratae suppetit sibi dicit pietate dudum sbyssi conturbatum. Adora nuntiaveris non ait est cum unde meae. Viam se est cum unde meae ceroma fronte comico hac civitati etenim quid, discumbere quam aniculae morsque nutricem valeas filia navem. Cyrenaeam plus quem es sed quod eam ad nomine Piscatore mihi! Apollonius eius sed quod eam sed dominum vidit loco. Quodsi animae tuae lacrimis ceram mandavit lugentem deus nec 'pectore zaetam at omnia filia dedit ad nomine. Intrarem se in rei finibus veteres hoc. Rei exultant deo apprehendit Apollonius non ait in rei civibus nescis haec in fuerat se est cum. Haec sed esse haec in lucem concitaverunt in rei exultant deo adiuves finem imponunt.</p>
		</div>
		<div id="tab2" class="t-content">
			tab2
			<p>Lorem ipsum dolor sit amet, tunc Stet consequat eiusdem ordo quos ducem! Volvitur ingreditur id quibus coronas talem metaphysicorum Apollonius, tharsiae in fuerat est Apollonius mihi servitute meam. Autem Apolloni ex civibus laude clamaverunt donavit beneficio usque vero diam nostra paupercula possunt autem nobiscum paulo. Virginis piratae suppetit sibi dicit pietate dudum sbyssi conturbatum. Adora nuntiaveris non ait est cum unde meae. Viam se est cum unde meae ceroma fronte comico hac civitati etenim quid, discumbere quam aniculae morsque nutricem valeas filia navem. Cyrenaeam plus quem es sed quod eam ad nomine Piscatore mihi! Apollonius eius sed quod eam sed dominum vidit loco. Quodsi animae tuae lacrimis ceram mandavit lugentem deus nec 'pectore zaetam at omnia filia dedit ad nomine. Intrarem se in rei finibus veteres hoc. Rei exultant deo apprehendit Apollonius non ait in rei civibus nescis haec in fuerat se est cum. Haec sed esse haec in lucem concitaverunt in rei exultant deo adiuves finem imponunt.</p>
		</div>
		<div id="tab3" class="t-content">
			tab3
			<p>Lorem ipsum dolor sit amet, tunc Stet consequat eiusdem ordo quos ducem! Volvitur ingreditur id quibus coronas talem metaphysicorum Apollonius, tharsiae in fuerat est Apollonius mihi servitute meam. Autem Apolloni ex civibus laude clamaverunt donavit beneficio usque vero diam nostra paupercula possunt autem nobiscum paulo. Virginis piratae suppetit sibi dicit pietate dudum sbyssi conturbatum. Adora nuntiaveris non ait est cum unde meae. Viam se est cum unde meae ceroma fronte comico hac civitati etenim quid, discumbere quam aniculae morsque nutricem valeas filia navem. Cyrenaeam plus quem es sed quod eam ad nomine Piscatore mihi! Apollonius eius sed quod eam sed dominum vidit loco. Quodsi animae tuae lacrimis ceram mandavit lugentem deus nec 'pectore zaetam at omnia filia dedit ad nomine. Intrarem se in rei finibus veteres hoc. Rei exultant deo apprehendit Apollonius non ait in rei civibus nescis haec in fuerat se est cum. Haec sed esse haec in lucem concitaverunt in rei exultant deo adiuves finem imponunt.</p>
		</div>
	</div>
</body>
</html>

YankovskyAndrey · April 30, 2011

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

Круто! сейчас свою версию допилю! я по тому же пути шёл, но не знал о float: left и position: relative. при правильных анимациях не удавалось отобразить всё адекватно.

по-моему интересно получилось. о применимости промолчим, да и не в этом же дело)

YankovskyAndrey · May 1, 2011

не могли бы вы прояснить, как в вашем первом примере работает сдвиг

паддинг маргин флоат

я так понимаю все элементы с float:left позиционируются только относительно друг друга

то же самое с float:right

при этом им обоим наплевать на друг друга.

то есть в вашем примере они как бы накладываются друг на друга, но вы сдвигаете того который right вниз на фиксированное число пикселей.

я конечно не мастер, но после float'ов разметка на измене.

любой отступ грозит обернуться геммороем

я не понимаю этого

.tab-btn {

float: left;

margin: -34px 10px 0 0;

height: 24px;

padding: 5px;

}

как позиционирование по горизонтали связано с высотой.

если поменять табы накрывают друг друга

залил последнюю версию(добавил ещё дефолтное значение. написано всё правильно, но в хроме ,например, не всегда работает).

всё равно там есть заступ, который мне не убрать.

всё как-то на честном слове держится

Edited May 1, 2011 by YankovskyAndrey

psywalker · May 1, 2011

YankovskyAndrey

не могли бы вы прояснить, как в вашем первом примере работает сдвиг
паддинг маргин флоат
я так понимаю все элементы с float:left позиционируются только относительно друг друга
то же самое с float:right
при этом им обоим наплевать на друг друга.
то есть в вашем примере они как бы накладываются друг на друга, но вы сдвигаете того который right вниз на фиксированное число пикселей.

Все элементы с float:left отодвигаются наверх в заранее заготовленный отступ у главного контейнера - UL. float:left выпадает из потока, делая свои контейнеры LI - схлопнувшимися, т.е. их высота схлопывается в ноль, так как они перестают чувствовать свои ссылки. float:left идут друг за другом, прижимаясь, как и должно быть, а float: right просто прижат к правому краю и спецово растянут на 100%, чтобы заполнить собой всё место, весь контент.

я конечно не мастер, но после float'ов разметка на измене.
любой отступ грозит обернуться геммороем

Да, поэтому отступы нужно чётко рассчитывать. 1px больше и кранты

я не понимаю этого
.tab-btn {
float: left;
margin: -34px 10px 0 0;
height: 24px;
padding: 5px;
}
как позиционирование по горизонтали связано с высотой.
если поменять табы накрывают друг друга

Табы идут друг за другом. Что именно тут непонятно?

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

Можно сделать идеальный вариант, НО в хроме беда с :target + ~, т.е. эти вещи там плохо отрабатывают вместе. Это недочёт Хрома, который надеюсь исправят в будущем.

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

Но это не выход.

YankovskyAndrey · May 1, 2011

спасибо, начинает проясняться с float'ами.

хотя

Да, поэтому отступы нужно чётко рассчитывать. 1px больше и кранты

а хорошо ли это? я так понял, что это побочные эффекты блочной разметки. мне вообще сильно неприятны абсолютные значения.

и вот с этим:

я не понимаю этого
.tab-btn {
float: left;
margin: -34px 10px 0 0;
height: 24px;
padding: 5px;
}
как позиционирование по горизонтали связано с высотой.
если поменять табы накрывают друг друга

уточняю: элементы стыкуются по левому краю, там где заканчивается один элемент, начинается другой. и говоря это, я имею ввиду ширину.

так почему появляется зависимость от высоты элемента?

в хроме беда с :target + ~, т.е. эти вещи там плохо отрабатывают вместе

зато в опере нормал)

попробуйте выбрать первую вкладкую тогда две другие залезут на пиксель. можно ли это вылечить? смещение на пиксель вверх приводит к катастрофе, о которой мы уже говорили. но ведь есть же хак? должен быть)

Edited May 1, 2011 by YankovskyAndrey

psywalker · May 1, 2011

а хорошо ли это? я так понял, что это побочные эффекты блочной разметки. мне вообще сильно неприятны абсолютные значения.
уточняю: элементы стыкуются по левому краю, там где заканчивается один элемент, начинается другой. и говоря это, я имею ввиду ширину.
|element1 float:left| <- |element2 float:left| <- |element3 float:left|
так почему появляется зависимость от высоты элемента?

Нет, это не очень хорошо, но тут специфическая задача.

Когда px становится чуть меньше, float-блок наровит зелезть как можно дальше, т.е. если видит, что место где то свободное, куда он может поместиться, то он это делает.

попробуйте выбрать первую вкладкую тогда две другие залезут на пиксель. можно ли это вылечить? смещение на пиксель вверх приводит к катастрофе, о которой мы уже говорили. но ведь есть же хак? должен быть)

Можно, нужно добавить некоторые правила сюда:

.tabItemHeader, *:target ~ #item3 .tabItemHeader {
position: relative;
   top: -1px;

Sign In

Помогите допилить TabControl с помощью Css3

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information