Контейнер с вкладками

Поделиться12011-07-29 23:13:54

Автор: Dr_Alessa
Новичок
Зарегистрирован: 2009-03-04
Приглашений: 0
Сообщений: 9
Уважение: +2
Позитив: +1
Провел на форуме:
13 часов 8 минут
Последний визит:
2011-07-31 10:39:54

Никак не могу выровнять названия вкладок по центру, то бишь опустить немного ниже.
http://newtimewar.rolka.su/
Подскажите, как исправить? Вот коды

Код:

<style>	
#menu {
height: 60px;
background:url("http://img3.imageshack.us/img3/1255/33167704.png");
background-repeat : no-repeat;}
#menu span {
padding: 0px 15px; 
margin-right: 0px;
margin: 0px 0px 15px 0px;
width: 300px;
text-decoration: none;}

}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}

#submenu {
padding: 3px;
height: 200px;
text-align: center;
font-size: 12px;
width: 870px;
}

.submenutext {
display: none; 
height: 40px;
}
</style>

Код:

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

Код:

<center><table style="width: 615px">
 <tbody>
  <tr>
   <td>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Кнопка 1</span>
<span alt="#sm2" style="cursor: pointer;">Кнопка 2</span>
<span alt="#sm3" style="cursor: pointer;">Кнопка 3</span>
<span alt="#sm4" style="cursor: pointer;">Кнопка 4</span>
<span alt="#sm5" style="cursor: pointer;">Кнопка 5</span>
           </b>
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
Контент 1-й кнопки
</div>
     <div id="sm2" class="submenutext"><br /><br />

Контент 2-й кнопки
</div>
     <div id="sm3" class="submenutext"><br /><br />
Контент 3-й кнопки
</div>
     <div id="sm4" class="submenutext"><br /><br />
Контент 4-й кнопки
</div>
     <div id="sm5" class="submenutext"><br /><br />
Контент 5-й кнопки
</div>

</div>
   </td>
</tr>
 </tbody>
</table></center>

Теги: скрипт контейнер текст

0

Поделиться22011-07-30 00:09:43

Автор: Ви
Может и модератор
Зарегистрирован: 2008-12-29
Приглашений: 0
Сообщений: 2220
Уважение: +253
Позитив: +31
Пол: Женский
Возраст: 30 [1994-11-23]
Провел на форуме:
1 месяц 4 дня
Последний визит:
2012-08-16 18:17:18

Dr_Alessa, вы урезали половину кода? р.р

0

Поделиться32011-07-30 03:46:51

Автор: Deff
Помощник ZeroParking
Зарегистрирован: 2010-09-17
Приглашений: 0
Сообщений: 3019
Уважение: +912
Позитив: +117
Провел на форуме:
1 месяц 4 дня
Последний визит:
2014-03-14 16:00:36

Dr_Alessa

Поправьте первый код css

Код:

	<style>	
#menu {
padding-top:20px;
height: 60px;
background:url("http://img3.imageshack.us/img3/1255/33167704.png")center;
background-repeat : no-repeat;}
#menu span {
padding: 7px 15px 7px; 
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 200px;
text-align: center;
font-size: 12px;
width: 870px;
}

.submenutext {
display: none; 
height: 0px;
}
</style>

0

Поделиться42011-07-30 03:48:31

Автор: Deff
Помощник ZeroParking
Зарегистрирован: 2010-09-17
Приглашений: 0
Сообщений: 3019
Уважение: +912
Позитив: +117
Провел на форуме:
1 месяц 4 дня
Последний визит:
2014-03-14 16:00:36

Ви написал(а):

Dr_Alessa, вы урезали половину кода? р.р

Ви Эт моя табличка совместно с rps (*Ксать на этом форе я выкладывал две разновидности подобной таблы ( Самая первая из опусов, с тегами <li>, у Герды тоже моя( ток сss к ней кто-то довоял со скруглениями закладок

Считал её не сильно удачной - больно сложная

Отредактировано Deff (2011-07-30 03:53:35)

0

Поделиться52011-07-30 04:19:23

Автор: Deff
Помощник ZeroParking
Зарегистрирован: 2010-09-17
Приглашений: 0
Сообщений: 3019
Уважение: +912
Позитив: +117
Провел на форуме:
1 месяц 4 дня
Последний визит:
2014-03-14 16:00:36

Dr_Alessa :glasses: Есть с более интересным движением >

Код:

<style>	
#menu span {
padding: 7px 15px 7px; 
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu {
padding-top:20px;
height: 60px;
background:url("http://img3.imageshack.us/img3/1255/33167704.png")center;
background-repeat : no-repeat;}
#menu span {
padding: 7px 15px 7px; 
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 200px;
text-align: left;
font-size: 12px;
width: 720px;
}

.submenutext {
text-align: center;
background:#F9F1DD;
/*position:absolute;*/
width:auto;
margin:0 2px;
max-width: 100%;
display: none; 
height: 260px!important;
}
span.menuButton {
 cursor:pointer;
 cursor:hand; 
}
</style>

<center><table style="width: 615px;">
 <tbody>
  <tr>
   <td align="center">
    <div id="menu"> <b>
<span alt=#sm1 class="menuButton">Кнопка 1</span>
<span alt=#sm2 class="menuButton">Кнопка 2</span>
<span alt=#sm3 class="menuButton">Кнопка 3</span>
<span alt=#sm4 class="menuButton">Кнопка 4</span>
<span alt=#sm5 class="menuButton">Кнопка 5</span>
           </b>
    </div>
   </td>
  </tr>
  <tr align="left">
   <td id="MenuTxT"  valign="top"  style="height: 260px;">
    <div id="submenu" width="100%">
<table width=100%><tr>
     <td id="sm1" class="submenutext">
<div>Контент 1-й кнопки</div>
</td>
     <td id="sm2" class="submenutext">
<div>Контент 2-й кнопки</div>
</td>
     <td id="sm3" class="submenutext">
<div>Контент 3-й кнопки</div>
</td>
     <td id="sm4" class="submenutext">
<div>Контент 4-й кнопки</div>
</div>
     <td id="sm5" class="submenutext">
<div>Контент 5-й кнопки</div>
</td>
</tr></table>
</div>
   </td>
</tr>
 </tbody>
</table></center>
<script type="text/javascript">
$(document).ready(function() {
$("td.submenutext").hide();
$("td.submenutext:first").show();
$(".menuButton").click(function() {
    $(".menuButton").removeClass("tabactive");
    $(this).addClass("tabactive");
    var activeDiv = $(this).attr("alt");

    $("#submenu td.submenutext *").hide(1600)
    $("#submenu td.submenutext").hide(2200)
    $("td."+activeDiv).show(2200)
    $("td."+activeDiv+" *").show(600)
    return false; });
});
</script>

Ваша линейка под кнопки уже стоит

(Образец > http://hostjs-mybb2011.narod.ru/table_float.htm

Отредактировано Deff (2011-07-30 04:21:07)

+1

Поделиться62011-07-30 11:29:16

Автор: Ви
Может и модератор
Зарегистрирован: 2008-12-29
Приглашений: 0
Сообщений: 2220
Уважение: +253
Позитив: +31
Пол: Женский
Возраст: 30 [1994-11-23]
Провел на форуме:
1 месяц 4 дня
Последний визит:
2012-08-16 18:17:18

Deff написал(а):

Самая первая из опусов, с тегами <li>, у Герды тоже моя( ток сss к ней кто-то довоял со скруглениями закладок

Вот я ей пользуюсь, потому и удивилась отсутствию половины текста)

0

Поделиться72011-07-30 13:42:52

Автор: Dr_Alessa
Новичок
Зарегистрирован: 2009-03-04
Приглашений: 0
Сообщений: 9
Уважение: +2
Позитив: +1
Провел на форуме:
13 часов 8 минут
Последний визит:
2011-07-31 10:39:54

Deff
Во, спасибо)) скопировала только верхнюю часть, так как это плавное движение не нужно х)

0

Окошко-контейнер.	Вопросы по скриптам	2012-05-09
Контейнер для вкладок(улучшение)	Заказ скриптов	2011-04-02
Заказ таблиц №8	Архив тем	2012-02-07
Заказ таблиц №9	Оформление форумов	2014-06-21
Прошу помочь с дизайном и шапкой!	Архив тем	2011-06-07

Форум поддержки пользователей ZeroParking

Меню навигации

Пользовательские ссылки

Информация о пользователе

Контейнер с вкладками

Сообщений 1 страница 7 из 7

Поделиться12011-07-29 23:13:54

Поделиться22011-07-30 00:09:43

Поделиться32011-07-30 03:46:51

Поделиться42011-07-30 03:48:31

Поделиться52011-07-30 04:19:23

Поделиться62011-07-30 11:29:16

Поделиться72011-07-30 13:42:52

Похожие темы