Алфавитный список "BLOCS"
8 вкладок с алфавитом на английском языке и 9 на русском. У каждой вкладки с контентом свой селектор, например #contentAB2C1 и при желании можно оформить каждую вкладку по-своему.
[html]<div class="AB2C"><!-- CREDIT/КОПИРАЙТ, НЕ УБИРАЙТЕ, ПОЖАЛУЙСТА : CODAGE PAR SKAEMP / CCCRUSH --><a class="cdtAB2C" href="http://crushcrushcrush.actifforum.com/" target="_blank"></a>
<!-- ВКЛАДКИ - А Б В --><input type="radio" name="AB2C" id="OAB2C1" checked ><label for="OAB2C1">А Б В</label>
<!-- Г Д Е --><input type="radio" name="AB2C" id="OAB2C2"><label for="OAB2C2">Г Д Е</label>
<!-- Ж З И --><input type="radio" name="AB2C" id="OAB2C3"><label for="OAB2C3">Ж З И</label>
<!-- К Л М --><input type="radio" name="AB2C" id="OAB2C4"><label for="OAB2C4">К Л М</label>
<!-- О П Р --><input type="radio" name="AB2C" id="OAB2C5"><label for="OAB2C5">О П Р</label>
<!-- С Т У --><input type="radio" name="AB2C" id="OAB2C6"><label for="OAB2C6">С Т У</label>
<!-- Ф Х Ц --><input type="radio" name="AB2C" id="OAB2C7"><label for="OAB2C7">Ф Х Ц</label>
<!-- Ч Ш Щ --><input type="radio" name="AB2C" id="OAB2C8"><label for="OAB2C8">Ч Ш Щ</label>
<!-- Э Ю Я --><input type="radio" name="AB2C" id="OAB2C9"><label for="OAB2C9">Э Ю Я</label>
<!-- КОНТЕНТ А Б В --><div id="contentAB2C1" class="contentAB2C">
<!-- A --><span>А</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Б --><span>Б</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- В --><span>В</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ Г Д Е --><div id="contentAB2C2" class="contentAB2C">
<!-- Г --><span>Г</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Д --><span>Д</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Е --><span>Е</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ Ж З И --><div id="contentAB2C3" class="contentAB2C">
<!-- Ж --><span>Ж</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- З --><span>З</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- И --><span>И</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ К Л М --><div id="contentAB2C4" class="contentAB2C">
<!-- К --><span>К</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Л --><span>Л</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- М --><span>М</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ О П Р --><div id="contentAB2C5" class="contentAB2C">
<!-- О --><span>О</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- П --><span>П</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Р --><span>Р</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ С Т У --><div id="contentAB2C6" class="contentAB2C">
<!-- С --><span>С</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Т --><span>Т</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- У --><span>У</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ Ф Х Ц --><div id="contentAB2C7" class="contentAB2C">
<!-- Ф --><span>Ф</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Х --><span>Х</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Ц --><span>Ц</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ Ч Ш Щ --><div id="contentAB2C8" class="contentAB2C">
<!-- Ч --><span>Ч</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Ш --><span>Ш</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Щ --><span>Щ</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ Э Ю Я --><div id="contentAB2C9" class="contentAB2C">
<!-- Э --><span>Э</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Ю --><span>Ю</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Я --><span>Я</span><b>Фамилия Имя прототипа</b> - Персонаж</div></div>
<style>
*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}
/*ВСЯ ТАБЛИЦА ЦЕЛИКОМ*/
.AB2C {
margin:5px auto; /*ОТСТУПЫ*/
width:460px; /*ШИРИНА*/
text-align:left; /*ТЕКСТ СЛЕВА*/
font-family:Arial; /*ШРИФТ*/
line-height:16px; /*ВЫСОТА ЛИНИЙ*/
}
.AB2C::after {
content:''; display:table; clear:both;
}
/*ВКЛАДКИ*/
.AB2C input[type=radio] {
display:none;
}
.AB2C label {
display:block;
float:left;
clear:left;
margin-right:10px; /*ОТСТУП СЛЕВА*/
margin-bottom:5px; /*ОТСТУП СНИЗУ*/
width:150px; /*ШИРИНА ВКЛАДКИ*/
height:40px; /*ВЫСОТА ВКЛАДКИ*/
padding-top:10px;
overflow:hidden;
text-align:center; /*ТЕКСТ ПО ЦЕНТРУ*/
text-transform:uppercase; /*ВСЕ БУКВЫ ЗАГЛАВНЫЕ*/
font-size:24px; /*РАЗМЕР ШРИФТА*/
line-height:normal; /*ВЫСОТА ЛИНИЙ НОРМАЛЬНАЯ*/
background:#567892; /*ЦВЕТ ФОНА*/
color:white; /*ЦВЕТ ШРИФТВ*/
opacity:0.5; /*ПРОЗРАЧНОСТЬ ЕСТЬ*/
filter:grayscale(1); -webkit-filter:grayscale(1); /*ФИЛЬТР ЕСТЬ*/
}
/*ВКЛАДКА ПРИ НАВЕДЕНИИ*/
.AB2C label:hover {
opacity:1; /*ПРОЗРАЧНОСТИ НЕТ*/
filter:grayscale(0); -webkit-filter:grayscale(0); /*ФИЛЬТР ЕСТЬ*/
}
/*НЕАКТИВНЫЕ ВКЛАДКИ*/
.AB2C [id^="OAB2C"]:checked + label {
opacity:1; /*ПРОЗРАЧНОСТИ НЕТ*/
filter:grayscale(0); -webkit-filter:grayscale(0); /*ФИЛЬТР ЕСТЬ*/
}
#OAB2C1:checked ~ #contentAB2C1,
#OAB2C2:checked ~ #contentAB2C2,
#OAB2C3:checked ~ #contentAB2C3,
#OAB2C4:checked ~ #contentAB2C4,
#OAB2C5:checked ~ #contentAB2C5,
#OAB2C6:checked ~ #contentAB2C6,
#OAB2C7:checked ~ #contentAB2C7,
#OAB2C8:checked ~ #contentAB2C8,
#OAB2C9:checked ~ #contentAB2C9 {
display:block;
}
/*КОНТЕНТ ВКЛАДОК*/
.contentAB2C {
display:none;
width:270px; /*ШИРИНА*/
height:460px; /*ВЫСОТА*/
padding:12px; /*ОТСТУП*/
overflow-y:auto;
border:3px solid #F7F7F7; /*ШИРИНА, ЦВЕТ И ТИП ЛИНИИ*/
text-align:justify; /*ТЕКСТ ПО ШИРИНЕ*/
font-size:11px; /*РАЗМЕР ШРИФТА*/
font-family:Arial; /*ВИД ШРИФТА*/
background:white; /*ЦВЕТ ФОНА*/
color:black; /*ЦВЕТ ТЕКСТА*/
}
/*БУКВЫ ВО ВКЛАДКАХ С ЛИНИЯМИ*/
.contentAB2C span {
display:block;
margin-bottom:5px; /*ОТСТУП СНИЗУ*/
padding-bottom:3px; /*ОТСТУП СНИЗУ*/
border-bottom:2px solid black; /*ЛИНИЯ СНИЗУ*/
text-align:right; /*ТЕКСТ СПРАВА*/
font-weight:bold; /*ТЕКСТ ЖИРНЫЙ*/
color:black; /*ЦВЕТ ШРИФТА*/
}
</style>[/html]
Ксс-код ставим в Свой стиль (но возможно понадобится немного корректировок), в хтмл-верх в тегах <style>:
Или отдельным файлом:
HTML-код надо ставить или в сообщения (с помощью дополнительно - html в сообщениях), или на отдельную страницу.
© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD
