1. Ссылка на форум: http://asylum.f-rpg.ru/
2. Эскиз таблицы: http://s1.uploads.ru/ZMbzl.png
3. Дополнительные предпочтения: ширина всей таблицы - 870px, высота 300px. там где написано картинка, будут картинки, сменяемые вместе с текстом при нажатии кнопок пример. ширина первого столбца (там где картинка, кнопки и контейнер для текста) 630px, второго - 240px. Еще будет фоновое изображение для таблицы и кнопки будут картинками. размер кнопок - 126х37px.
[выполнено]Таблица. Авторский мир.
Сообщений 1 страница 10 из 16
Поделиться127.09.12 20:13
Поделиться230.09.12 12:54
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
Бу
Даже не знаю, как вас благодарить! Именно то, что нужно. Большое вам спасибо ))
Поделиться430.09.12 14:32
А можете помочь отпозиционировать блок с погодой и баннерами? а то сколько бьюсь, они все никак на место не встают. тестовик: http://danessa.0bb.ru/
И еще с некоторых браузеров вот такая ерунда:
а должно быть вот так:
Отредактировано Danessa (30.09.12 17:36)
Поделиться530.09.12 19:45
Danessa
Я обычно ставлю блок на место с помощью
<div style="margin-left: 10px;">погода</div>
и всё в этом духе.
Хм, попробую зафиксировать, дабы не ползало все, наверное, я что-то не учла.
Поделиться630.09.12 20:09
Бу
буду очень-очень рада! )
<div style="margin-left: 10px;">погода</div>
так пробовала не помогает.
Отредактировано Danessa (30.09.12 20:11)
Поделиться730.09.12 20:41
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>
Поделиться901.10.12 12:41
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
Бу
проблема изменила характер но не исчезла (в опере). Давайте все же попроще сделаем, без смены картинок. вот эскиз: http://s1.uploads.ru/IA91e.jpg
Так же пять кнопок, все то же самое, только без тех картинок.