ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте
Стать модераторомОтзывы

Предложения
На форуме идут технические работы. Кое-что кое-где может отображаться криво. Мы скоро всё поправим. :)

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

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



[выполнено]Таблица. Авторский мир.

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

1

1. Ссылка на форум: http://asylum.f-rpg.ru/
2. Эскиз таблицы:  http://s1.uploads.ru/ZMbzl.png
3. Дополнительные предпочтения: ширина всей таблицы - 870px, высота 300px. там где написано картинка, будут картинки, сменяемые вместе с текстом при нажатии кнопок пример. ширина первого столбца (там где картинка, кнопки и контейнер для текста) 630px, второго - 240px. Еще будет фоновое изображение для таблицы и кнопки будут картинками. размер кнопок - 126х37px.

0

2

Danessa
наверное так
верх

Код:
<style>
#menu {
margin-top: 0px; 
height: 30px;
}
#menu span {
margin-right: -4px;
}
#submenu1 {
margin-top: 0px;
width: 630px;}

#submenu2 {
margin-top: -2px;
width: 630px;}

.submenutext1 {
display: none;
height: высота картинкиpx;
padding:0px;
text-align: center;
font-size: 12px;} 

.submenutext2 {
font-size: 12px;
color: #3F3626;
text-align: center;
line-height: normal;
padding: 0px 9px 4px 18px;
}
</style>

низ

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

объявление

Код:
<table style="width: 870px;" >
<tr>
   <td id="MenuTxT1" align="center" width="630px">
    <div id="submenu1" align="center"> 
     <div id="sm1" class="submenutext1" style="display:block;">
<div style="widht: 100%;  overflow: auto;">

<img src="картинка 1">

</div>
</div>

     <div id="sm2" class="submenutext1">
<div style="widht: 100%;  overflow: auto;">

<img src="картинка 2">

</div>
</div>

     <div id="sm3" class="submenutext1">
<div style="widht: 100%; overflow: auto;">

<img src="картинка 3">

</div>
</div>

     <div id="sm4" class="submenutext1">
<div style="widht: 100%; overflow: auto;">

<img src="картинка 4">

</div>
</div>

     <div id="sm5" class="submenutext1">
<div style="widht: 100%;overflow: auto;">

<img src="картинка 5">
</div>
</div>
</td>

<td width="240px" rowspan="2">погода</td>
</tr>

  <tr>
   <td align="center" height="37px">
    <div id="menu">
<span alt=#sm1,#sm6 "style="cursor: pointer;"><img src="кнопка1"></span>
<span alt=#sm2,#sm7 "style="cursor: pointer;"><img src="кнопка2"></span>
<span alt=#sm3,#sm8 "style="cursor: pointer;"><img src="кнопка3"></span>
<span alt=#sm4,#sm9 "style="cursor: pointer;"><img src="кнопка4"></span>
<span alt=#sm5,#sm10 "style="cursor: pointer;"><img src="кнопка5"></span>
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT2" align="center" valign="bottom">
    <div id="submenu2" align="center"> 
     <div id="sm6" class="submenutext2" style="display:block;">
<div style="width: 100%; height: 140px; overflow: auto;">

текст 1

</div>
</div>

     <div id="sm7" class="submenutext2">
<div style="width: 100%; height: 140px; overflow: auto;">
<br/>
текст 2

</div>
</div>

     <div id="sm8" class="submenutext2">
<div style="width: 100%; height: 140px; overflow: auto;">
<br/>
текст 3

</div>
</div>

     <div id="sm9" class="submenutext2">
<div style="width: 100%; height: 140px; overflow: auto;">
<br/>
текст 4

</div>
</div>

     <div id="sm10" class="submenutext2">
<div style="width: 100%; height: 140px; overflow: auto;">
<br/>
текст 5

</div>
</div>
</td><td width="240px">баннеры</td>
</tr>
</table>

.submenutext1 {
display: none;
height: высота картинкиpx;

это высота сменных картинок

+1

3

Бу
Даже не знаю, как вас благодарить! Именно то, что нужно. Большое вам спасибо ))

0

4

А можете помочь отпозиционировать блок с погодой и баннерами? а то сколько бьюсь, они все никак на место не встают. тестовик: http://danessa.0bb.ru/

И еще с некоторых браузеров вот такая ерунда:
http://s1.uploads.ru/t/P65vx.png
а должно быть вот так: http://s1.uploads.ru/t/p4olH.jpg

Отредактировано Danessa (30.09.2012 17:36:25)

0

5

Danessa
Я обычно ставлю блок на место с помощью
<div style="margin-left: 10px;">погода</div>
и всё в этом духе.
Хм, попробую зафиксировать, дабы не ползало все, наверное, я что-то не учла.

0

6

Бу
буду очень-очень рада! )

Бу написал(а):

<div style="margin-left: 10px;">погода</div>

так пробовала не помогает.

Отредактировано Danessa (30.09.2012 20:11:32)

0

7

Danessa
попробуйте так
объявление

Код:
<table >
<tr>
<td id="MenuTxT1" align="center" valign="top">
    <div id="submenu1" align="center"> 
     <div id="sm1" class="submenutext1" style="display:block;">
<img src="http://s1.uploads.ru/6AoKj.png">
</div>

    <div id="sm2" class="submenutext1">
<img src="http://s1.uploads.ru/fT7Cn.png">
</div>

     <div id="sm3" class="submenutext1">
<img src="http://s1.uploads.ru/sDGC9.png">
</div>

     <div id="sm4" class="submenutext1">
<img src="http://s1.uploads.ru/jTcSF.png">
</div>

     <div id="sm5" class="submenutext1">
<img src="http://s1.uploads.ru/a0WOb.png">
</div>

</div>
</td>

<td width="180px" height="240px" rowspan="2"><div style="margin-left: 15px;">погода</div>
</td>
</tr>

<tr><td align="center" height="30px">
    <div id="menu">
<span alt=#sm1,#sm6 "style="cursor: pointer;"><img src="http://s1.uploads.ru/tTc5w.png"></span>
<span alt=#sm2,#sm7 "style="cursor: pointer;"><img src="http://s1.uploads.ru/d6QYP.png"></span>
<span alt=#sm3,#sm8 "style="cursor: pointer;"><img src="http://s1.uploads.ru/adQ68.png"></span>
<span alt=#sm4,#sm9 "style="cursor: pointer;"><img src="http://s1.uploads.ru/GDNlU.png"></span>
<span alt=#sm5,#sm10 "style="cursor: pointer;"><img src="http://s1.uploads.ru/kxifU.png"></span>
    </div>
   </td>
</tr>

<tr>
<td id="MenuTxT2" align="center" valign="top">
    <div id="submenu2" align="center"> 
     <div id="sm6" class="submenutext2" style="display:block;">
<div style="height: 190px; overflow: auto;">
Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.

</div>
</div>

     <div id="sm7" class="submenutext2">
<div style="height: 190px; overflow: auto;">
Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.
</div>
</div>

     <div id="sm8" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 3
</div>
</div>

     <div id="sm9" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 4
</div>
</div>

     <div id="sm10" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 5
</div>
</div>
</td>

<td width="180px"><div style="margin-left: 15px;">баннеры</div></td>
</tr>
</table>

0

8

Бу
теперь с некоторых браузеров вот так http://s1.uploads.ru/t/XF5pz.png
с некоторых так: http://s1.uploads.ru/t/usS5h.jpg
а в опере погода и баннеры стоят на месте, но то светлое пространство, которого быть не должно все равно есть...
Может тогда сделаем без смены картинок? или там не в этом дело?

Отредактировано Danessa (30.09.2012 21:47:56)

0

9

Danessa
нашла в коде ошибку, возможно, из-за нее все так прыгало

Код:
<table width="870px">
<tr>
<td id="MenuTxT1" align="center" valign="top" width="702px">
    <div id="submenu1" align="center"> 
     <div id="sm1" class="submenutext1" style="display:block;">
<img src="http://s1.uploads.ru/6AoKj.png">
</div>

    <div id="sm2" class="submenutext1">
<img src="http://s1.uploads.ru/fT7Cn.png">
</div>

     <div id="sm3" class="submenutext1">
<img src="http://s1.uploads.ru/sDGC9.png">
</div>

     <div id="sm4" class="submenutext1">
<img src="http://s1.uploads.ru/jTcSF.png">
</div>

     <div id="sm5" class="submenutext1">
<img src="http://s1.uploads.ru/a0WOb.png">
</div>

</div>
</td>

<td width="168px" rowspan="2"><div style="margin-left: 15px;">погода</div>
</td>
</tr>

<tr><td align="center" height="30px">
    <div id="menu">
<span alt="#sm1,#sm6" style="cursor: pointer;"><img src="http://s1.uploads.ru/tTc5w.png"></span>
<span alt="#sm2,#sm7" style="cursor: pointer;"><img src="http://s1.uploads.ru/d6QYP.png"></span>
<span alt="#sm3,#sm8" style="cursor: pointer;"><img src="http://s1.uploads.ru/adQ68.png"></span>
<span alt="#sm4,#sm9" style="cursor: pointer;"><img src="http://s1.uploads.ru/GDNlU.png"></span>
<span alt="#sm5,#sm10" style="cursor: pointer;"><img src="http://s1.uploads.ru/kxifU.png"></span>
    </div>
   </td>
</tr>

<tr>
<td id="MenuTxT2" align="center" valign="top">
    <div id="submenu2" align="center"> 
     <div id="sm6" class="submenutext2" style="display:block;">
<div style="height: 190px; overflow: auto;">
Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.

</div>
</div>

     <div id="sm7" class="submenutext2">
<div style="height: 190px; overflow: auto;">
Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.
</div>
</div>

     <div id="sm8" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 3
</div>
</div>

     <div id="sm9" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 4
</div>
</div>

     <div id="sm10" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 5
</div>
</div>
</td>

<td width="168px"><div style="margin-left: 15px;"><br/><br/><br/>
баннеры</div></td>
</tr>
</table>

Без смены картинок таблица такая же? только одна картинка?

Код:
<style>
#menu {
margin-top: 0px; 
height: 30px;
}

#menu span {
margin-right: -4px;
}

#submenu2 {
width: 702px;
margin-top: 10px;}

.submenutext2 {
font-size: 12px;
color: #3F3626;
text-align: center;
line-height: normal;
padding: 10px 9px 4px 18px;
}
</style>
Код:
<table width="870px">
<tr>
<td width="702px">
    <img src="http://s1.uploads.ru/6AoKj.png">
</td>

<td width="168px" rowspan="2"><div style="margin-left: 15px;"><br/><br/>погода</div>
</td>
</tr>

<tr><td align="center" height="30px">
    <div id="menu">
<span alt="#sm1" style="cursor: pointer;"><img src="http://s1.uploads.ru/tTc5w.png"></span>
<span alt="#sm2" style="cursor: pointer;"><img src="http://s1.uploads.ru/d6QYP.png"></span>
<span alt="#sm3" style="cursor: pointer;"><img src="http://s1.uploads.ru/adQ68.png"></span>
<span alt="#sm4" style="cursor: pointer;"><img src="http://s1.uploads.ru/GDNlU.png"></span>
<span alt="#sm5" style="cursor: pointer;"><img src="http://s1.uploads.ru/kxifU.png"></span>
    </div>
   </td>
</tr>

<tr>
<td id="MenuTxT2" align="center" valign="top">
    <div id="submenu2" align="center"> 
     <div id="sm1" class="submenutext2" style="display:block;">
<div style="height: 190px; overflow: auto;">
Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.

</div>
</div>

     <div id="sm2" class="submenutext2">
<div style="height: 190px; overflow: auto;">
Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.Выберите тематическую категорию для размещения форума в каталоге.
</div>
</div>

     <div id="sm3" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 3
</div>
</div>

     <div id="sm4" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 4
</div>
</div>

     <div id="sm5" class="submenutext2">
<div style="height: 190px; overflow: auto;">

текст 5
</div>
</div>
</td>

<td width="168px"><div style="margin-left: 15px;"><br/><br/><br/>
баннеры</div></td>
</tr>
</table>

+1

10

Бу
проблема изменила характер но не исчезла (в опере). Давайте все же попроще сделаем, без смены картинок. вот эскиз: http://s1.uploads.ru/IA91e.jpg
Так же пять кнопок, все то же самое, только без тех картинок.

0