1. Ссылка на форум:
http://newmarvelwar.ru/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
в середине таблицы встроен слайдер.
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » Таблица со встроенным слайдером.
1. Ссылка на форум:
http://newmarvelwar.ru/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
в середине таблицы встроен слайдер.
Прошу прощения.. Можете мне с заказом помочь?
Rush
я понимаю.. но до сих пор просто никто не отозвался... я уже и не надеюсь, что заказ сделают(
Trinity Wane
Сделаю Ваш заказ, только не волнуйтесь. Таблицы отнимают много времени, поэтому не все так быстро делается.
Trinity Wane
Сделаю Ваш заказ, только не волнуйтесь. Таблицы отнимают много времени, поэтому не все так быстро делается.
Еще вдогонку, стиль и ширина форума будут те же, что и по ссылке форум в первом посте?
Кофеман
да такой же, в ближайшее время изменений не планируем, большое вам спасибо)
Кофеман
да такой же, в ближайшее время изменений не планируем, большое вам спасибо)
хм.. самонения меня одолевают по поводу ширины. Слишком узкий у Вас форум для такой громоздкой таблицы как на эскизе. Ну да ладно, попробую, посмотрим что получится.
Trinity Wane
Ваша таблица
В окно HTML верх
<!-- Стиль слайдера --> <style type="text/css"> #slideshow { margin:0 auto; width:378px; height:364px; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:356px; height:364px; overflow:auto; /* поддержка прокрутки */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:336px; /* На двадцать пикселев меньше чем ширина #slidesContainer */ height:364px; } .control { display:block; width: 52px; /* ширина стрелок */ height:36px; /* высота стрелок */ text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top: -10px; left:-20px; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */ background: transparent url(http://s3.uploads.ru/nipbU.png) no-repeat 0 0; } #rightControl { top: -10px; right:-20px; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */ background: transparent url(http://s3.uploads.ru/5Gi2Z.png) no-repeat 0 0; } .slide h2, .slide p { margin:15px; } </style>
В окно HTML-низ
<script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 356; var slides = $('.slide'); var numberOfSlides = slides.length; // С помощью скрипта убираем прокрутку в контейнере. $('#slidesContainer').css('overflow', 'hidden'); // Свернем все вкладки .slides в блок #slideInner slides .wrapAll('<div id="slideInner"></div>') .css({ 'float' : 'left', 'width' : slideWidth }); // Проставим блоку #slideInner ширину, равную общей ширине контейнеров $('#slideInner').css('width', slideWidth * numberOfSlides); $('#slideshow') .prepend('<span class="control" id="leftControl">Clicking moves left</span>') .append('<span class="control" id="rightControl">Clicking moves right</span>'); manageControls(currentPosition); $('.control') .bind('click', function(){ currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; manageControls(currentPosition); $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); function manageControls(position){ // Скрыть левую стрелку у первого контейнера if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Скрыть правую стрелку у последнего контейнера if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } }); </script>
Таблица в Объявление
<table cellspacing="0" cellpadding="0" border="0" style="width: 740px; margin-left: -6px!important;"> <tr> <td align="center" valign="top" style="width: 180px;"> <!-- Левый блок --> <div align="center" style="margin: 4px;">Рейтинг</div> <div style="overflow-y: auto; overflow-x: hidden; padding: 1px; width: 176px; height: 100px; border: 1px solid;"> Текст рейтинга. Прокрутка появится автоматически. </div> <div align="center" style="margin: 4px;">Нужные</div> <div style="overflow-y: auto; overflow-x: hidden; padding: 1px; width: 176px; height: 276px; border: 1px solid; margin-bottom: 5px;"> Текст "Нужных". Прокрутка появится автоматически. </div> <!-- конец левого блока --> </td> <td align="center" valign="top" style="width: 380px;"> <!--- Блок слайдер и кнопок плеера ---> <div id="slideshow"> <div id="slidesContainer"> <!-- Первый слайд --> <div class="slide"> <br><br><br> <img src="адрес картинки" alt="картинка активисты" border="0"><br> <img src="адрес картинки" alt="активист 1" border="0"> <img src="адрес картинки" alt="активист 2" border="0"> <img src="адрес картинки" alt="активист 3" border="0"> <img src="адрес картинки" alt="активист 4" border="0"> <br><br><br> <img src="адрес картинки" alt="картинка флудеры" border="0"><br> <img src="адрес картинки" alt="флудер 1" border="0"> <img src="адрес картинки" alt="флудер 2" border="0"> <img src="адрес картинки" alt="флудер 3" border="0"> <img src="адрес картинки" alt="флудер 4" border="0"> </div> <!-- Второй слайд --> <div class="slide"> <br><br><br> <img src="адрес картинки" alt="картинка 1" width="55" height="55" border="0"> <img src="адрес картинки" alt="картинка 1" width="55" height="55" border="0"> <img src="адрес картинки" alt="картинка 1" width="55" height="55" border="0"> <img src="адрес картинки" alt="картинка 1" width="55" height="55" border="0"> <img src="адрес картинки" alt="картинка 1" width="55" height="55" border="0"> <img src="адрес картинки" alt="картинка 1" width="55" height="55" border="0"> <br><br><br> <table cellspacing="2" cellpadding="2" border="0" style="width: 330px;"> <tr> <td align="center" valign="top" style="width: 165px;"> <div style="overflow-y: auto; overflow-x: hidden; padding: 1px; width: 160px; height: 220px; border: 1px solid;"> Игровая информация </div> </td> <td align="center" valign="top" style="width: 165px;"> <div style="overflow-y: auto; overflow-x: hidden; padding: 1px; width: 160px; height: 220px; border: 1px solid;"> Время погода </div> </td> </tr> </table> </div> <!-- Третий слайд --> <div class="slide"> <br><br><br><br> Лучший игрок<br><br> <img src="адрес картинки" alt="Картинка игрока" border="0"><br><br> Текст поста </div> </div> </div> <div align="center" style="height: 30px;"> Кнопки плеера вставлять тут </div> <!--- Конец блока слайдера ---> </td> <td align="center" valign="top" style="width: 180px;"> <!-- Правый блок --> <div align="center" style="margin: 4px;">Ссылки</div> <div style="overflow-y: auto; overflow-x: hidden; padding: 1px; width: 176px; height: 100px; border: 1px solid;"> <a href="адрес ссылки">Описание ссылки</a><br> <a href="адрес ссылки">Описание ссылки</a><br> <a href="адрес ссылки">Описание ссылки</a><br> <a href="адрес ссылки">Описание ссылки</a><br> <a href="адрес ссылки">Описание ссылки</a><br> </div> <div align="center" style="margin: 4px;">Должники</div> <div style="overflow-y: auto; overflow-x: hidden; padding: 1px; width: 176px; height: 150px; border: 1px solid;"> Должник локация много текста </div> <div align="center" style="margin: 4px;">Топы</div> <div style="overflow-y: auto; overflow-x: hidden; padding: 1px; width: 176px; height: 100px; border: 1px solid; margin-bottom: 5px;"> 3 топа </div> <!-- Конец правого блока --> </td> </tr> <tr> <td colspan="3" align="center" style="height: 60px;">баннеры</td> </tr> </table>
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » Таблица со встроенным слайдером.