1. Ссылка на форум: http://worldofeternalmagic.spybb.ru
2. Эскиз таблицы:
Три блока: "Время и погода", "Партнёры" и "Лучший игрок" не изменяются, везде есть прокрутка.
Вверху большого блока-вкладки, переключаются.
1) В этой вкладке текст, есть прокрутка
2) здесь то же, что и во вкладке 1
3) Здесь ссылки, размещённые по центру , есть прокрутка.
4) Аватары и немного информации о администрации(контакты). При наведении-картинка увеличивается и при клике-переход на профиль участника
В блоке "лучший игрок" разместить аватар(маленький), текст. Есть прокрутка.
3. Дополнительные предпочтения: По поводу размеров хотелось бы спросить совета у мастера)
Края скруглены. Цвет таблицы-или такой, как есть сейчас на форуме(это #fcd279, или чуть светлее)
[Выполнено]Таблица.
Сообщений 1 страница 6 из 6
Поделиться109.11.12 14:00
Поделиться209.11.12 14:04
Если нужно будет-эскиз перерисую
Поделиться310.11.12 12:59
верх
<style> .container1 {width: 400px; margin: 0 auto; padding: 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 40px; width: 400px; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 40px; line-height: 40px; border-bottom: 0px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; margin-bottom: -2px; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: transparent; display: block; padding: 0 5px; outline: none; } ul.tabs li a:hover { background: url(); } html ul.tabs li.active { background: url(); } html ul.tabs li.active a:hover { background: url(); } .tab_container1 { clear: both; float: left; width: 400px; height: 440px; background-image : url(); border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style> <style> .a-prev:hover .preview{ display: block!important; margin-left: 20px; position: absolute!important; margin-top: 5px!important; z-index: 1; } .a-prev .preview{display:none} </style>
низ
<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>
объявление
<table width="100%" > <tr> <td rowspan="3" width="60%"><div class="container"> <div class="html-box"> <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_container1"> <div style="display: block;" id="tab1" class="tab_content"> <div style="width: 100%; height: 430px; overflow-y: scroll; ">текст 1</div> </div> <div style="display: none;" id="tab2" class="tab_content"> <div style="width: 100%; height: 430px; overflow-y: scroll; ">текст 2</div> </div> <div style="display: none;" id="tab3" class="tab_content"> <div style="width: 100%; height: 430px; overflow-y: scroll; "><center><a href="тут ссылка">название ссылки</a></center></div> </div> <div style="display: none;" id="tab4" class="tab_content"> <div style="width: 100%; height: 430px; overflow-y: scroll; "> <center>АДМИНЫ<br/> <a class="a-prev" href="Ссылка на профиль" target="_blank"> <img class="preview" src="Полноразмерная картинка" border="0"/> <img src="мини картинка" border="0"/> </a> <br/>МОДЕРЫ<br/> <a class="a-prev" href="Ссылка на профиль" target="_blank"> <img class="preview" src="Полноразмерная картинка" border="0"/> <img src="мини картинка" border="0"/> </a> <br/> <a class="a-prev" href="Ссылка на профиль" target="_blank"> <img class="preview" src="Полноразмерная картинка" border="0"/> <img src="мини картинка" border="0"/> </a> <br/>Помощники<br/> <a class="a-prev" href="Ссылка на профиль" target="_blank"> <img class="preview" src="Полноразмерная картинка" border="0"/> <img src="мини картинка" border="0"/> </a> </center> </div> </div> </div> </div> </div> </td> <td >Время<br/><div style="border: 1px solid #160f0a; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 140px; overflow-y: scroll; ">текст погоды</div></div> </td> </tr> <tr> <td >Баннеры<br/><div style="border: 1px solid #160f0a; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 130px; overflow-y: scroll; ">текст баннеров</div></div> </td> </tr> <tr> <td >Лучший игрок<br/><div style="border: 1px solid #160f0a; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 120px; overflow-y: scroll; ">текст </div></div> </td> </tr> </table>
Поделиться410.11.12 15:29
Бу
А возможно ли чуть поднять контейнер с кладками?
Поделиться511.11.12 09:53
Лилитана
верх
<style> .container1 {width: 400px; margin: 0 auto; padding: 0;} ul.tabs { margin-top: -40px; padding: 0; float: left; list-style: none; height: 40px; width: 400px; } ul.tabs li { float: left; margin: 0; padding: 0; height: 40px; line-height: 40px; border-bottom: 0px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; margin-bottom: -2px; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: transparent; display: block; padding: 0 5px; outline: none; } ul.tabs li a:hover { background: url(); } html ul.tabs li.active { background: url(); } html ul.tabs li.active a:hover { background: url(); } .tab_container1 { clear: both; float: left; width: 400px; height: 440px; background-image : url(); border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style> <style> .a-prev:hover .preview{ display: block!important; margin-left: 20px; position: absolute!important; margin-top: 5px!important; z-index: 1; } .a-prev .preview{display:none} </style>
Поделиться611.11.12 16:25
Бу
Спасибо огромное)