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

Страница: « 1 … 4 5 6 7 8 … 50 »

Сообщений 101 страница 120 из 1000

Поделиться1Ср, 3 Окт 2012 22:19:59

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Продолжение темы Таблицы на заказ (14).
Напомню требования:

При заказе таблиц от вас требуется:
1) Эскиз вашей будущей таблицы, сделанный в любом графическом редакторе (Пэинт, Фотошоп и т.д.) - обязательно!
2) Ссылка на ваш форум !Заказы без ссылок приниматься не будут!
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.

Заказы типа "Сделайте: Как там!" также приниматься не будут. Потрудитесь нарисовать макет таблицы самостоятельно.

И помните, чем подробнее опишите то, что нужно, тем точнее получите результат.

Поделиться101Чт, 14 Фев 2013 02:19:36

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Elion Wandom
Ваша таблица:

В окно HTML верх:

Код:

<style type="text/css">
#slideshow {
 margin:0 auto;
 width:866px;
 height:334px;
 position:relative;
}

#slideshow #slidesContainer {
  margin:0 auto;
  width:786px;
  height:334px;
  overflow:auto; /* поддержка прокрутки */
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:766px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  height:334px;
}

.control {
  display:block;
  width:52px; /* ширина стрелок */
  height:36px; /* высота стрелок */
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

#leftControl {
  top: 148px;
  left:0; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */
  background: transparent url(http://s3.uploads.ru/nipbU.png) no-repeat 0 0;
}

#rightControl {
  top: 148px;
  right:0; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */
  background: transparent url(http://s3.uploads.ru/5Gi2Z.png) no-repeat 0 0;
}

.zagolov {
	font-weight : bold;
	font-size : 13px;
}
</style>

В окно Объявления

Код:

<div align="center" style="width: 870px;">
<!-- Начало слайдера -->
<div id="slideshow">
    <div id="slidesContainer">
<!-- Первый слайд -->
	  <div class="slide">
	  <div align="center" style="width: 766px;">
	  <span class="zagolov">News</span><br>
Текст текст текст текст<br>
все по центру
	  </div>
      </div>
<!-- Второй слайд -->
	  <div class="slide">
	  <span class="zagolov">Links</span><br>
<!-- Таблица со ссылками -->
<table cellspacing="2" cellpadding="2" border="0" width="766">
<tr>
    <td align="center" valign="top" style="width: 34%;">
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	</td>
    <td align="center" valign="top" style="width: 32%;">
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	</td>
    <td align="center" valign="top" style="width: 34%;">
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	<a href="http://адрес ссылки">Описание ссылки</a><br>
	</td>
</tr>
</table>
<!-- Конец таблицы со ссылками -->
      </div>
<!-- Третий слайд -->
	  <div class="slide">
        <span class="zagolov">In game</span><br>
<!-- Таблица В Игре -->
<table cellspacing="2" cellpadding="2" border="0" width="766">
<tr>
    <td align="center" style="width: 50%;" valign="top">
<span class="zagolov">Погода/Время</span><br>
Текст текст текст текст погода и время
	</td>
    <td align="center" style="width: 50%;" valign="top">
<span class="zagolov">Квесты</span><br>
<a href="http://адрес ссылки">Описание ссылки</a><br>
<a href="http://адрес ссылки">Описание ссылки</a><br>
<a href="http://адрес ссылки">Описание ссылки</a><br>
<a href="http://адрес ссылки">Описание ссылки</a><br>
	</td>
</tr>
</table>
<!-- Конец таблицы В Игре -->
      </div>
<!-- Четвертый слайд -->
	  <div class="slide">
        <span class="zagolov">Admins</span><br>
<!-- Таблица администрации -->
<table cellspacing="2" cellpadding="2" border="0" width="766">
<tr>
    <td align="center" valign="top" style="width: 50%;">
<span class="zagolov">Главный Администратор</span><br>
<img src="http://адрес картинки" alt="" width="120" height="120" border="0">
	</td>
    <td align="center" valign="top" style="width: 50%;">
<span class="zagolov">Главный Модератор</span><br>
<img src="http://адрес картинки" alt="" width="120" height="120" border="0">
	</td>
</tr>
<tr>
    <td align="center" valign="top">
<span class="zagolov">Администраторы</span><br>
<img src="http://адрес картинки" alt="" width="120" height="120" border="0">
<img src="http://адрес картинки" alt="" width="120" height="120" border="0">
	</td>
    <td align="center" valign="top">
<span class="zagolov">Модераторы</span><br>
<img src="http://адрес картинки" alt="" width="120" height="120" border="0">
<img src="http://адрес картинки" alt="" width="120" height="120" border="0">
	</td>
</tr>
</table>
<!-- Конец таблицы администрации -->
<br>
<div align="center">Подробнее в <a href="http://адрес ссылки">описание ссылки</a></div>


      </div>
<!-- Пятый слайд -->
	  <div class="slide">
        <span class="zagolov">Partners</span><br>
<!-- Таблица Партнеров -->
<table cellspacing="2" cellpadding="2" border="0" width="766">
<tr>
    <td align="center" style="width: 50%;" valign="top">
<span class="zagolov">Друзья</span><br>
Баннер<br>
Баннер<br>
Баннер<br>
Баннер<br>
Баннер<br>
Баннер<br>
	</td>
    <td align="center" style="width: 50%;" valign="top">
<span class="zagolov">Топы</span><br>
Баннер<br>
Баннер<br>
Баннер<br>
	</td>
</tr>
</table>
<!-- Конец таблицы Партнеров -->
      </div>
   </div>
</div>
<!-- Конец слайдера -->
</div>

В окно HTML низ

Код:

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 766;
  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>

Поделиться102Чт, 14 Фев 2013 18:41:11

Автор: Лесси
Заслуженный
Зарегистрирован: Чт, 27 Дек 2012
Сообщений: 116
Уважение: +2
Позитив: +26
Последний визит:
Пт, 28 Авг 2015 16:43:11

Здраствуйте! Хочу попросить сделать такую табличку:
1)

Эскиз

2) Ссылка - Волчий Взгляд
3) Черные прямоугольники - границы текста.
Там, где написано "Заголовок", я хотела бы что при нажатии на закладку(кнопку) появлялись разные навания. Если так можно, прошу сделать.
Закладки - это кнопки (их должно быть 7 - та, что с крестиком не считатся). Нажимаешь и выплывает определенный текст.

Фон

Ссыка на картинку - Ссылка

Какое будет содержание закладок(сверху-вниз):
Первая закладка - приветствие. Там просто текст.
Вторая закладка - погода. На левой странице должна быть картинка, а под ней - текст. На правой странице должно быть название, картинка и текст.

Вот так:

Третья закладка - Задания. Просто текст.

Можно ли сделать, чтобы когда открывалась администрация (четвертая закладка) и лучшие игроки(пятая закладка) аватарки волков были вот в таких рамках - (аватар вставляется вместо волка на оранжевом фоне), а пока аватар не вставлен, такие же картинки стояли там?

Вот так:

Это было бы просто замечательно!
Ссылка на картинку - http://s2.uploads.ru/Pv56i.jpg
При нажатии на картинку она появляется на левой странице, а информация о ней - на правой.

Вот так:

Шестая закладка - Навигация. И так понятно, что тут будут ссылки.
Седьмая закладка - баннеры.

И скажите пожалуйста, если какой нибудь очень-очень хороший человек сделает такое, где можно будет получить код? Их сюда выкладывают?

Поделиться103Чт, 14 Фев 2013 21:59:17

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Лесси
Изготовление такой таблицы по сложности занимает много времени, не день и не два.
Саму верстку сделать можно. Но проблема как раз в скрипте, который Вы обозначили как:

При нажатии на картинку она появляется на левой странице, а информация о ней - на правой.

Если уважаемый Deff заглянет сюда и поможет с таким хитрым скриптом, то можно попробовать сделать такую таблицу, правда это будет не быстро.
А по аватарам Вы лучше обратиратесь на этот форум http://forumdts.org
Там Вам могут помочь с дизайном аватаров и рамок.

Отредактировано Кофеман (Чт, 14 Фев 2013 22:02:57)

Поделиться104Пт, 15 Фев 2013 13:20:03

Автор: Лесси
Заслуженный
Зарегистрирован: Чт, 27 Дек 2012
Сообщений: 116
Уважение: +2
Позитив: +26
Последний визит:
Пт, 28 Авг 2015 16:43:11

Кофеман
Если у кого-нибудь есть время и желание сделать для меня такое, то я могу ждать сколько потребуется.

При нажатии на картинку она появляется на левой странице, а информация о ней - на правой.

А если исключить этот элемент? Можно ли тогда сделать, чтобы при наведении курсором на картинку рядом с ним появлялся текст?

Поделиться105Пт, 15 Фев 2013 16:20:53

Автор: Bellona
Заслуженный
Зарегистрирован: Сб, 15 Дек 2012
Сообщений: 12
Уважение: 0
Позитив: 0
Последний визит:
Ср, 10 Мар 2021 01:34:57

Мне очень-очень актуальна!
Вот она если чего, моя табличка

Поделиться106Пт, 15 Фев 2013 18:37:57

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Лесси написал(а):

А если исключить этот элемент? Можно ли тогда сделать, чтобы при наведении курсором на картинку рядом с ним появлялся текст?

Это вариант легче и реализуем. Тогда можно пробовать делать. Но, для точности, мне нужен фон такой, в каком виде он встанет на форум, с прозрачностью картинки и т.д. Чтоб точно подогнать все именно под Ваши странички в книге и закладки.

Bellona
В выложенном Вами исходнике фотошопа размеры брать за реальные, такие как будут на форуме? У Вас форум закрыт на профилактику, не вижу размера тела форума.

Поделиться107Пт, 15 Фев 2013 20:20:17

Автор: Bellona
Заслуженный
Зарегистрирован: Сб, 15 Дек 2012
Сообщений: 12
Уважение: 0
Позитив: 0
Последний визит:
Ср, 10 Мар 2021 01:34:57

Кофеман
Извините, уже открыла! И да, в исходнике делала реальные размеры

Поделиться108Пт, 15 Фев 2013 23:24:13

Автор: Лесси
Заслуженный
Зарегистрирован: Чт, 27 Дек 2012
Сообщений: 116
Уважение: +2
Позитив: +26
Последний визит:
Пт, 28 Авг 2015 16:43:11

Кофеман
Все сделаю и заново выложу.

Поделиться109Сб, 16 Фев 2013 11:35:20

Автор: Bakanishi
Заслуженный
Зарегистрирован: Чт, 17 Фев 2011
Сообщений: 137
Уважение: 0
Позитив: +6
Последний визит:
Вт, 2 Июн 2015 00:46:06

мне актуальна, сам я увы не разберусь точно

Поделиться110Сб, 16 Фев 2013 17:08:18

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Bakanishi написал(а):

Важный момент. Все кнопочки будут картинками (я потом сам вставлю), а все границы невидимыми. И при загрузке страницы должно отображаться открытой первая кнопка "Мир" и ее первая подкнопка "Айлей". Тоесть приветствие на страничке всегда должно быть сразу.

Bakanishi, собственно талица сложная, особенно учитывая количество кнопок с переключением, а так же - Ваше желание вставлять картинки кнопок самому. Заниматься потом подгонкой отдельно, когда Вы начнете вставлять картинки и таблица разъезжаться начнет, скажу по правде - не хочется.
Но это не главное. Главное то, что пока нет скрипта, который обрабатывал бы активную вкладку меню внутри активного пункта меню, что выше уровнем. Если такой скрипт будет, тогда можно пробовать что-то делать.

Поделиться111Вс, 17 Фев 2013 02:24:59

Автор: Bakanishi
Заслуженный
Зарегистрирован: Чт, 17 Фев 2011
Сообщений: 137
Уважение: 0
Позитив: +6
Последний визит:
Вт, 2 Июн 2015 00:46:06

Кофеман
Сложная. Но было бы очень удобно. Ладно, спасибо за ответ. А если без вкладок второго уровня? Просто я сам код подобной нашел тут, но надо чтобы окно не выплывало а уже было фиксированное, а выплавал сам текст, сменялся при нажатии на кнопку.

Поделиться112Вт, 19 Фев 2013 03:21:41

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Bellona
Ваша таблица

В окно ХТМЛ верх

Код:

<style type="text/css">
#slideshow {
 margin:0 auto;
 width:900px;
 height:337px;
 position:relative;
}

#slideshow #slidesContainer {
  margin:0 auto;
  width:718px;
  height:337px;
  overflow:auto; /* поддержка прокрутки */
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:698px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  height:337px;
}

.control {
  display:block;
  width:74px; /* ширина стрелок */
  height:60px; /* высота стрелок */
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

#leftControl {
  top: 148px;
  left:0; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */
  background: transparent url(http://savepic.org/2831689.png) no-repeat 0 0;
}

#rightControl {
  top: 148px;
  right:0; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */
  background: transparent url(http://savepic.org/2821449.png) no-repeat 0 0;
}


</style>

В окно ХТМЛ низ

Код:

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 718;
  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>

В окно Объявления

Код:

<div style="width: 900px; height: 400px; background: url(http://savepic.org/2882889.png) no-repeat center center; margin-left: 4%;">
<!-- С лайдер контент -->
<div id="slideshow">
    <div id="slidesContainer">
<!-- Первый слайд -->
	  <div class="slide" style="background: url(http://savepic.org/2878792.png) no-repeat center center;">
<!-- Админсостав -->
<div align="center" style="overflow-y: auto; overflow-x: hidden; padding: 5px 3px 3px 3px; width: 150px; height: 200px; position: relative; left:25px; top:83px; float: left;">
<a href="ссылка на профиль"><img src="адрес картинки авки" alt="" width="40" height="40" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на профиль"><img src="адрес картинки авки" alt="" width="40" height="40" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на профиль"><img src="адрес картинки авки" alt="" width="40" height="40" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на профиль"><img src="адрес картинки авки" alt="" width="40" height="40" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на профиль"><img src="адрес картинки авки" alt="" width="40" height="40" border="0" style="margin: 0 2px 2px 0;"></a>
</div>
<!-- Текст приветствия -->
<div align="center" style="overflow-y: auto; overflow-x: hidden; padding: 3px; width: 170px; height: 182px; position: relative; left:113px; top:95px; float: left;">
Тут будет текст приветствия
прокрутка будет появляться автоматически
</div>
<!-- Баннеры -->
<div align="center" style="overflow-y: auto; overflow-x: hidden; padding: 3px; width: 150px; height: 200px; position: relative; left:203px; top:83px;">
<a href="ссылка на банер"><img src="картинка баннера" alt="" width="88" height="36" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на банер"><img src="картинка баннера" alt="" width="88" height="36" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на банер"><img src="картинка баннера" alt="" width="88" height="36" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на банер"><img src="картинка баннера" alt="" width="88" height="36" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на банер"><img src="картинка баннера" alt="" width="88" height="36" border="0" style="margin: 0 2px 2px 0;"></a>
<a href="ссылка на банер"><img src="картинка баннера" alt="" width="88" height="36" border="0" style="margin: 0 2px 2px 0;"></a>
</div>

      </div>
<!-- Второй слайд -->
	  <div class="slide" style="background: url(http://savepic.org/2875720.png) no-repeat center center;">
<!-- Новости -->
<div align="center" style="overflow-y: auto; overflow-x: hidden; padding: 5px 3px 3px 3px; width: 150px; height: 200px; position: relative; left:25px; top:83px; float: left;">
Здесь мы пишем текст новостей
</div>
<!-- События в игре -->
<div align="center" style="overflow-y: auto; overflow-x: hidden; padding: 3px; width: 170px; height: 182px; position: relative; left:113px; top:95px; float: left;">
Тут будут события в игре
прокрутка будет появляться автоматически
</div>
<!-- Ожидается пост. Здесь пишем очередь постов -->
<div align="center" style="overflow-y: auto; overflow-x: hidden; padding: 3px; width: 150px; height: 200px; position: relative; left:203px; top:83px;">
<br>
<a href="ссылка на ник">Ник</a><br>
<a href="ссылка на ник">Ник</a><br>
<a href="ссылка на ник">Ник</a><br>
<a href="ссылка на ник">Ник</a><br>
<a href="ссылка на ник">Ник</a><br>
<a href="ссылка на ник">Ник</a><br>
<a href="ссылка на ник">Ник</a><br>
</div>

      </div>
<!-- Третий слайд -->
	  <div class="slide" style="background: url(http://savepic.org/2881864.png) no-repeat center center;"">
<!-- Акции -->
<div align="center" style="overflow-y: auto; overflow-x: hidden; padding: 5px 3px 3px 3px; width: 150px; height: 200px; position: relative; left:25px; top:83px; float: left;">
<a href="адрес ссылки">Ссылка</a><br>
<a href="адрес ссылки">Ссылка</a><br>
<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="overflow-y: auto; overflow-x: hidden; padding: 3px; width: 170px; height: 182px; position: relative; left:113px; top:95px; float: left;">
<div align="center" style="width: 100%; height: 60px;">
Здесь будет погодный ротатор
</div>
<div align="center" style="width: 100%; height: 74px; margin-top: 40px;">
здесь будет время
</div>
</div>
<!-- Навигация -->
<div align="center" style="overflow-y: auto; overflow-x: hidden; padding: 3px; width: 150px; height: 200px; position: relative; left:203px; top:83px;">
<a href="адрес ссылки">Ссылка</a><br>
<a href="адрес ссылки">Ссылка</a><br>
<a href="адрес ссылки">Ссылка</a><br>
<a href="адрес ссылки">Ссылка</a><br>
<a href="адрес ссылки">Ссылка</a><br>
<a href="адрес ссылки">Ссылка</a><br>
<a href="адрес ссылки">Ссылка</a><br>
</div>
	  
	  
      </div>
   </div>
</div>
<!-- Конец слайдера -->
<!-- Смена цитат -->
<div style="position: relative; width: 522px; height: 35px; margin-top: 13px; margin-left: 190px; color: #fff; text-align: right;">текст цитат пишем тут</div>
<!-- Конец цитат-->
</div>

Графику я разделил как нужно и вставил в код Вашей таблицы, загрузив на savepic.

Поделиться113Вт, 19 Фев 2013 03:23:45

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Bakanishi написал(а):

Кофеман
Сложная. Но было бы очень удобно. Ладно, спасибо за ответ. А если без вкладок второго уровня? Просто я сам код подобной нашел тут, но надо чтобы окно не выплывало а уже было фиксированное, а выплавал сам текст, сменялся при нажатии на кнопку.

Bakanishi
Не обещаю, что быстро что-то выйдет. попробовать можно, но времени уйдет уйма на подгонку.

Поделиться114Вт, 19 Фев 2013 05:21:56

Автор: shiki-po
Заслуженный
Зарегистрирован: Чт, 1 Дек 2011
Сообщений: 6
Уважение: 0
Позитив: 0
Пол: Женский
Последний визит:
Сб, 16 Мар 2013 15:00:27

1) http://i53.fastpic.ru/big/2013/0219/d9/ … de7fd9.png
2) Ссылка
3) таблица в две колонки, которые одинаковы по ширине и длине. две внутренние колонки в одной из главных равны друг другу.
не хочу чтобы сбоку таблицы появлялась прокрутка, если слишком много информации вместить. пусть просто увеличивается в длину.
картинки в первой колонке тоже кликабельны и при наведение отображается текст.

Отредактировано shiki-po (Вт, 19 Фев 2013 05:23:32)

Поделиться115Вт, 19 Фев 2013 19:02:01

Автор: Bellona
Заслуженный
Зарегистрирован: Сб, 15 Дек 2012
Сообщений: 12
Уважение: 0
Позитив: 0
Последний визит:
Ср, 10 Мар 2021 01:34:57

Кофеман
Огромное спасибо!!!

Поделиться116Ср, 20 Фев 2013 14:59:44

Автор: Камели
Заслуженный
Зарегистрирован: Ср, 23 Янв 2013
Сообщений: 75
Уважение: +1
Позитив: +5
Пол: Женский
Последний визит:
Вт, 14 Май 2013 07:50:15

Подобный запрос был в посте № 64, но я как-то не нашла готового результата. Может, плохо искала?

1) Эскиз будущей таблицы:

2) Ссылка на форум - http://fullmoon.winbb.ru/
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.:
Прямая черта на эскизе - есть граница, пунктирная - нет границы.
№ 1, 2, 3, 4, 5 - всплывающие окна. Имеют границы. Являются картинками.
№ 6, 7, 8 - не имеют границ.
№6 - текст, текст, текст и еще раз - текст по-центру
№7 - меняющиеся по кругу картинки. 4 картинки одного размера (подберу их, естественно, сама)
№8 - аналогично №6. Такой же ширины.

Отредактировано Камели (Ср, 20 Фев 2013 15:02:06)

Поделиться117Ср, 20 Фев 2013 20:21:47

Автор: *Bur Boni*
Заслуженный
Зарегистрирован: Пн, 14 Май 2012
Сообщений: 57
Уважение: 0
Позитив: +4
Пол: Мужской
Последний визит:
Вт, 16 Сен 2014 13:20:29

Здравствуйте помогите с таблицей?
Не представляю как сделать, может тут помогут.
Вот сайт куда я установлю таблицу.

Куда установить таблицу?

Что я хочу получить?
Мне надо что бы перешелкивалась по стрелочка, нажал она першла на другую страничку.
Надеюсь понятно.

Вот сидбар

<div id="sidebar">
<center><br/>
<b>Добро пожаловать в Увлекательную игру, под названием Монополия!</b>
<br/>
Игра несет в себе, развлекательный характер
<b>Монополия:</b><br/>
<a href="http://hogwartsavalon.mybb.ru/profile.php?id=2"><img src="http://s2.uploads.ru/eCNSK.png" border="0" title="Авалон Стрейз - Директор."></a>
<a href="http://hogwartsavalon.mybb.ru/"><img src="http://s3.uploads.ru/Lz5AU.png" border="0" title="Заместитель Директора"></a>
<br/>

<center><b>Быстрое меню по игре:</b><br/>
<style>
.nav {margin: 0px;}
.nav a{display: block; color:#000000; background-color: #fefefe; text-align: center; width: 150px; padding: 0px; margin: 1px; text-decoration: none}
.nav a:hover{background-color: #5a5351; color:#210100; text-shadow: 0px 0px 8px #ffffff;}
</style>

<table style="width: 96%" align="center">
<tr>
<td align="center" valign="top">
<div class="nav">
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=2">Новсти</a>
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=3">Общий зал</a>
<a href="http://hogwartsavalon.mybb.ru/userlist.php">Пользователи</a>
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=4">Предложение</a>
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=5">Праздники</a>
</div>
</td>
<td align="center" valign="top">
<div class="nav">
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=6">Кабинет Директора</a>
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=10">Кабинеты</a>
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=12">Замок</a>
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=14">Болталка</a>
<a href="http://hogwartsavalon.mybb.ru/viewforum.php?id=13">Окрестности</a>

</div>
</td>
</tr>
</table>
</center>
<br/>
<br/>
<center>
</center>
</div>

<style>
#sidebar {
background-color: #;
width: 345px;
height: 355px;
padding-left: 20px;
position: absolute;
top: 120px;
float: left;

border-right:0px solid #f0f0f0; border-left: 0px solid #f0f0f0; }
</style>

Стрелочки вставить любые на ваш вкус я их потом переделаю.
Спасибо заранее.

Поделиться118Ср, 20 Фев 2013 22:21:13

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

*Bur Boni*
Спозиционировать таблицу в нужное место - это больше для темы "Общие вопросы по заказу таблиц". И не является проблемой. Это можно сделать.
Но мне не ясно, что вставлять и при чем тут код сайдбара, который Вы привели в своем сообщении.
Если Вы хотите, чтоб содержимое менялось стрелками, то Вам нужен не сайдбар а слайдер.
в общем, лучше всего, оформите заказ чтоб было четко видно содержимое слайдов. Для примера пост Таблицы на заказ (15)
Посмотрите как Bellona оформила эскизы слайдов.

А уже потом будем двигать таблицу в нужное место.

Поделиться119Ср, 20 Фев 2013 23:54:23

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

shiki-po
Ваша таблица

В окно HTML верх

Код:

<style type="text/css">
.proz img{opacity:0.5; filter:alpha(opacity=50);}
.proz img:hover {opacity:1; filter:alpha(opacity=100);}
#tablet td a:hover {background-color: transparent!important;}
.mou {float: left;}

/* Стиль всплывающего описания*/
#part1,#part2,#part3,#part4,#part5 {
z-index: 2;
position: absolute;
height: auto;
width: 120px;
border: 1px dotted #7769A4;
background-color: #9F7FA4;
font-size: 10px;
margin-left: -40px;
margin-top: 5px;
visibility: hidden;
box-shadow:4px 4px 6px #000;
-webkit-box-shadow: 4px 4px 6px #000;
-moz-box-shadow: 4px 4px 6px #000;
}
</style>

В окно HTML-низ

Код:

<!-- Скрипт всплывающих пояснений -->
<script language="JavaScript">
function part1ON() {document.getElementById("part1").style.visibility='visible'}
function part2ON(){document.getElementById("part2").style.visibility='visible'}
function part3ON(){document.getElementById("part3").style.visibility='visible'}
function part4ON(){document.getElementById("part4").style.visibility='visible'}
function part5ON(){document.getElementById("part5").style.visibility='visible'}
function part1OFF() {document.getElementById("part1").style.visibility='hidden'}
function part2OFF(){document.getElementById("part2").style.visibility='hidden'}
function part3OFF(){document.getElementById("part3").style.visibility='hidden'}
function part4OFF(){document.getElementById("part4").style.visibility='hidden'}
function part5OFF(){document.getElementById("part5").style.visibility='hidden'}
</script>

В окно Объявления

Код:

<table cellspacing="1" cellpadding="1" border="0" style="width: 100%;">
<tr>
    <td align="center" valign="top" style="width: 50%!important;">
<!--- Левая колонка  --->
<div align="right" style="text-align: right; width: 100%; font-size: 10px; margin-top: 5px; margin-bottom: 5px;">
Текст по правому краю. Левая колонка. Шрифт 10 px
Текст по правому краю. Левая колонка. Шрифт 10 px
Текст по правому краю. Левая колонка. Шрифт 10 px
Текст по правому краю. Левая колонка. Шрифт 10 px
</div>
<div align="center" style="width: 100%; padding: 5px;" class="proz">
<img src="адрес картинки левая колонка" alt="" width="40" height="40" border="0" style="padding-right: 5px;">
<img src="адрес картинки левая колонка" alt="" width="40" height="40" border="0" style="padding-right: 5px;">
<img src="адрес картинки левая колонка" alt="" width="40" height="40" border="0" style="padding-right: 5px;">
<img src="адрес картинки левая колонка" alt="" width="40" height="40" border="0" style="padding-right: 5px;">
<img src="адрес картинки левая колонка" alt="" width="40" height="40" border="0" style="padding-right: 5px;">
</div>
<div align="center" style="width: 100%; padding: 8px; margin-top: 5px; margin-bottom: 5px;">
<a href="адрес ссылки">Описание ссылки</a> &brvbar;&brvbar;
<a href="адрес ссылки">Описание ссылки</a> &brvbar;&brvbar;
<a href="адрес ссылки">Описание ссылки</a> &brvbar;&brvbar;
<a href="адрес ссылки">Описание ссылки</a> &brvbar;&brvbar;
<a href="адрес ссылки">Описание ссылки</a> &brvbar;&brvbar;
<a href="адрес ссылки">Описание ссылки</a> &brvbar;&brvbar;
<a href="адрес ссылки">Описание ссылки</a> &brvbar;&brvbar;
</div>
<!--- END Левая колонка  --->
	</td>
    <td align="center" valign="top" style="width: 50%;">
<!--- правая колонка --->
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; margin-top: 3px;" id="tablet">
<tr>
    <td align="center" style="width: 50%;">
<img src="адрес большой картинки справа" alt="Большая картинка" border="0">
	</td>
    <td align="center" style="width: 50%; text-align: center;">
<strong>Лучшие игроки недели</strong><br>

<div align="center" class="mou"><a href="адрес ссылки" onMouseOver="part1ON()" onMouseOut="part1OFF()"><img src="адрес картинки правая колонка" alt="" width="40" height="40" border="0" style="padding-right: 15px; padding-top: 5px;"></a>
<div id="part1" onMouseOver="part1ON()" onMouseOut="part1OFF()">
Здесь всплывающее описание картинки 1
</div></div>
<div align="center" class="mou"><a href="адрес ссылки" onMouseOver="part2ON()" onMouseOut="part2OFF()"><img src="адрес картинки правая колонка" alt="" width="40" height="40" border="0" style="padding-right: 15px; padding-top: 5px;"></a>
<div id="part2" onMouseOver="part2ON()" onMouseOut="part2OFF()">
Здесь всплывающее описание картинки 2
</div></div>
<div align="center" class="mou"><a href="адрес ссылки" onMouseOver="part3ON()" onMouseOut="part3OFF()"><img src="адрес картинки правая колонка" alt="" width="40" height="40" border="0" style="padding-right: 15px; padding-top: 5px;"></a>
<div id="part3" onMouseOver="part3ON()" onMouseOut="part3OFF()">
Здесь всплывающее описание картинки 3
</div></div>
<br>
<div align="center" class="mou" style="margin-left: 28px;"><a href="адрес ссылки" onMouseOver="part4ON()" onMouseOut="part4OFF()"><img src="адрес картинки правая колонка" alt="" width="40" height="40" border="0" style="padding-right: 15px; padding-top: 5px;"></a>
<div id="part4" onMouseOver="part4ON()" onMouseOut="part4OFF()">
Здесь всплывающее описание картинки 4
</div></div>
<div align="center" class="mou"><a href="адрес ссылки" onMouseOver="part5ON()" onMouseOut="part5OFF()"><img src="адрес картинки правая колонка" alt="" width="40" height="40" border="0" style="padding-right: 15px; padding-top: 5px;"></a>
<div id="part5" onMouseOver="part5ON()" onMouseOut="part5OFF()">
Здесь всплывающее описание картинки 5
</div></div>

	</td>
</tr>
</table>
<div align="right" style="text-align: right; width: 100%; font-size: 10px; margin-top: 5px; margin-bottom: 5px;">
Текст по правому краю. Правая колонка. Шрифт 10 px
Текст по правому краю. Правая колонка. Шрифт 10 px
Текст по правому краю. Правая колонка. Шрифт 10 px
Текст по правому краю. Правая колонка. Шрифт 10 px
</div>
<!---  END правая колонка --->
	</td>
</tr>
</table>

Поделиться120Чт, 21 Фев 2013 01:36:34

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Камели
Ваша таблица

В окно HTML верх

Код:

<style>
#mentab td {width: 20%;}
.levcol {width: 100%; padding: 1px;}
#conrotator p{display:none}


 /* Стиль всплывающего меню */
.splLink {width: 164px; height: 44px; border: 1px solid #523324; text-align: center; padding: 2px;}
.splCont {height: auto; width: 260px; background: #917C5E; padding: 5px; z-index: 1000; margin-top: 5px; margin-left: -48px; border: 2px solid #472B1F; font-size: 12px; font-family: Lucida Sans Unicode; text-align: center;}

 /* Тень, Прозрачка и Скругление углов во Всплывающем меню */
.splCont {
    border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;

     box-shadow:0px 5px 14px #8B6C52;
    -webkit-box-shadow:0px 5px 14px #8B6C52;
    -khtml-box-shadow:0px 5px 14px #8B6C52;
    -moz-box-shadow:0px 5px 14px #8B6C52;
    /*text-shadow: #FFFFFF 1px 1px 4px !important;
    color: #color: #000000 !important;*/
    }
 /* Конец Стиля всплывающего меню */
</style>

В окно HTML-низ

Код:

<script language="javascript">
var sek = 4000;  // Время отображения

var Nrout=$("#conrotator p").length;
var i=0;RotatorMycontent(i);

function RotatorMycontent(i) {
$("#conrotator p").hide();
$("#conrotator p").eq(i).show();

j=i+1;if(j>=Nrout){j=0};
timerID = setTimeout("RotatorMycontent(j)",sek);return;}
</script>

В окно Объявления

Код:

<center>
<table align="center" cellspacing="1" cellpadding="1" border="0" style="width: 100%;">
<tr>
    <td align="center">
<!--- Строка выпадающего меню --->
<table align="center" cellspacing="1" cellpadding="1" border="0" style="width: 100%;" id="mentab">
<tr>
    <td align="center">
<!--- Выпадающее меню номер 1 --->
<DIV><div class="splLink"><img src="Ссылка на картинку" alt="Картинка меню 1" name="Картинка меню 1" border="0"></div>
<DIV style="DISPLAY: none; position: absolute;" class="splCont">

Содержимое меню 1

</DIV></DIV>
	</td>
    <td align="center">
<!--- Выпадающее меню номер 2 --->
<DIV><div class="splLink"><img src="Ссылка на картинку" alt="Картинка меню 2" name="Картинка меню 2" border="0"></div>
<DIV style="DISPLAY: none; position: absolute;" class="splCont">

Содержимое меню 2

</DIV></DIV>
	</td>
    <td align="center">
<!--- Выпадающее меню номер 3 --->
<DIV><div class="splLink"><img src="Ссылка на картинку" alt="Картинка меню 3" name="Картинка меню 3" border="0"></div>
<DIV style="DISPLAY: none; position: absolute;" class="splCont">

Содержимое меню 3

</DIV></DIV>
	</td>
    <td align="center">
<!--- Выпадающее меню номер 4 --->
<DIV><div class="splLink"><img src="Ссылка на картинку" alt="Картинка меню 4" name="Картинка меню 4" border="0"></div>
<DIV style="DISPLAY: none; position: absolute;" class="splCont">

Содержимое меню 4

</DIV></DIV>
	</td>
    <td align="center">
<!--- Выпадающее меню номер 5 --->
<DIV><div class="splLink"><img src="Ссылка на картинку" alt="Картинка меню 5" name="Картинка меню 5" border="0"></div>
<DIV style="DISPLAY: none; position: absolute;" class="splCont">

Содержимое меню 5

</DIV></DIV>
	</td>
</tr>
</table>
<!--- END Строка выпадающего меню --->
	</td>
</tr>
<tr>
    <td align="center">
<!--- Строка нижнего содержимого --->
<table cellspacing="1" cellpadding="1" border="0" style="width: 100%;">
<tr>
    <td align="center" valign="top" style="width: 25%;">
	<div align="center" class="levcol">
	
Текст по центру. Левая колонка.
	
	</div>
	</td>
    <td align="center" valign="top" style="width: 50%;">
<!--- Авторотация картинок --->
<div align="center" >
<div id="conrotator" style="width:100%;">
<!-- Ротатор произвольного контента -->
<p><img src="адрес картинки" alt="" border="0"></p>
<p><img src="адрес картинки" alt="" border="0"></p>
<p><img src="адрес картинки" alt="" border="0"></p>
<p><img src="адрес картинки" alt="" border="0"></p>
</div>
</div>
<!--- END Авторотация картинок --->
	</td>
    <td align="center" valign="top" style="width: 25%;">
	<div align="center" class="levcol">
	
Текст по центру. Правая колонка.
	
	</div>
	</td>
</tr>
</table>



<!--- END Строка нижнего содержимого --->
	</td>
</tr>
</table>
</center>

<!--Спойлер - контейнер-->
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

Теперь некоторые инструкции по вставке картинок и настройке:
1. Картинки в меню (Ваши пункты на эскизе 1-5) должны быть размером не более 164х44
2. обратите внимание, что в коде, что в вставляется в Объявление нужно заменить ссылки картинок, которые будут меняться по кругу. Вот тут:

<div id="conrotator" style="width:100%;">

<p><img src="адрес картинки" alt="" border="0"></p>
<p><img src="адрес картинки" alt="" border="0"></p>
<p><img src="адрес картинки" alt="" border="0"></p>
<p><img src="адрес картинки" alt="" border="0"></p>
</div>

т.е. Вы не увидите работу ротации картинок, пока не вставите ссылки на картинки. Желательно чтоб они были одинаковой высоты.

Страница: « 1 … 4 5 6 7 8 … 50 »

Таблицы на заказ (13)	Корзина	Вс, 26 Фев 2012
Таблицы на заказ (14)	Архив	Пн, 1 Окт 2012
Таблицы на заказ (16)	Архив	Пн, 31 Окт 2016
Таблицы на заказ (10)	Корзина	Чт, 6 Янв 2011
Таблицы на заказ (11)	Архив	Сб, 9 Июл 2011

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

Меню навигации

Пользовательские ссылки

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

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

Сообщений 101 страница 120 из 1000

Поделиться1Ср, 3 Окт 2012 22:19:59

Поделиться101Чт, 14 Фев 2013 02:19:36

Поделиться102Чт, 14 Фев 2013 18:41:11

Поделиться103Чт, 14 Фев 2013 21:59:17

Поделиться104Пт, 15 Фев 2013 13:20:03

Поделиться105Пт, 15 Фев 2013 16:20:53

Поделиться106Пт, 15 Фев 2013 18:37:57

Поделиться107Пт, 15 Фев 2013 20:20:17

Поделиться108Пт, 15 Фев 2013 23:24:13

Поделиться109Сб, 16 Фев 2013 11:35:20

Поделиться110Сб, 16 Фев 2013 17:08:18

Поделиться111Вс, 17 Фев 2013 02:24:59

Поделиться112Вт, 19 Фев 2013 03:21:41

Поделиться113Вт, 19 Фев 2013 03:23:45

Поделиться114Вт, 19 Фев 2013 05:21:56

Поделиться115Вт, 19 Фев 2013 19:02:01

Поделиться116Ср, 20 Фев 2013 14:59:44

Поделиться117Ср, 20 Фев 2013 20:21:47

Поделиться118Ср, 20 Фев 2013 22:21:13

Поделиться119Ср, 20 Фев 2013 23:54:23

Поделиться120Чт, 21 Фев 2013 01:36:34

Похожие темы