Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц


FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц

Сообщений 961 страница 980 из 1000

961

Aved2
Если еще актуально

Код:
<!--Контент слайдера-->
<ul class="tabs">
    <li class="active"><a href="#tab1">Вкладка 1</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
    <li><a href="#tab4">Вкладка 4</a></li>
</ul>

<div class="tab_container">
    <div class="tab_content" id="tab1" style="display: block;">
        <table cellspacing="10" width="100%">
            <tbody>
                <tr>
                    <td width="50%" rowspan="2">Приветствие</td>
                    <td width="50%">Администраторы</td>
                </tr>
                <tr>
                    <td width="50%">Модераторы</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="tab_content" id="tab2" style="display: none;">
        Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.
    </div>
    <div class="tab_content" id="tab3" style="display: none;">
        Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.
    </div>
    <div class="tab_content" id="tab4" style="display: none;">
        Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.
    </div>
</div>
<!--/Контент слайдера-->
<!--Стили слайдера-->
<style type="text/css">
ul.tabs {
     float: left;
     list-style: none outside none;
     margin-left: -2px;
     padding: 0px;
     width: 100%;
}

ul.tabs li {
     float: left;
     overflow: hidden;
     padding: 0px;
     position: relative;
     width: 200px;
     text-align: center;
}

ul.tabs li.active {
     color: #000000;
}

ul.tabs li a {
     outline: medium none;
     padding: 0px 10px;
}

ul.tabs li a:hover, ul.tabs li a:focus, ul.tabs li a:active {
     color: #000000;
}

.tab_container {
    overflow: hidden;
    clear: both;
    width: 800px;
}

.tab_content {
     padding: 5px;
}
</style>
<!--/Стили слайдера-->
<!--Do magic :)-->
<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>

0

962

sadhaka
Извините, но больше не актуально.

Отредактировано Aved2 (23.06.2013 23:50:16)

0

963

1. Ссылка: http://savanna-legends.ru
2. Ширина: 800 рх
3. Рисунок. Добротный:

http://s5.uploads.ru/9DcnN.jpg

код на уже имеющуюся таблицу
Код:
<style>    
#menu {
margin-top: -2px;
height: 47px;
width:100%;
background-repeat : no-repeat;
}
#menu span {
border:1px solid # 8f7468
text-align:left;
font: normal 100% Trebuchet Mst;
display:inline-block;
color:# 1c1c1d;
margin: 9px 10px;
padding: 10px;
}
#submenu,#menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: url(http://s1.uploads.ru/6us5v.png);
}
#menu .tabactive {
color: #8f7468;
    background:0;
}
#submenu {
padding: 0px;
height: 300px;
border:1px solid #8f7468;
text-align: center;
font: normal 100% Trebuchet Ms;
font-size: 14px;
width: 640px;
}
.submenutext {
display: none; 
height: 40px;
}
</style>
<center><table style="width: 640px">
<tbody>
  <tr>
   <td valign=top valign=center>
 <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;"><font color=#660000><b>Контейнер 1</b></font></span>
<span alt="#sm2" style="cursor: pointer;"><font color=#660000><b>Контейнер 2</b></font></span>
<span alt="#sm3" style="cursor: pointer;"><font color=#660000><b>Контейнер 3</b></font></span>
<span alt="#sm4" style="cursor: pointer;"><font color=#660000><b>Контейнер 4</b></font></span>
<span alt="#sm5" style="cursor: pointer;"><font color=#660000><b>Контейнер 5</b></font></span>

    </div>
   </td>
</tr>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     
<div id="sm1" class="submenutext" 
style="display:block;padding:10px;height:280px;overflow-y: non;">  
<p>
<table>
<tr>
<td rowspan="2">

<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 370px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div></td>
</tr>
<tr>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>
     

<div id="sm2" class="submenutext">
<table>
<tr>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>

<div id="sm3" class="submenutext"><center>
<div style="text-align:right; padding-right: 15px;"><font color=#660000><b>надпись  
</b></font></div><br/><div style="text-align: center; width: 600px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>

</center></div>

<div id="sm4" class="submenutext"><center>
<table>
<tr>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 68px; overflow-y: scroll; ">текст</div></div>
</td>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 67px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
<tr>
<td colspan="2"><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 590px ; height: 120px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 115px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</p></center></div>
    
 <div id="sm5" class="submenutext"><center>
<table>
<tr>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
</tr>
<tr>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 78px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</center></div>




</div> </td></tr></tbody></table> 
<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>

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

0

964

Kisasian
наверное так

Код:
<style>
.menu {
margin-top: -2px;
height: 47px;
width:100%;
background-repeat : no-repeat;
}
.menu span {
border:1px solid #8f7468;
text-align: left;
font: normal 100% Trebuchet Mst;
display:inline-block;
color: #1c1c1d;
margin: 9px 35px;
padding: 10px;
}
#submenu,.menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: url(http://s1.uploads.ru/6us5v.png);
}
.menu .tabactive {
color: #8f7468;
    background:0;
}
#submenu {
padding: 0px;
height: 300px;
border:1px solid #8f7468;
text-align: center;
font: normal 100% Trebuchet Ms;
font-size: 14px;
width: 640px;
}
.submenutext {
display: none;
height: 40px;
}
</style>

<table style="width: 640px">
<tbody>
  <tr>
   <td valign="top">
 <div class="menu">
<span style="cursor: pointer;" alt="#sm1"><font color="#660000"><b>Контейнер 1</b></font></span>
<span style="cursor: pointer;" alt="#sm2" class=""><font color="#660000"><b>Контейнер 2</b></font></span>
<span style="cursor: pointer;" alt="#sm3" class=""><font color="#660000"><b>Контейнер 3</b></font></span>
<span style="cursor: pointer;" alt="#sm4" class=""><font color="#660000"><b>Контейнер 4</b></font></span>

    </div>
   </td>
</tr>
<tr>
   <td valign="top" align="center" id="MenuTxT">
    <div align="center" id="submenu">

<div style="display: none; padding: 10px; height: 280px;" class="submenutext" id="sm1">
<table>
<tbody><tr>
<td rowspan="2">

<div style="text-align:right;"><font color="#660000"><b>надпись</b></font></div><br><div style="text-align: center; width: 370px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align:right;"><font color="#660000"><b>надпись</b></font></div><br><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div></td>
</tr>
<tr>
<td><div style="text-align:right;"><font color="#660000"><b>надпись</b></font></div><br><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</tbody></table>

</div>


<div class="submenutext" id="sm2" style="display: none;">
<table>
<tbody><tr>
<td>
<div style="text-align:right;"><font color="#660000"><b>надпись</b></font></div><br><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td>
<div style="text-align:right;"><font color="#660000"><b>надпись</b></font></div><br><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</tbody></table>

</div>

<div class="submenutext" id="sm3" style="display: none;"><center>
<div style="text-align:right; padding-right: 15px;"><font color="#660000"><b>надпись
</b></font></div><br><div style="text-align: center; width: 600px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>

</center></div>

<div class="submenutext" id="sm4" style="display: none;"><center>
<table>
<tbody><tr>
<td><center>
<font color="#660000"><b>надпись</b></font></center><br><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 68px; overflow-y: scroll; ">текст</div></div>
</td>
<td><center>
<font color="#660000"><b>надпись</b></font></center><br><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 67px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
<tr>
<td colspan="2"><center>
<font color="#660000"><b>надпись</b></font></center><br><div style="text-align: center; width: 590px ; height: 120px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 115px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</tbody></table>

<p></p></center></div>

<div class="submenutext" id="sm5" style="display: block;"><center>
<table>
<tbody><tr>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка"></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка"></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка"></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка"></div>
</td>
</tr>
<tr>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 78px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</tbody></table>

</center></div>

<div class="submenutext" id="sm6" style="display: none;">Контейнер 6</div>
<div class="submenutext" id="sm7" style="display: none;">Контейнер 6</div>
<div class="submenutext" id="sm8" style="display: none;">Контейнер 6</div>


</div>
     </td></tr><tr>
   <td valign="top">
 <div class="menu">
<span style="cursor: pointer;" alt="#sm5" class="tabactive"><font color="#660000"><b>Контейнер 5</b></font></span>
<span style="cursor: pointer;" alt="#sm6" class=""><font color="#660000"><b>Контейнер 6</b></font></span>
<span style="cursor: pointer;" alt="#sm7" class=""><font color="#660000"><b>Контейнер 7</b></font></span>
<span style="cursor: pointer;" alt="#sm8" class=""><font color="#660000"><b>Контейнер 8</b></font></span>

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

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
&lt;!--$(".tabs span:first").addClass("active").show(); --&gt;
$("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>

Если расстояние между кнопками будет большое/маленькое, то поменять его можно тут

.menu span {
border:1px solid #8f7468;
text-align: left;
font: normal 100% Trebuchet Mst;
display:inline-block;
color: #1c1c1d;
margin: 9px 35px;
padding: 10px;
}

0

965

sadhaka, вот что получилось  http://testmax.rusff.ru/

++

http://s5.uploads.ru/8kpcF.jpg

если уменьшить расстояние между кнопками margin: , то четвертая возвращается на верх, но все равно пятая стоит основной и при нажатия на остальные ничего не происходит

Отредактировано Kisasian (25.06.2013 05:02:08)

0

966

Kisasian
сорри, случайно скопировала не то, что нужно

Код:
<style>
.menu {
margin-top: -2px;
height: 47px;
width:100%;
background-repeat : no-repeat;
}
.menu span {
border:1px solid #8f7468;
text-align: left;
font: normal 100% Trebuchet Mst;
display:inline-block;
color: #1c1c1d;
margin: 9px 10px;
padding: 10px;
}
#submenu,.menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: url(http://s1.uploads.ru/6us5v.png);
}
.menu .tabactive {
color: #8f7468;
    background:0;
}
#submenu {
padding: 0px;
height: 300px;
border:1px solid #8f7468;
text-align: center;
font: normal 100% Trebuchet Ms;
font-size: 14px;
width: 640px;
}
.submenutext {
display: none;
height: 40px;
}
</style>

<table style="width: 640px">
<tbody>
  <tr>
   <td valign=top valign=center>
 <div class="menu">
<span alt="#sm1" style="cursor: pointer;"><font color=#660000><b>Контейнер 1</b></font></span>
<span alt="#sm2" style="cursor: pointer;"><font color=#660000><b>Контейнер 2</b></font></span>
<span alt="#sm3" style="cursor: pointer;"><font color=#660000><b>Контейнер 3</b></font></span>
<span alt="#sm4" style="cursor: pointer;"><font color=#660000><b>Контейнер 4</b></font></span>

    </div>
   </td>
</tr>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center">

<div id="sm1" class="submenutext" style="display:block;padding:10px;height:280px;">
<table>
<tr>
<td rowspan="2">

<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 370px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div></td>
</tr>
<tr>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>


<div id="sm2" class="submenutext">
<table>
<tr>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>

<div id="sm3" class="submenutext"><center>
<div style="text-align:right; padding-right: 15px;"><font color=#660000><b>надпись
</b></font></div><br/><div style="text-align: center; width: 600px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>

</center></div>

<div id="sm4" class="submenutext"><center>
<table>
<tr>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 68px; overflow-y: scroll; ">текст</div></div>
</td>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 67px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
<tr>
<td colspan="2"><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 590px ; height: 120px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 115px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</p></center></div>

<div id="sm5" class="submenutext"><center>
<table>
<tr>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
</tr>
<tr>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 78px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</center></div>

<div id="sm6" class="submenutext">Контейнер 6</div>
<div id="sm7" class="submenutext">Контейнер 7</div>
<div id="sm8" class="submenutext">Контейнер 8</div>


</div>
     <tr>
   <td valign=top valign=center>
 <div class="menu">
<span alt="#sm5" style="cursor: pointer;"><font color=#660000><b>Контейнер 5</b></font></span>
<span alt="#sm6" style="cursor: pointer;"><font color=#660000><b>Контейнер 6</b></font></span>
<span alt="#sm7" style="cursor: pointer;"><font color=#660000><b>Контейнер 7</b></font></span>
<span alt="#sm8" style="cursor: pointer;"><font color=#660000><b>Контейнер 8</b></font></span>

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

<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>

0

967

КОГДА БУДЕТ МОЙ ЗАКАЗ ГОТОВ???!!!

0

968

Marinka
напоминайте о себе, неизвестно, востребован ли заказ двухнедельной давности.
будет завтра

0

969

sadhaka, ага, так гораздо лучше. Благодарю.

0

970

1. Ссылка на форум
Тестовик

2. Ширина форума
Около 800 пикселей (может чуть меньше), В общем по ширине форума посмотрите)

3. Эскиз таблицы
1. http://s5.uploads.ru/EyVgN.png
2. http://s5.uploads.ru/bVi9G.png
3. http://s4.uploads.ru/Xbav8.png
4. http://s5.uploads.ru/lCjeQ.png

4. Доп. элементы
На эскизах всё подробно указанно, все прокрутки, и границы, где нужны/где не нужны. Все цвета брать с эскиза, внешне всё должно выглядеть примерно так же как на эскизах. Шрифт заголовков Century Gothic, основной текст либо им же, либо другим шрифтом на ваш выбор.
Заранее благодарна.

0

971

Marinka

Код:
<marquee style="font-size: 14px;" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">Бегущая строка</marquee>
<hr />
<br />
<!--Стили контейнера-->
<style type="text/css">
#menu {
    margin-top: -5px;
    width: 180px;
    height: 60px;
}
#menu span {
    text-align: left;
    display: block;
    color: #000000;
    margin: 5px 0;
    padding: 11px;
}
#submenu, #menu span {
    border: 1px dashed #000;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    background: transparent
}
#menu .tabactive {
    color: red;
}
#submenu {
    font-size: 12px;
    height: 295px;
    padding: 3px;
    width: 660px;
}
.submenutext {
    display: none;
    height: 285px;
    width: 650px;
    overflow: scroll;
    padding: 5px;
}
</style>
<!--Контент контейнера-->
<table style="width: 880px; margin: 0 auto;">
    <tbody>
        <tr>
            <td valign=top>
                <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>
                        <span alt="#sm6" style="cursor: pointer;">6 текст</span>
                        <span alt="#sm7" style="cursor: pointer;">7 текст</span>
                    </b>
                </div>
            </td>
            <td id="MenuTxT"  valign="top">
                <div id="submenu" align="center">
                    <div id="sm1" class="submenutext" style="display:block;">
                        1 текст
                    </div>
                    <div id="sm2" class="submenutext">
                        2 текст
                    </div>
                    <div id="sm3" class="submenutext">
                        3 текст
                    </div>
                    <div id="sm4" class="submenutext">
                        4 текст
                    </div>
                    <div id="sm5" class="submenutext">
                        5 текст
                    </div>
                    <div id="sm6" class="submenutext">
                        6 текст
                    </div>
                    <div id="sm7" class="submenutext">
                        7 текст
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<!--Do magic ;)-->
<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>

Demo - http://sadhaka.moy.su/tables/abc1234567 … sff.ru.htm

0

972

Фолтор

Код:
<!--Контент слайдера-->
<div class="content-container">
<ul class="tabs">
    <li class="active"><a href="#tab1">Основное</a></li>
    <li><a href="#tab2">Навигация</a></li>
    <li><a href="#tab3">Игра</a></li>
    <li><a href="#tab4">Разное</a></li>
</ul>

<div class="tab_container">
    <div class="tab_content" id="tab1" style="display: block;">
        <div style="float: left; width: 50%">
            <h3>Администрация</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: right; width: 50%">
            <h3>Новости</h3>
            <div class="entry_content border">
                Текст, текст, текст
            </div>
        </div>
    </div>
    <div class="tab_content" id="tab2" style="display: none;">
        <div style="float: left; width: 33%">
            <h3>Гостям</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: left; width: 33%">
            <h3>До принятия</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: left; width: 33%">
            <h3>После принятия</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
    </div>
    <div class="tab_content" id="tab3" style="display: none;">
        <div style="float: left; width: 49%">
            <h3>Погода и время в игре</h3>
            <div class="entry_content border">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: right; width: 49%">
            <h3>Квесты</h3>
            <div class="entry_content border">
                Текст, текст, текст
            </div>
        </div>
    </div>
    <div class="tab_content" id="tab4" style="display: none;">
        <div style="float: left; width: 49%">
            <h3>Любой заголовок</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: right; width: 49%">
            <h3>Любой заголовок</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
    </div>
</div>
</div>
<!--/Контент слайдера-->
<!--Стили слайдера-->
<style type="text/css">
.content-container {
    background: #bfbf8f;
    width: 780px;
    height: 380px;
}
ul.tabs {
    float: left;
    list-style: none outside none;
    margin: 10px 0 0 9px;
    padding: 0;
    width: 100%;
}
ul.tabs li {
     float: left;
     width: 170px;
     height: 36px;
     border: 1px solid #26261d;
     text-align: center;
     margin-left: 15px;
     border-radius: 10px;
     background: #aeae82;
     color: #26261d;
     font: 22px/1.5 "Century Gothic";
}
ul.tabs li.active {
    background: #999973;
}
ul.tabs li a {
     outline: medium none;
     padding: 0px 10px;
     text-decoration: none;
}
ul.tabs li a:hover, ul.tabs li a:focus, ul.tabs li a:active, ul.tabs li a:visited {
     color: #26261d;
}
.tab_container {
    overflow: hidden;
    clear: both;
    width: 780px;
}
.tab_content {
     overflow: hidden;
     padding: 5px 25px;
}
.tab_content h3 {
     margin: 0;
     text-align: center;
     color: #26261d;
     font: 22px/1.5 "Century Gothic";
}
.entry_content {
     padding: 7px;
     color: #26261d;
     font: 20px/1.5 "Century Gothic";
     text-align: center;
}
.entry_content.border {
     background: #a6a67c;
     border: 1px solid #26261d;
     border-radius: 10px;
     height: 270px;
     overflow-y: scroll;
}
.entry_content.scroll {
     height: 270px;
     overflow-y: scroll;
}
</style>
<!--/Стили слайдера-->
<!--Do magic :)-->
<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>

демо http://sadhaka.moy.su/tables/fegtest.rolka.su.htm

+1

973

sadhaka
А можно там где Администрация прокрутку сделать?

0

974

Фолтор
хм, почему-то я прочла "прокрутки, границ нет"
добавила

вообще это очень просто делается, если вдруг Вам понадобится что-то изменить
текст вставляется в <div> с классом entry-content

Код:
            
           <div class="entry_content">
                Текст, текст, текст
            </div>

обычный entry_content вставит обычный блок без прокрутки и рамки под которые выделены другие классы
Добавляете к блоку класс border - получаете рамку

Код:
            
           <div class="entry_content border">
                Текст, текст, текст
            </div>

А класс scroll добавит прокрутку

Код:
            
           <div class="entry_content scroll">
                Текст, текст, текст
            </div>

+2

975

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

хм, почему-то я прочла "прокрутки, границ нет"

Бывает)

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

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

Премного благодарна, спасибо за таблицу и полезную информацию.

0

976

Мне такую таблицу - http://s4.uploads.ru/t/JhSWK.png

0

977

Каллисто
FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц

0

978

1. ссылка на форум
http://wolvesvsdogs.f-rpg.ru/
2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).
Понятия не имею, до дизайнера не могу достучаться, а знает только она. Дизайн полностью готов.
3. рисунок
http://s4.uploads.ru/mpR2i.png
http://s5.uploads.ru/5feZH.png
4. границы у таблицы: есть/нет (нужное подчеркнуть)
5. дополнительно
Размер таблицы 900x270
Там где написано навигация я хочу вставить обычную картинку, с надписью Навигация. Ниже 5 кнопок, я хочу, чтобы это были кликабельные картинки. Все примерно в таком соотношении, но чтобы всё было ровно (конечно же). Правее находятся 5 кнопок, при нажатии на каждую из них в большом поле меняется текст, то есть допустим нажимаю АМС и внизу текст с информацией об администрации, которую я введу потом. Конечно же верхние кнопки я нарисовала криво, но там должно быть все ровно и расстояние между кнопками одинаковое. Эти 5 кнопок тоже должны быть картинками, при нажатии на которые  появляется соответствующий текст. Я решила не расписывать что именно будет под каждой из кнопок, так как там будут просто текст, ссылки и картинки. Подробно нарисовала только кнопку партнеры. Я еще не знаю буду ли я ставить туда бегущую строку, может  быть там будут просто текст и баннеры партнеров. Я старалась написать все как можно более подробно.

Отредактировано Germiona (30.07.2013 19:22:56)

0

979

Germiona
поскольку картинок Вы не дали, то как-то так

Код:
<!--Контент слайдера-->
            <div class='links'>
                <ul>
                    <li><h3>Навигация</h3></li>
                    <li><a href='' title=''><img src='' /></a></li>
                    <li><a href='' title=''><img src='' /></a></li>
                    <li><a href='' title=''><img src='' /></a></li>
                    <li><a href='' title=''><img src='' /></a></li>
                    <li><a href='' title=''><img src='' /></a></li>
                </ul>

            </div>
            <div class="content-container">
                <ul class="tabs">
                    <li class="active"><a href="#tab1">Новости</a></li>
                    <li><a href="#tab2">Погода</a></li>
                    <li><a href="#tab3">AMC</a></li>
                    <li><a href="#tab4">Карта мира</a></li>
                    <li><a href="#tab5">Партнеры</a></li>
                </ul>

                <div class="tab_container">
                    <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 class="tab_content" id="tab4" style="display: none;">
                        Карта мира
                    </div>
                    <div class="tab_content" id="tab5" style="display: none;">
                        Партнеры
                    </div>
                </div>
            </div>
            <!--/Контент слайдера-->
            <!--Стили слайдера-->
            <style type="text/css">
                .links {
                    float: left;
                    width: 250px;
                }
                .links h3 {
                    padding: 7px;
                    font: 16px;
                    text-align: center;
                }
                .links li {
                    margin: 0;
                    padding: 0;
                    border: 0 none #fff;
                    padding: 0px 10px;
                }
                .content-container {
                    width: 650px;
                    height: 270px;
                    float: left;
                }
                ul.tabs {
                    float: left;
                    list-style: none outside none;
                    margin: 0 0 0 9px;
                    padding: 0;
                    width: 100%;
                }
                ul.tabs li {
                    float: left;
                    width: 125px;
                    height: 36px;
                    text-align: center;
                    color: #26261d;
                }
                ul.tabs li.active {
                    background: #999973;
                }
                ul.tabs li a {
                    outline: medium none;
                    text-decoration: none;
                }
                ul.tabs li a:hover, ul.tabs li a:focus, ul.tabs li a:active, ul.tabs li a:visited {
                    color: #26261d;
                }
                .tab_container {
                    overflow: hidden;
                    clear: both;
                    width: 780px;
                }
                .tab_content {
                    overflow: hidden;
                    padding: 5px 25px;
                }
                .tab_content h3 {
                    margin: 0;
                    text-align: center;
                    color: #26261d;
                    font: 22px/1.5 "Century Gothic";
                }
            </style>
            <!--/Стили слайдера-->
            <!--Do magic :)-->
            <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>

Если что-то непонятно - спрашивайте )

http://sadhaka.moy.su/tables/Wolves_vs_Dogs.htm

0

980

sadhaka
Большое спасибо, а куда потом картинки вставлять?

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC