Доброго времени суток.
1. Эскиз + основное описание таблицы
2. Форум
3. Надеюсь что все таки слайдер возможно сделать (:
Так выглядит содержание 1 и 2 кнопок, т.е. в каждой простенькая табличка (Так же является 1 слайдом для 1-й кнопки); Так выглядит содержание 3 и 4 кнопок
Так выглядит содержание второго слайда (тоже с табличкой)
Теперь оформление:
Картинка 1 кнопки- http://s019.radikal.ru/i635/1203/bd/73a6ec48b7ac.jpg
Картинка 2 кнопки- http://s019.radikal.ru/i607/1203/40/8eff7bbe048b.jpg
Картинка 3 кнопки- http://s019.radikal.ru/i611/1203/73/043fefa3bdb6.jpg
Картинка 4 кнопки- http://s019.radikal.ru/i621/1203/7c/3a779c31886c.jpg
Картинка контейнера, в котором появляется текст- http://s019.radikal.ru/i607/1203/8a/2b75d1e87da2.jpg
Картинка в слайдере, второй слайд (1): http://s019.radikal.ru/i604/1203/b8/68a9d533d66a.png
Картинка в слайдере, второй слайд (2): http://s019.radikal.ru/i619/1203/87/7f7c1781c301.png
Картинки во 2 слайде которые 70х70 просто укажите в коде куда вставлять.
Стрелочка для слайдера: http://s019.radikal.ru/i635/1203/18/d93e2c5a1eb4.png
+Поле, в котором появляется информация, если возможно, сделайте по размеру вот этой картинки (размер 600х200) так же все таблицы и слайдер будут в пределах этого размера соответственно.
Надеюсь все понятно и все есть в описании >_<
Таблицы на заказ (14)
Сообщений 61 страница 80 из 1000
Поделиться61Вт, 13 Мар 2012 12:57:14
Поделиться62Вт, 13 Мар 2012 16:18:23
eden,
html-верх:
<style> #menu {margin: 0px;} #menu span { padding: 0px; margin: 0px; width: 155px;} #submenu { padding: 0px; width: 600px; height: 200px; background: transparent url(http://s019.radikal.ru/i607/1203/8a/2b75d1e87da2.jpg) center no-repeat;} .submenutext { display: none; text-align: center; width: 580px; height: 198px;} </style>
Объявление:
<center><table style="width: 100%;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr height="50"> <td align="center"> <div id="menu"> <span alt="#sm1" style="cursor: pointer;"><img src="http://s019.radikal.ru/i635/1203/bd/73a6ec48b7ac.jpg"></span> <span alt="#sm2" style="cursor: pointer;"><img src="http://s019.radikal.ru/i607/1203/40/8eff7bbe048b.jpg"></span> <span alt="#sm3" style="cursor: pointer;"><img src="http://s019.radikal.ru/i611/1203/73/043fefa3bdb6.jpg"></span> <span alt="#sm4" style="cursor: pointer;"><img src="http://s019.radikal.ru/i621/1203/7c/3a779c31886c.jpg"></span> </div> </td> </tr> <tr height="200"> <td id="MenuTxT" align="center" valign="top"> <div id="submenu" align="center"> <div id="sm1" class="submenutext" style="display:block;"> <!-- Cлайдер--> <style type="text/css"> #slideshow { margin:0 auto; width:560px; height:190px; background-color: transparent; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:480px; height:190px; position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:460px; /* На двадцать пикселев меньше чем ширина #slidesContainer */ overflow-y:auto; /* поддержка прокрутки */ height:190px; } .control { display:block; width:25px; height:30px; text-indent:-10000px; position:absolute; cursor: pointer; z-index:100; } #leftControl { top:80px; left:0; background:transparent url(http://uploads.ru/i/U/H/5/UH5yj.png) no-repeat 0 0; } #rightControl { top:80px; right:0; background:transparent url(http://s019.radikal.ru/i635/1203/18/d93e2c5a1eb4.png) no-repeat 0 0; } </style> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <table style="width: 100%; height: 100%;" border="0" cellpadding="8" cellspacing="0"> <tr> <td style="width: 50%;" align="left" valign="top"> Текст левой колонки </td> <td style="width: 50%;" align="left" valign="top"> Текст правой колонки </td> </tr> </table> </div> <div class="slide"> <table style="width: 100%; height: 100%;" border="0" cellpadding="4" cellspacing="0"> <tr> <td style="width: 33%;" align="center" valign="top"> <img src="http://s019.radikal.ru/i604/1203/b8/68a9d533d66a.png"> <br/><br/> <img style="width: 65px; height: 65px;" src="аватар"> <img style="width: 65px; height: 65px;" src="аватар"> <br/> <img style="width: 65px; height: 65px;" src="аватар"> <img style="width: 65px; height: 65px;" src="аватар"> </td> <td style="width: 33%;" align="center" valign="top"> Текст центр. колонки </td> <td style="width: 33%;" align="center" valign="top"> <img src="http://s019.radikal.ru/i619/1203/87/7f7c1781c301.png"> <br/><br/> <img style="width: 65px; height: 65px;" src="аватар"> <img style="width: 65px; height: 65px;" src="аватар"> <br/> <img style="width: 65px; height: 65px;" src="аватар"> <img style="width: 65px; height: 65px;" src="аватар"> </td> </tr> </table> </div> </div></div><!--End// Cлайдер--> </div> <div id="sm2" class="submenutext"> <table style="width: 100%; height: 100%;" border="0" cellpadding="8" cellspacing="0"> <tr> <td style="width: 50%;" align="left" valign="top"> Текст левой колонки </td> <td style="width: 50%;" align="left" valign="top"> Текст правой колонки </td> </tr> </table> </div> <div id="sm3" class="submenutext"><br/> Контент третьей кнопки </div> <div id="sm4" class="submenutext"><br/> Контент четвертой кнопки </div> </td> </tr> </tbody> </table></center>
html-низ:
<script type="text/javascript"> $(document).ready(function() { $("td.#MenuTxT div.submenutext").hide(); <!--$(".tabs span:first").addClass("active").show(); --> $("td.#MenuTxT div.submenutext:first").show(); $("div.#menu span").click(function() { $("div.#menu span").removeClass("tabactive"); $(this).addClass("tabactive"); $("td.#MenuTxT div.submenutext").hide(); var activeDiv = $(this).attr("alt"); $("div."+activeDiv).fadeIn(); return false; }); }); </script> <script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 480; 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>
Поделиться63Ср, 14 Мар 2012 15:02:24
Доброго времени суток!
1)
2) http://forumproba1.rusff.ru/ Далее пойдет сюда - http://tlklost.rusff.ru/
3) Всего окон должно быть 5, которые меняются при нажатии кнопки-стрелки. Дополнительных таблиц в таблице, впрочем как и прокруток не надо. Хотелось бы, что-бы таблица могла трансформироваться по ширине форума (если такое невозможно, то размеры - 860*300). Текст можно выровнять по центру, но не обязательно, ведь выравнивание можно прописать отдельно.
http://blah.7bb.ru/ - примерно то, что требуется. Только размер больше и без прокрутки.
Поделиться64Ср, 14 Мар 2012 16:25:47
Rion Leonheart
Огромное спасибо
Поделиться65Ср, 14 Мар 2012 17:03:03
Captain Morgan, поставьте себе слайдер, мну подправит.
Поделиться66Чт, 15 Мар 2012 15:13:32
Форум
Таблица
Правая стрелка
левая стрелка
Фон в таблице должен быть прозрачным, ширина форума - 800px
Поделиться67Чт, 15 Мар 2012 16:35:34
астрал, а какое назначение у этих стрелок? Просто для красоты?
Поделиться68Чт, 15 Мар 2012 20:50:00
Rion Leonheart
Нет, они должны прокручивать таблицу.
Поделиться69Чт, 15 Мар 2012 20:54:33
1) Эскиз вашей будущей таблицы, сделанный в любом графическом редакторе (Пэинт, Фотошоп и т.д.) - обязательно!
http://uploads.ru/i/M/W/r/MWr9k.png -пример без текста
http://uploads.ru/i/P/2/H/P2HWJ.png -пример с текстом
http://uploads.ru/i/g/v/F/gvFoq.png -пример с открытой кнопкой
http://uploads.ru/i/n/Z/b/nZbYX.png -само всплывающее окно(подстраивается под размер текста)
http://uploads.ru/i/i/4/3/i43RS.png -картинка
http://uploads.ru/i/j/7/0/j70MX.png -область события
http://uploads.ru/i/N/d/i/NdiGm.png -область важное
http://uploads.ru/i/W/g/J/WgJy0.png -кнопка навигация(при нажатии всплывающее окно)
http://uploads.ru/i/6/D/n/6Dn9p.png -кнопка пиар(при нажатии всплывающее окно)
http://uploads.ru/i/9/D/J/9DJak.png -кнопка админы(при нажатии всплывающее окно)
2) Ссылка на ваш форум !Заказы без ссылок приниматься не будут!
Вот.
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.
Всплывающие окна(они указаны в первом пункте);
Прокрутка в "Важное" и "События";
цвет текста во всей таблице - #6e5b38.
Заранее спасибо :3
Поделиться70Чт, 15 Мар 2012 22:50:15
Нет, они должны прокручивать таблицу.
Поясните - куда? Смысл прокручивать таблицу из трех колонок, которые и так видны?
Отредактировано Rion Leonheart (Чт, 15 Мар 2012 22:50:31)
Поделиться71Пт, 16 Мар 2012 11:46:53
Добрый день... В общем я чего-то тут намудрила, надеюсь не запутаю окончательно.
Мне нужна таблица с пятью переключающимися вкладками.
Вкладка 1
Вкладка 2
Вкладка 3
Вкладка 4
В пятой ничего интересного нет, делать ее не стала)
http://eldorado.rusff.ru/ - ссылка на форум
На макете нарисовала у таблицы границы, но потом решила что их делать не стоит.
Все остальное вроде как указано на картинках)
Поделиться73Сб, 17 Мар 2012 00:54:32
астрал,
обновите html-верх на такой:
<style> #pun-stats h2 span, .category h2 span { visibility:hidden!important; } </style> <script type="text/javascript"> function tag_spoiler(){ var y = prompt("Введите описание закрытой кнопки", ''); if (y != 'null' && y != '' && typeof(y) != 'object' && typeof(y) != 'undefined') { var x = prompt("Введите описание открытой кнопки", ''); if (x == 'null' || x == '' || typeof(x) == 'object' || typeof(x) == 'undefined') bbcode('[spoiler=' + y + ']', '[/spoiler]'); else bbcode('[spoiler=' + y + '|' + x + ']', '[/spoiler]'); } else bbcode('[spoiler]', '[/spoiler]') } function addSpoiler(str, from, internal){ var pos = 0, pos2 = 0, pos_c = 0, pos_l = 0, newpos = 0, string = '', close = '', open = ''; if ((pos = str.indexOf("[spoiler", from)) == -1) return str; if ((pos2 = str.indexOf("[/spoiler]"), pos + 9) == -1) return str; if (((pos_c = str.indexOf("]", pos + 8)) != -1) && ((pos_c != pos + 8) && (pos_c != pos + 9))) { string = str.substring(pos + 9, pos_c); if ((pos_l = string.indexOf("|")) != -1) { close = string.substring(0, pos_l); open = string.substring(pos_l + 1, string.length); } else { close = string; open = string; } } else { close = 'Показать спойлер'; open = 'Скрыть спойлер'; } newpos = str.indexOf("[spoiler", pos + 9) if (newpos < pos2 && newpos != -1) str = addSpoiler(str, pos + 9, true) if ((pos2 = str.indexOf("[/spoiler]", pos + 9)) == -1) return str; str = str.substring(0, pos) + makeSpoiler(str.substring(pos_c + 1, pos2), open, close) + str.substring(pos2 + 10, str.length) if (str.indexOf("[spoiler") != -1 && internal == false) str = addSpoiler(str, 0, false) return str; } function makeSpoiler(txt, open, close){ txt = '<div class="quote-box" style="padding:1px;background: none; border: 0;"><cite style="width:100%;margin:0;"><a id="' + open + '" class="spoiler" style="width:100%;font-size:10px; margin:0;border:none;cursor:pointer;text-align:left;">'+close+'</a></cite><blockquote class="quote-box" style="display:none; width: 95%;border: 1px solid black;margin:0;">' + txt + '</blockquote></div>' return txt; } $(document).ready(function(){ $("div.quote-box > cite > a.spoiler").click(function(){ $(this).parents("div.quote-box:first").find("blockquote.quote-box:first").toggle("slow"); var a = this.innerHTML; this.innerHTML= $(this).attr('id'); $(this).attr('id', a); }); }); if ((document.URL.indexOf("viewtopic.php") != -1) || (document.URL.indexOf("post.php") != -1)) { elm = document.getElementById("pun-main").getElementsByTagName("div") for (x in elm) if (elm[x].className == "post-content") { var post = elm[x] post.innerHTML = addSpoiler(post.innerHTML, 0, false) } } if(form=document.getElementById("post")) form.getElementsByTagName("tr")[0].insertCell(1).innerHTML="<img id=\"spoiler\" title=\"Спойлер\" onclick=\"tag_spoiler('[spoiler]','[/spoiler]')\" src=\"/i/blank.gif\" />" </script>
В объявление:
<table style="width: 100%;" cellpadding="3" cellspacing="0" border="0"> <tr> <td style="width: 25%;" align="center" valign="top"> <b>Администрация</b><br/><br/> тут что-то <br/><br/><b>Партнеры</b><br/><br/> тут еще что-то </td> <td style="width: 50%;"> <!-- Cлайдер--> <style type="text/css"> #slideshow { margin:0 auto; width:400px; height:180px; position:relative;} #slideshow #slidesContainer { margin:0 auto; width:196px; height:180px; position:relative;} #slideshow #slidesContainer .slide { margin:0 auto; width:176px; /* На двадцать пикселев меньше чем ширина #slidesContainer */ overflow-y:auto; /* поддержка прокрутки */ height:180px; text-align: center;} .control { display:block; width:102px; height:25px; text-indent:-10000px; position:absolute; cursor: pointer; z-index:100;} #leftControl { top:87px; left:0; background:transparent url(http://uploads.ru/i/e/7/9/e79P8.png) no-repeat 0 0;} #rightControl { top:87px; right:0; background:transparent url(http://uploads.ru/i/U/9/E/U9EBN.png) no-repeat 0 0;} </style> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <b>О нас</b><br/><br/> текст текст текст текст текст текст текст текст текст текст текст текст <br/><br/><br/> <form> <select name="select" class="forminput" onchange="location.href=(form.select.options[form.select.selectedIndex].value)"> <option>|Навигация|</option> <option value="ссылка">Тема 1</option> <option value="ссылка">Тема 2</option> <option value="ссылка">Тема 3</option> <option value="ссылка">Тема 4</option> <option value="ссылка">Тема 5</option> </select> </form> </div> <div class="slide"> Второй слайд </div> <div class="slide"> Третий слайд </div> </div> </div><!--End// Cлайдер--> </td> <td style="width: 25%;" align="center" valign="top"> <b>Важная информация</b><br/><br/> для всех <br/><br/><b>Погода|Дата</b><br/><br/> прогноз) </td> </tr> </table>
В html-низ:
<script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 196; 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>
Отредактировано Rion Leonheart (Сб, 17 Мар 2012 00:55:44)
Поделиться74Сб, 17 Мар 2012 01:57:30
Searlight,
обновляете html-верх:
<!-- clickability categories :D --> <style id="Hidecategor">#pun-index .category{display:none}</style><script> var st00="<style>#pun-index #pun-category",st02=".category{display:block!important;}</style>"; var a=document.URL,b=a.replace('http://'+location.hostname+'/=&pun-category',''); if( a!=b){ $("#Hidecategor").after(st00+b+st02);} else $("#Hidecategor").replaceWith(""); $(document).ready(function(){var c='<a href="http://'+location.hostname+'/=&'; $(".category").each(function(){var L=$(this).attr("id"),L1=$(this).find("h2 span:last"); L1.html(c+L+'" ><span style="color:'+L1.css("color")+';">'+L1.text()+'</span></a>') ;});;}) </script><!-- //End-/clickability categories :D --> <!--Полупрозрачность Банеров Ч1--> <style type="text/css"> .mybb_bs, #aswift_2_anchor, #aswift_3_anchor, #aswift_0_anchor { filter: alpha(opacity=40) !important; opacity: 0.4 !important; -moz-opacity: 0.4 !important; -khtml-opacity: 0.4 !important; } .mybb_bs:hover, #aswift_2_anchor:hover, #aswift_3_anchor:hover, #aswift_0_anchor:hover { filter: alpha(opacity=100) !important; opacity: 1.0 !important; -moz-opacity: 1.0 !important; -khtml-opacity: 1.0 !important; } </style><!--Полупрозрачность Банеров Ч1--> <style> #pun-announcement h2 {display: none;} #pun-announcement .container {padding-top: 1em} </style> <style> .splLink {width: auto; height: 93px;} .splCont {height: auto; width: 200px; padding: 5px; z-index: 1000; margin-top: 5px; text-align: center; overflow-y: auto; border: 2px solid #B9AA91; background: transparent url(http://savepic.ru/2408258.png); border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} </style>
В объявление:
<center><table style="color: #6e5b38;" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center" valign="top"> <div style="width: 280px; height: 225px; background: transparent url(http://uploads.ru/i/N/d/i/NdiGm.png) top center no-repeat;"> <br/><br/><br/> <div style="width: 93%; height: 170px; padding: 5px; overflow-y: auto;"> текст текст текст текст </div></div> <div style="width: 280px; height: 226px; background: transparent url(http://uploads.ru/i/j/7/0/j70MX.png) top center no-repeat;"> <br/><br/><br/> <div style="width: 93%; height: 170px; padding: 5px; overflow-y: auto;"> текст текст текст текст </div></div> </td> <td align="left" valign="bottom"> <table style="width: 85%; margin-top: 1px;" cellpadding="0" cellspacing="0"> <tr> <td><DIV><div class=splLink><img src="http://uploads.ru/i/W/g/J/WgJy0.png"></div> <DIV style="DISPLAY: none; position: absolute;" class=splCont> Контент первой кнопки </DIV></DIV></td> <td><DIV><div class=splLink><img src="http://uploads.ru/i/6/D/n/6Dn9p.png"></div> <DIV style="DISPLAY: none; position: absolute;" class=splCont> Контент второй кнопки </DIV></DIV></td> <td><DIV><div class=splLink><img src="http://uploads.ru/i/9/D/J/9DJak.png"></div> <DIV style="DISPLAY: none; position: absolute;" class=splCont> Контент третьей кнопки </DIV></DIV></td> </tr> </table> <script type="text/javascript"> $(document).ready(function(){ $('.splLink').click(function(){ $(this).parent().children('div.splCont').toggle('normal'); return false; }); }); </script> <img style="width: 100%;" src="http://uploads.ru/i/i/4/3/i43RS.png"> </td> </tr> </table></center>
И из html-низа удалите кусок:
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").hide();
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).fadeIn();
return false; });
});
</script>
Поделиться75Сб, 17 Мар 2012 02:04:34
Танюшка1482, эх, уточните размеры всех вставляемых картинок - и если кнопки-переключатели тоже картинками - уж кидайте сразу сюда?
Поделиться76Сб, 17 Мар 2012 12:10:51
Rion Leonheart,Спасибо большое!:3
Поделиться77Сб, 17 Мар 2012 15:44:32
форум:
http://antropomorfwolf.mybb.ru/
Рисунок:
http://imm.io/jegg
Поделиться78Сб, 17 Мар 2012 15:46:49
Гладь, прокруточка под "вашим баннером" - подобна бегущей строке по центру?
Поделиться79Сб, 17 Мар 2012 16:56:47
Rion Leonheart
спасибо большое!)
Поделиться80Сб, 17 Мар 2012 20:27:01
Rion Leonheart
Да.
А, еще...это подруга хотела заказать. Забыла кое что сказать: фон "содержимое контейнера" какой нибудь бледной картинкой