Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (14)


Таблицы на заказ (14)

Сообщений 61 страница 80 из 1000

61

Доброго времени суток.
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) так же все таблицы и слайдер будут в пределах этого размера соответственно.
Надеюсь все понятно и все есть в описании >_<

0

62

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>

+1

63

Доброго времени суток!
1) --
2) http://forumproba1.rusff.ru/   Далее пойдет сюда - http://tlklost.rusff.ru/
3) Всего окон должно быть 5, которые меняются при нажатии кнопки-стрелки. Дополнительных таблиц в таблице, впрочем как и прокруток не надо. Хотелось бы, что-бы таблица могла трансформироваться по ширине форума (если такое невозможно, то размеры - 860*300). Текст можно выровнять по центру, но не обязательно, ведь выравнивание можно прописать отдельно.
http://blah.7bb.ru/ - примерно то, что требуется. Только размер больше и без прокрутки.

0

64

Rion Leonheart
Огромное спасибо

0

65

Captain Morgan, поставьте себе слайдер, мну подправит.

0

66

Форум
Таблица
Правая стрелка
левая стрелка
Фон в таблице должен быть прозрачным, ширина форума - 800px

0

67

астрал, а какое назначение у этих стрелок? Просто для красоты?

0

68

Rion Leonheart
Нет, они должны прокручивать таблицу.

0

69

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

0

70

астрал написал(а):

Нет, они должны прокручивать таблицу.

Поясните - куда? Смысл прокручивать таблицу из трех колонок, которые и так видны?

Отредактировано Rion Leonheart (Чт, 15 Мар 2012 22:50:31)

0

71

Добрый день... В общем я чего-то тут намудрила, надеюсь не запутаю окончательно.
Мне нужна таблица с пятью переключающимися вкладками.
Вкладка 1
Вкладка 2
Вкладка 3
Вкладка 4
В пятой ничего интересного нет, делать ее не стала)
http://eldorado.rusff.ru/ - ссылка на форум
На макете нарисовала у таблицы границы, но потом решила что их делать не стоит.
Все остальное вроде как указано на картинках)

0

72

Rion Leonheart написал(а):

Поясните - куда? Смысл прокручивать таблицу из трех колонок, которые и так видны?

прокручиваться должна только центральная колонка:--

0

73

астрал,

обновите 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)

0

74

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>

0

75

Танюшка1482, эх, уточните размеры всех вставляемых картинок - и если кнопки-переключатели тоже картинками - уж кидайте сразу сюда?

0

76

Rion Leonheart,Спасибо большое!:3

0

77

форум:
http://antropomorfwolf.mybb.ru/
Рисунок:
http://imm.io/jegg

0

78

Гладь, прокруточка под "вашим баннером" - подобна бегущей строке по центру?

+1

79

Rion Leonheart
спасибо большое!) --

0

80

Rion Leonheart
Да.
А, еще...это подруга хотела заказать. Забыла кое что сказать: фон "содержимое контейнера" какой нибудь бледной картинкой

0


Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (14)