Дизаин-студия "Тайна" |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Дизаин-студия "Тайна" » Записаться на обучение » Точная наука с Watercolor
Одну минуту, что-то эта таблица не очень "хорошо" соображает и жрет контент после переключения вкладок.
Вот я об этом и говорю.
Хорошо, перетащим. Сейчас все доделаю и перетащим.
Готово
Вот, адекватный контейнер.
.container1 {
width: 780px; /размер контейнера/
margin: 0 auto; /отступ от верхнего края/
padding-left: 0px; /смещение влево/
}
ul.tabs {
margin: 0; /отступ от верхнего края/
padding-top: 10px; /положение по верхнему края/
float: left; /выравнивание по левому краю/
height: ВЫСОТАpx;
width: ШИРИНАpx;
position: relative;
color:#ЦВЕТ;
font-family: ШРИФТ;
font-size: РАЗМЕРpx;
text-align: ПОЛОЖЕНИЕ;
text-shadow:#000000 1px 1px; /тени/
}
ul.tabs li {
float: left; /выравнивание по левому краю/
padding-left: 35px; /выравнивает кнопки по центру, увеличив значение ухода в лева/
height: ВЫСОТАpx;
line-height: ВЫСОТАpx; /линии высоты кнопок, равна высоте кнопок/
border: 0px; /границы/
margin-bottom: -2px; /отступ по нижнему краю/
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
overflow: hidden; /значение переключаемых кнопок/
position: relative;
}
ul.tabs li a, ul.tabs li a:hover, html ul.tabs li.active, html ul.tabs li.active a:hover {
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
position: relative;
color:#ЦВЕТ;
font-family: ШРИФТ;
font-size: РАЗМЕРpx;
text-align: ПОЛОЖЕНИЕ;
text-shadow:#000000 1px 1px; /тени/
}
.tab_container1 {
clear: both;
float: left;
width: ШИРИНАpx;
height: ВЫСОТАpx;
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
box-shadow: inset 0px 0px 48px rgba(148,122, 77, 0.8); /задает теневой, полупрозрачный цвет контейнера, 48 прозрачность, rgba значение цвета где каждая буква число/
}
.tab_content { /общие значения отступа/
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 4px;
border: none;
}
Выделенное жирным: положение кнопок. ВНИМАНИЕ! Если поставить по центру, кнопки соберутся в один столбик по центру всей таблицы. Лучше двигать относительно право, влево.
Код позволяющей работать кнопкам переключения, в HTML-низ.
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>Сама таблица.
<center><div style="width: ШИРИНА НА 20px БОЛЬШЕ ШИРИНЫ ТАБЛИЦЫ В СТИЛЕpx; height: auto; OVERFLOW: auto; border: 0px">
<ul class="tabs">
<li class="active"><a href="#tab1">ОСНОВНОЕ</a></li>
<li class=""><a href="#tab2">ИГРА</a></li>
<li class=""><a href="#tab3">БАННЕРЫ</a></li>
</ul><div class="tab_container1">
<div class="tab_content" id="tab1" style="display: block;">
контент первой вкладки
</div><div class="tab_content" id="tab2" style="display: none;">
контент второй вкладки
</div><div class="tab_content" id="tab3" style="display: none;">
контент третьей вкладки
</div></div></div></center>
Чтобы добавить вкладку, мы дублируем выделенные жирным места, меняя циферку на следующую по значению.
Отредактировано Диос (2016-01-28 16:53:14)
Диос
Контейнер что-то не работает.
Watercolor, я немного приболел, ошибки разберёмся завтра ближе к вечеру, а то я ничего не соображаю.
Диос
Хорошо.
Выздоравливай с:
Watercolor, а стиль таблицы кто будет устанавливать? Он же задает все расположение элементов.))
Отредактировано Диос (2016-01-30 15:39:40)
Диос
Так вот в этом и проблема: куда ни поставлю (HTML-верх/низ, объявление) не работает, отображается на тестовике в виде текста. Или нужно в сам стиль форума ставить? Если да, ума не приложу, в какое место.
Watercolor, чтобы мне указать на ошибку, наверное не надо убирать то, что не работает? Я же не могу из чужой головы выудить картину неверного отображения.
Ставиться стиль всегда либо в HTML-Верх либо CS.CSS. В первом случае мы его заносим в кодовые рамки стиля <style></style>, во втором ставим без них.
Диос
Наверное, не надо.
Ну... вот.
Watercolor, а, кто будет заполнять все параметры?)
height: ВЫСОТАpx;
width: ШИРИНАpx;
position: relative;
color:#ЦВЕТ;
font-family: ШРИФТ;
font-size: РАЗМЕРpx;
text-align: ПОЛОЖЕНИЕ;
text-shadow:#000000 1px 1px; /тени/
}
ul.tabs li {
float: left; /выравнивание по левому краю/
padding-left: 35px; /выравнивает кнопки по центру, увеличив значение ухода в лева/
height: ВЫСОТАpx;
line-height: ВЫСОТАpx; /линии высоты кнопок, равна высоте кнопок/
border: 0px; /границы/
margin-bottom: -2px; /отступ по нижнему краю/
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
overflow: hidden; /значение переключаемых кнопок/
position: relative;
}
ul.tabs li a, ul.tabs li a:hover, html ul.tabs li.active, html ul.tabs li.active a:hover {
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
position: relative;
color:#ЦВЕТ;
font-family: ШРИФТ;
font-size: РАЗМЕРpx;
text-align: ПОЛОЖЕНИЕ;
text-shadow:#000000 1px 1px; /тени/
}
.tab_container1 {
clear: both;
float: left;
width: ШИРИНАpx;
height: ВЫСОТАpx;
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
box-shadow: inset 0px 0px 48px rgba(148,122, 77, 0.8); /задает теневой, полупрозрачный цвет контейнера, 48 прозрачность, rgba значение цвета где каждая буква число/
Упустил чет -.-
Диос
<style>.container1 {
width: 780px; /размер контейнера/
margin: 0 auto; /отступ от верхнего края/
padding-left: 0px; /смещение влево/
}
ul.tabs {
margin: 0; /отступ от верхнего края/
padding-top: 10px; /положение по верхнему края/
float: left; /выравнивание по левому краю/
height: 350px;
width: 700px;
position: relative;
color:#006600;
font-family: Trebuchet Ms;
font-size: 16px;
text-align: left;
text-shadow:#000000 1px 1px; /тени/
}
ul.tabs li {
float: left; /выравнивание по левому краю/
padding-left: 35px; /выравнивает кнопки по центру, увеличив значение ухода в лева/
height: 350px;
line-height: 350px; /линии высоты кнопок, равна высоте кнопок/
border: 0px; /границы/
margin-bottom: -2px; /отступ по нижнему краю/
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
overflow: hidden; /значение переключаемых кнопок/
position: relative;
}
ul.tabs li a, ul.tabs li a:hover, html ul.tabs li.active, html ul.tabs li.active a:hover {
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
position: relative;
color:#006600;
font-family: Trebuchet Ms;
font-size: 16px;
text-align: left;
text-shadow:#000000 1px 1px; /тени/
}
.tab_container1 {
clear: both;
float: left;
width: 700px;
height: 350px;
background: transparent; /можно залить цветом, поставить картинку, или оставить прозрачным/
box-shadow: inset 0px 0px 48px rgba(148,122, 77, 0.8); /задает теневой, полупрозрачный цвет контейнера, 48 прозрачность, rgba значение цвета где каждая буква число/
}
.tab_content { /общие значения отступа/
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 4px;
border: none;
}</style>ul.tabs {
margin: 0; /отступ от верхнего края/
padding-top: 10px; /положение по верхнему края/
float: left; /выравнивание по левому краю/
height: 350px;
Высота кнопки 350... Кажется, это через чур много, нет?
width: 700px;
Там же ширина.
Ширина у нас всегда везде одинаковая.
height: 350px;
line-height: 350px; /линии высоты кнопок, равна высоте кнопок/
То же самое, зачем таблице кнопки ТАКОЙ высоты?
Диос
Извиняюсь за столь долгое отсутствие.
Исправлено.
Ничего.
Чтобы разбросать кнопки увеличиваем расстояние вот здесь.
Лучше начинать от 80px или 100px
padding-left: 35px; /выравнивает кнопки по центру, увеличив значение ухода в лева/
Так же незабываем удалять мои пояснения к кодам из самого кода.
/выравнивает кнопки по центру, увеличив значение ухода в лева/
Они его ломают.
Отредактировано Диос (2016-02-08 12:05:03)
Диос
Готово
Watercolor, размер то контейнера увеличиваем, таблица его не растянет. И соответственно заполняем необходимыми для нас ячейками.
1 вкладка три ячейки, центральная див окно
2 вкладка пустая, её мы оформим в самом конце.
3 вкладка два див окна. Большое, в него окно с прокруткой. Для баннеров берем соотношение ширина таблицы, высота таблицы. Прокручиваемое див окно ширина таблицы на 100 меньше высоты таблицы.
И самое любимое. Открываем фотошоп. И начинаем создавать шаблоны-элементы на активистов, баннеры и прочие части, кои будут заполняться с интервалом. Что бы не было пустого не красивого места.
Я обычно пользуюсь простой цветовой рамкой, подходящей сайту и текстом по центру либо с названием величины(для баннеров), либо со знаком вопроса или надписями свободно, активист, флудер(для администрации, топа форума, акции).
| Ищу учителя! | Записаться на обучение | 2016-03-29 |
Вы здесь » Дизаин-студия "Тайна" » Записаться на обучение » Точная наука с Watercolor
