Ссылка на пробнник:
http://fearandloathinginlv.mybb.ru/
Пожелания: Хотелось бы поднять таблицу на шапку, чтобы в ней сделать оформление для таблицы (которую брала с вашего форума). Так же хотелось бы убрать рамки в самих таблицах (кнопки оставить в покое с
. И, если возможно, убрать у последнего столбика с "Погодой" сбоку изображение прокрутки, название этой палочки из головы вылетело. И, если можно, кнопка №4 почему-то уехала вниз. Я с ней долго боролась, но исправила только путем удаления. Но она мне нужна, пришлось вернуть. И все равно она съехавшая.
Коды ваши, так что, чтобы вы не искал, я переслала их ниже:
Объявление
Код:<table border="1" cellpadding="5" cellspacing="1" style="width: 800px; height: 270px;"> <tbody> <tr> <td rowspan="2" style="text-align: center; width: 22%;"> <p><a href="http://ссылка" target="_blank">ссылка в новом окне 1</a></p> <p><a href="http://ссылка" target="_blank">ссылка в новом окне 2</a></p> <p><a href="http://ссылка" target="_blank">ссылка в новом окне 3</a></p> <p><a href="http://ссылка" target="_blank">ссылка в новом окне 4</a></p> <p><a href="http://ссылка" target="_blank">ссылка в новом окне 5</a></p> </td> <td rowspan="2" style="text-align: center; width: 50%;vertical-align: top;"> <ul class="tabs"> <li class="active"><a href="#tab1">Вкладка 1</a></li> <li class=""><a href="#tab2">Вкладка 2</a></li> <li class=""><a href="#tab3">Вкладка 3</a></li> <li class=""><a href="#tab4">Вкладка 4</a></li> </ul> <div class="tab_container1"> <div style="display: block; height: 96%; overflow-y: scroll;" id="tab1" class="tab_content"> текст 1 </div> <div style="display: none; height: 96%; overflow-y: scroll;" id="tab2" class="tab_content"> текст 2 </div> <div style="display: none; height: 96%; overflow-y: scroll;" id="tab3" class="tab_content"> <!-- Акция 1 --> <table border="1" cellpadding="1" cellspacing="1" style="width: 100%;"> <tbody> <tr> <td style="width: 50px;"><img alt="" height="50" src="ссылка" width="50"></td> <td> <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;"> <h1><b>Имя персонажа</b><p>Раса персонажа</p><p>Мир, в котором живет персонаж</p></h1> </div><div id="spoiler4" style="display: none; padding: 6px;"> Полное описание персонажа </div></div> </td> </tr> </tbody> </table> <!-- Акция 2 --> <table border="1" cellpadding="1" cellspacing="1" style="width: 100%;"> <tbody> <tr> <td style="width: 50px;"><img alt="" height="50" src="ссылка" width="50"></td> <td><div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;"> <h1><b>Имя персонажа</b><p>Раса персонажа</p><p>Мир, в котором живет персонаж</p></h1> </div><div id="spoiler4" style="display: none; padding: 6px;"> Полное описание персонажа </div></div></td> </tr> </tbody> </table> <!-- Акция 3 --> <table border="1" cellpadding="1" cellspacing="1" style="width: 100%;"> <tbody> <tr> <td style="width: 50px;"><img alt="" height="50" src="ссылка" width="50"></td> <td><div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;"> <h1><b>Имя персонажа</b><p>Раса персонажа</p><p>Мир, в котором живет персонаж</p></h1> </div><div id="spoiler4" style="display: none; padding: 6px;"> Полное описание персонажа </div></div></td> </tr> </tbody> </table> </div> <div style="display: none; height: 96%; overflow-y: scroll;" id="tab4" class="tab_content"> текст 4 </div> </div> </td> <td style="text-align: center; width: 30%; padding-top: 8px; vertical-align: top; height: 120px;"> <p style="margin: 0 0 2px 0;text-transform: uppercase;"><b>Погода</b></p> <table border="1" cellpadding="5" cellspacing="1" style="width: 100%; height: 100px;"> <tbody> <tr> <td rowspan="2" style="text-align: center; width: 50px;"><img alt="" height="50" src="картинка" width="50"></td> <td rowspan="2" style="text-align: center;"> <div style="height: 100%; overflow-x: hidden; overflow-y: auto;text-align: justify;padding: 5px;">текст погоды, пjгодный текст или как-нибудь ещё с прокрут-кой/ текст погоды, пjгодный текст или как-нибудь ещё с прокрут-кой/ текст погоды, пjгодный текст или как-нибудь ещё с прокрут-кой/</div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="text-align: center;"> <p><span style="text-transform: uppercase;"><b>Администрация</b></span></p> <p><img alt="" height="50" src="профиль_1" title="НИК" width="50"> <img alt="" height="50" src="профиль_1" title="НИК" width="50"> <img alt="" height="50" src="профиль_1" title="НИК" width="50"></p> </td> </tr> </tbody> </table>
html-верх, или стили без тегов, или объявление
Код:<style> .container1 {width: 100%; margin: 0 auto; padding: 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 40px; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 36px; line-height: 40px; border: 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.28); overflow: hidden; position: relative; margin-right: 20px; left: 5%; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; } ul.tabs li a { text-decoration: none; color: black; display: block; padding: 0 5px; background: transparent; outline: none; } ul.tabs li a:hover { border-bottom: 0px solid #000000; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; } html ul.tabs li.active { background: transparent; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } html ul.tabs li.active a:hover { background: transparent; border-bottom: 0px solid #160f0a; } .tab_container1 { clear: both; float: left; width: 100%; height: 300px; background: transparent; border: 0.1em solid rgba(0, 0, 0, 0.28); -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style>
html-низ
Код:<script type="text/javascript"> $(document).ready(function(){ $('.splLink').click(function(){ $(this).parent().children('div.splCont').toggle('normal'); return false; }); }); </script> <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>
Сама тема - [Выполнено] Таблица, HTML
Заранее большое спасибо
