Watercolor, отлично.
Затухающий контейнер с вкладками
Первый этап, установка стиля контейнера, это можно сделать как в HTML-верх, занеся коды в значения стиля(<style></style>), либо задать напрямую через цвета форума, поставив в CSS цвета.
.clear {
clear: both;
}
#page-wrap {
width: 760px;/ширина нашей таблицы/
background: white;/цвет заднего фона/
margin: 20px auto;
padding: 20px;
}
.button {
float: left;
margin: 10px;
}
#home {
display: block;/положение кнопок в блоке/
padding: 30px;
}
#home-button {
opacity: 1.0;
border-bottom: 1px solid black;
}
#about {
display: none;
padding: 30px;
}
#about-button {
opacity: 0.5;
border-bottom: 1px solid black;
}
#contact {
display: none;
padding: 30px;
}
#contact-button {
opacity: 0.5;
border-bottom: 1px solid black;
}
Наименование кнопок-ячеек, мы можем менять их на свои названия.
В данном случае прописан фрагмент подчеркивания кнопки снизу, его можно убрать, можно оставить, можно задать свои значения.
Чтобы задать фон таблицы мы заменяем цвет на изображение.
background: url("ссылка на картинку") no-repeat top center;
Если мы хотим чтобы фона не было, прописываем значение пустоты transparent.
Скрипт приводящий в рабочее состояние наш контейнер.
Устанавливается в HTML-низ.
Сама таблица, пустая.
<div id="page-wrap">
<div id="home-button" class="button">
<img src="ссылка на картинку кнопки" alt="home" class="button" />
</div>
<div id="about-button" class="button">
<img src="ссылка на картинку кнопки" alt="about" class="button">
</div>
<div id="contact-button" class="button">
<img src="ссылка на картинку кнопки" alt="contact" class="button">
</div>
<div class="clear"></div>
<div id="content">
<div id="home">
<p>Содержание для пункта home</p>
</div>
<div id="about">
<p>Содержание для пункта about</p>
</div>
<div id="contact">
<p>Это содержание для пункта contact</p>
</div>
</div>
</div>
наименование кнопок-контейнеров - если мы меняли их название в коде стиля, не забываем сменить их и тут.
Начнем с простого, изготовим кнопки, установим на форум, затем приступим к заполнению наших контейнеров таблицами.
