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

Страница: 1 2 »

Тема закрыта

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

Поделиться127.09.12 20:13

Автор: Danessa
Бестелесный дух прошлого
Уважение: +252

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

Поделиться230.09.12 12:54

Автор: Бу
Бестелесный дух прошлого
Уважение: +298

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;

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

Поделиться330.09.12 13:03

Автор: Danessa
Бестелесный дух прошлого
Уважение: +252

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

Поделиться430.09.12 14:32

Автор: Danessa
Бестелесный дух прошлого
Уважение: +252

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

И еще с некоторых браузеров вот такая ерунда:

а должно быть вот так:

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

Поделиться530.09.12 19:45

Автор: Бу
Бестелесный дух прошлого
Уважение: +298

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

Поделиться630.09.12 20:09

Автор: Danessa
Бестелесный дух прошлого
Уважение: +252

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

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

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

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

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

Поделиться730.09.12 20:41

Автор: Бу
Бестелесный дух прошлого
Уважение: +298

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>

Поделиться830.09.12 21:43

Автор: Danessa
Бестелесный дух прошлого
Уважение: +252

Бу
теперь с некоторых браузеров вот так
с некоторых так:
а в опере погода и баннеры стоят на месте, но то светлое пространство, которого быть не должно все равно есть...
Может тогда сделаем без смены картинок? или там не в этом дело?

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

Поделиться901.10.12 12:41

Автор: Бу
Бестелесный дух прошлого
Уважение: +298

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>

Поделиться1001.10.12 15:05

Автор: Danessa
Бестелесный дух прошлого
Уважение: +252

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

Тема закрыта

Страница: 1 2 »

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

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

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

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

GEMcross

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

📣 Наш проект: Ролевой поисковик

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

SPECIAL OFFER: We distribute designs for free

Support the project

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

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

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

Поделиться127.09.12 20:13

Поделиться230.09.12 12:54

Поделиться330.09.12 13:03

Поделиться430.09.12 14:32

Поделиться530.09.12 19:45

Поделиться630.09.12 20:09

Поделиться730.09.12 20:41

Поделиться830.09.12 21:43

Поделиться901.10.12 12:41

Поделиться1001.10.12 15:05