Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Полезные ссылки

Каталог: Cкрипты Передача прав Каталог: Оформление Перенос Баллов FAQ: Дизайн/Css Свой
домен FAQ:
CSS-коды Откат форумов Раскрутка форума Платные услуги

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

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

Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц

FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц

Страница:   1 … 42 43 44 45 46 … 50  

Сообщений 861 страница 880 из 1000

861

  • Автор: kozhilya
  • kozhilya
  • Откуда: Москва
  • Зарегистрирован: 17.09.2012
  • Сообщений: 289
  • Уважение: +88
  • Позитив: +12
  • Пол: Мужской
  • Провел на форуме:
    5 дней 16 часов
  • Последний визит:
    18.02.2023 16:48:59

Заказы сделаю на выходных.

Радужная Звезда
Эм... А гимн куда пихать?

+1

862

  • Автор: Радужная Звезда
  • Зарегистрирован: 14.01.2013
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +16
  • Провел на форуме:
    17 часов 27 минут
  • Последний визит:
    29.08.2015 12:34:49
kozhilya написал(а):

Заказы сделаю на выходных.

Радужная Звезда
Эм... А гимн куда пихать?

Где картинки на таблице написано.

+1

863

  • Автор: Ruanie
  • Ruanie
  • Зарегистрирован: 27.01.2013
  • Сообщений: 8
  • Уважение: 0
  • Позитив: +5
  • Пол: Женский
  • Возраст: 28 [1996-02-01]
  • Провел на форуме:
    2 часа 25 минут
  • Последний визит:
    30.05.2013 16:25:29
Ruanie написал(а):

859

актуально.

0

864

  • Автор: Falou
  • Falou
  • Зарегистрирован: 07.06.2012
  • Сообщений: 13
  • Уважение: 0
  • Позитив: 0
  • Провел на форуме:
    5 часов 13 минут
  • Последний визит:
    07.02.2019 04:44:57

1. http://pitermwin.rolka.su/
2. Я точно не знаю, не автор дизайна, но с автором могу связаться.
3. Таблица нам нужна такая как тут: http://catteo.rusff.me/ Но, когда код вставляли на тот форум (на котором диз делается), всё куда-то благополучно летело. В итоге, видимо какая-то загвоздка с кодом.

В общем и целом, нам могут помочь в данном вопросе?  :flirt:

0

865

  • Автор: Loki-Lion
  • Loki-Lion
  • Откуда: Санкт-Петербург
  • Зарегистрирован: 17.09.2012
  • Сообщений: 99
  • Уважение: +10
  • Позитив: +28
  • Пол: Женский
  • Провел на форуме:
    2 дня 16 часов
  • Последний визит:
    07.11.2014 20:54:20

<Не в ту тему>

Отредактировано Loki-Lion (14.03.2013 16:36:26)

0

866

  • Автор: Флорида
  • Флорида
  • Зарегистрирован: 13.03.2013
  • Сообщений: 15
  • Уважение: 0
  • Позитив: +2
  • Провел на форуме:
    8 часов 14 минут
  • Последний визит:
    11.11.2015 14:05:27

А можно мне таблицу:
http://s2.uploads.ru/t/13RGs.png

Извините, а куда вставлять?

0

867

  • Автор: kozhilya
  • kozhilya
  • Откуда: Москва
  • Зарегистрирован: 17.09.2012
  • Сообщений: 289
  • Уважение: +88
  • Позитив: +12
  • Пол: Мужской
  • Провел на форуме:
    5 дней 16 часов
  • Последний визит:
    18.02.2023 16:48:59

Ruanie
Приношу извинение за задержку. Таблица будет сегодня в течении дня.

Falou
Можете расчитывать. Вот только с элементами дизайна, видимо , будете работаться сами.

Радужная Звезда
Флорида
Заполните заявку по форме.

0

868

  • Автор: Kisasian
  • Kisasian
  • Зарегистрирован: 11.10.2012
  • Сообщений: 65
  • Уважение: +1
  • Позитив: +6
  • Пол: Мужской
  • Возраст: 36 [1988-01-01]
  • Провел на форуме:
    1 день 6 часов
  • Последний визит:
    25.12.2015 10:28:54

у меня все просто..

1. ссылка на форум тестовик http://bounty.mybb.ru

2. ширина таблицы размер каждого контейнера без учета верхних кнопок сделайте, пожалуйста height: 300px; width: 700px;

3. шаблон таблицы:

++

http://s2.uploads.ru/t/80EIC.jpg
http://s3.uploads.ru/t/Nwr4y.jpg
http://s2.uploads.ru/t/mY6x8.jpg
http://s2.uploads.ru/t/qHkZf.jpg

4. границы у таблицы: как на рисунке, с закругленными краями.

5. доп.элементы: в принципе, нужен только шаблон таблицы, под нужные размеры уже будем подгонять самостоятельно. На рисунке попытались максимально обозначить, что необходимо.

- Толщина всех границ - 1px
- Фон внутренних окон везде прозрачный

Отредактировано Kisasian (20.03.2013 09:20:42)

0

869

  • Автор: kozhilya
  • kozhilya
  • Откуда: Москва
  • Зарегистрирован: 17.09.2012
  • Сообщений: 289
  • Уважение: +88
  • Позитив: +12
  • Пол: Мужской
  • Провел на форуме:
    5 дней 16 часов
  • Последний визит:
    18.02.2023 16:48:59

Ruanie
Мдя.

Код:
<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>

<style>
#pun-announcement {
	text-align: center;
}
#pun-announcement td {
	vertical-align: top;
}
#pun-announcement .border {
	border: 1px solid black;
	padding: 5px 0;
}
#pun-announcement #slaider div {
	width: 240px;
	margin-bottom: 10px;
}
#pun-announcement .nav li {
	display: inline;
	width: 40%;
}
#pun-announcement .nav li a {
	display: inline-block;
	text-decoration: none;
	background-color: rgba(127, 127, 127, 0.5);
	color: white;
	width: inherit;
	height: 15px;
	margin: 5px;
}
#pun-announcement li a:hover {
	background-color: rgba(127,127,127,0.8);
	color: white;
}

#pun-announcement h3 {
	font: bold 15px 'Cambria';
	margin-bottom: 5px;
}
#slider {
	margin: 0 auto;
}
#slider #main {
	height: 200px;
	width: 250px;
	margin: 0;
}
#slider #prev, #slider #next {
	vertical-align: middle;
}
#slider .bx-window {
	border: 1px solid black;
}
a.bx-prev, a.bx-next {
	display: inline-block;
	pointer: cursor;
	margin: 0 5px;
	width: 30px;
	height: 25px;
	padding-top: 5px;
	border-radius: 15px;
	background: #374C64;
	font: normal 13px Verdana;
	color: whitesmoke;
	text-decoration: none;
}
a.bx-prev:hover, a.bx-next:hover {
	background: #6289B4;
}
</style>

<table><tr>

<td style="width: 50%;" rowspan="2">
	<table id="slider"><tr><td id="prev"></td>
	<td><div id="main">
	<div>

    Блок 1

	</div>
	<div>

    Блок 2

	</div>
	<div>

    Блок 3

	</div>
	<div>

    Блок 4

	</div>
	</div></td>
	<td id="next"></td>
	</tr></table>
</td>

<td class="nav">
	<ul>
    <li><a href="Адрес">Ссылка 1</a></li>
    <li><a href="Адрес">Ссылка 2</a></li>
    <li><a href="Адрес">Ссылка 3</a></li>
    <li><a href="Адрес">Ссылка 4</a></li>
    <li><a href="Адрес">Ссылка 5</a></li>
    <li><a href="Адрес">Ссылка 6</a></li>
    <li><a href="Адрес">Ссылка 7</a></li>
    <li><a href="Адрес">Ссылка 8</a></li>
	</ul>
</td>
</tr><tr>
<td class="ban">
	Баннеры
</td>

</tr></table>

<script>
$('#slider #main').bxSlider({
	prevSelector: '#slider #prev',
	prevText: '<',
	nextSelector: '#slider #next',
	nextText: '>',
}); 
</script>

Kisasian

Код:
<style>
#pun-announcement {
	text-align: center;
}
.buttons a {
	display: inline-block;
	height: 30px;
	width: 100px;
	margin: 0 20px 10px 20px;
	border: 1px solid #826E67;
	background: transparent;
	border-radius: 15px;
}
.buttons a:hover, .buttons a.active {
	background: lightgray;
	color: black;
	cursor: pointer;
}
.buttons a span {
	margin: 6px;
	display: block;
}

.content {
	height: 300px;
	width: 700px;
	padding: 20px;
	border-radius: 20px;
	border: 1px solid #826E67;
	margin: auto;
}
.content .cont {
	display: none;
	height: 100%;
}
.content .cont div {
	display: inline-block;
	height: 100%;
	margin: 0 15px;
}
.content .cont div.block {
	display: block;
	margin: 0;
}
.content .cont h3 {
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}
.content .cont h3 + div {
	height: -webkit-calc(100% - 20px);
	height: -moz-calc(100% - 20px);
	height: -o-calc(100% - 20px);
	height: calc(100% - 20px);
	margin-top: 0;
}

.content .bor {
	border: 1px solid #826E67;
}
.content .scr {
	overflow-y: auto;
}
</style>

<div class="buttons">
	<a class="active" alt="1" onclick="toggleAnn(this); return false;"><span>
    Кнопка 1
	</span></a>
	<a alt="2" onclick="toggleAnn(this); return false;"><span>
    Кнопка 2
	</span></a>
	<a alt="3" onclick="toggleAnn(this); return false;"><span>
    Кнопка 3
	</span></a>
	<a alt="4" onclick="toggleAnn(this); return false;"><span>
    Кнопка 4
	</span></a>
</div>

<div class="content">
	<div class="cont" alt="1">
    <div style="width: 45%; position: relative; top: -20px;">
    	<div class="block bor scr">
        Текст 1.1
    	</div>
    </div>
    <div style="width: 45%">
    	<h3>Заголовок 1.2</h3>
    	<div class="block bor scr">
        Текст 1.2
    	</div>
    </div>
	</div>
	<div class="cont" alt="2">
    <div style="width: 35%">
    	<h3>Заголовок 2.1</h3>
    	<div class="block bor scr">
        Текст 2.1
    	</div>
    </div>
    <div style="width: 55%">
    	<h3>Заголовок 2.2</h3>
    	<div class="block bor scr">
        Текст 2.2
    	</div>
    </div>
	</div>
	<div class="cont" alt="3">
    <div class="block" style="height: 48%">
    	<div style="width: 30%" class="bor"> Картинка 3.1 </div>
    	<div style="width: 55%" class="bor scr"> Текст 3.1 </div>
    </div>
    <br>
    <div class="block" style="height: 48%">
    	<div style="width: 30%" class="bor"> Картинка 3.2 </div>
    	<div style="width: 55%" class="bor scr"> Текст 3.2 </div>
    </div>
	</div>
	<div class="cont" alt="4">
    <h3>Заголовок 4</h3>
    <div class="block">
    	<div style="width: 20%" class="bor scr">
        Текст 4.1
    	</div>
    	<div style="width: 20%" class="bor scr">
        Текст 4.2
    	</div>
    	<div style="width: 20%" class="bor scr">
        Текст 4.3
    	</div>
    	<div style="width: 20%" class="bor scr">
        Текст 4.4
    	</div>
    </div
	</div>
</div>

<script>
speed = 100;
function toggleAnn(el, first) {
	var prev = $('#pun-announcement .buttons a.active').removeClass((first)? '' :'active').attr('alt'),
    cur = first || $(el).addClass('active').attr('alt');

	if (first)
    $('#pun-announcement .content .cont[alt='+prev+']').show(speed);
	else {
    if (cur != prev) {
    	$('#pun-announcement .content .cont[alt='+prev+']').fadeOut(speed, function() {
        $('#pun-announcement .content .cont[alt='+cur+']').fadeIn(speed);
    	});
    }
	}
}
toggleAnn($('#pun-announcement .buttons a.active')[0], true);
</script>

По вопросам - в ЛС.

+1

870

  • Автор: Kisasian
  • Kisasian
  • Зарегистрирован: 11.10.2012
  • Сообщений: 65
  • Уважение: +1
  • Позитив: +6
  • Пол: Мужской
  • Возраст: 36 [1988-01-01]
  • Провел на форуме:
    1 день 6 часов
  • Последний визит:
    25.12.2015 10:28:54

kozhilya, проверит на компе, и ноуте, в разных браузерах. У меня все ползет.

ссылка на пробник http://testmax.rusff.me/

++

http://s3.uploads.ru/t/7Zg03.jpg
http://s3.uploads.ru/t/bIPm7.jpg

Может задать размеры не в процентах, а в px ? Просто вот сколько бы мы не пытались делать в процентах - таблицы все ползут, уж не знаю в чем причина..

Отредактировано Kisasian (22.03.2013 13:00:53)

0

871

  • Автор: kozhilya
  • kozhilya
  • Откуда: Москва
  • Зарегистрирован: 17.09.2012
  • Сообщений: 289
  • Уважение: +88
  • Позитив: +12
  • Пол: Мужской
  • Провел на форуме:
    5 дней 16 часов
  • Последний визит:
    18.02.2023 16:48:59

Kisasian
Google Chrome: полёт нормальный....
http://clip2net.com/clip/m123035/thumb640/1363964040-clip-130kb.jpg

Но сейчас переведу в px.

0

872

  • Автор: kozhilya
  • kozhilya
  • Откуда: Москва
  • Зарегистрирован: 17.09.2012
  • Сообщений: 289
  • Уважение: +88
  • Позитив: +12
  • Пол: Мужской
  • Провел на форуме:
    5 дней 16 часов
  • Последний визит:
    18.02.2023 16:48:59

Kisasian

Код:
<style>
#pun-announcement {
	text-align: center;
}
.buttons a {
	display: inline-block;
	height: 30px;
	width: 100px;
	margin: 0 20px 10px 20px;
	border: 1px solid #826E67;
	background: transparent;
	border-radius: 15px;
}
.buttons a:hover, .buttons a.active {
	background: lightgray;
	color: black;
	cursor: pointer;
}
.buttons a span {
	margin: 6px;
	display: block;
}

.content {
	height: 300px;
	width: 700px;
	padding: 20px;
	border-radius: 20px;
	border: 1px solid #826E67;
	margin: auto;
}
.content .cont {
	display: none;
	height: 300px;
}
.content .cont div {
	display: inline-block;
	height: 300px;
	margin: 0 15px;
}
.content .cont div.block {
	display: block;
	margin: 0;
}
.content .cont[alt=3] div {
	height: 146px;
}
.content .cont h3 {
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}
.content .cont h3 + div {
	height: 280px;
	margin-top: 0;
}

.content .bor {
	border: 1px solid #826E67;
}
.content .scr {
	overflow-y: auto;
}
</style>

<div class="buttons">
	<a class="active" alt="1" onclick="toggleAnn(this); return false;"><span>
    Кнопка 1
	</span></a>
	<a alt="2" onclick="toggleAnn(this); return false;"><span>
    Кнопка 2
	</span></a>
	<a alt="3" onclick="toggleAnn(this); return false;"><span>
    Кнопка 3
	</span></a>
	<a alt="4" onclick="toggleAnn(this); return false;"><span>
    Кнопка 4
	</span></a>
</div>

<div class="content">
	<div class="cont" alt="1">
    <div style="width: 45%; position: relative; top: -20px;">
    	<div class="block bor scr">
        Текст 1.1
    	</div>
    </div>
    <div style="width: 45%">
    	<h3>Заголовок 1.2</h3>
    	<div class="block bor scr">
        Текст 1.2
    	</div>
    </div>
	</div>
	<div class="cont" alt="2">
    <div style="width: 35%">
    	<h3>Заголовок 2.1</h3>
    	<div class="block bor scr">
        Текст 2.1
    	</div>
    </div>
    <div style="width: 55%">
    	<h3>Заголовок 2.2</h3>
    	<div class="block bor scr">
        Текст 2.2
    	</div>
    </div>
	</div>
	<div class="cont" alt="3">
    <div class="block">
    	<div style="width: 30%" class="bor"> Картинка 3.1 </div>
    	<div style="width: 55%" class="bor scr"> Текст 3.1 </div>
    </div>
    <br>
    <div class="block">
    	<div style="width: 30%" class="bor"> Картинка 3.2 </div>
    	<div style="width: 55%" class="bor scr"> Текст 3.2 </div>
    </div>
	</div>
	<div class="cont" alt="4">
    <h3>Заголовок 4</h3>
    <div class="block">
    	<div style="width: 20%" class="bor scr">
        Текст 4.1
    	</div>
    	<div style="width: 20%" class="bor scr">
        Текст 4.2
    	</div>
    	<div style="width: 20%" class="bor scr">
        Текст 4.3
    	</div>
    	<div style="width: 20%" class="bor scr">
        Текст 4.4
    	</div>
    </div
	</div>
</div>

<script>
speed = 100;
function toggleAnn(el, first) {
	var prev = $('#pun-announcement .buttons a.active').removeClass((first)? '' :'active').attr('alt'),
    cur = first || $(el).addClass('active').attr('alt');

	if (first)
    $('#pun-announcement .content .cont[alt='+prev+']').show(speed);
	else {
    if (cur != prev) {
    	$('#pun-announcement .content .cont[alt='+prev+']').fadeOut(speed, function() {
        $('#pun-announcement .content .cont[alt='+cur+']').fadeIn(speed);
    	});
    }
	}
}
toggleAnn($('#pun-announcement .buttons a.active')[0], true);
</script>

0

873

  • Автор: Deff
  • Зарегистрирован: 14.09.2010
  • Сообщений: 1936
  • Уважение: +435
  • Позитив: +252
  • Провел на форуме:
    1 месяц 1 день
  • Замечания: I (реклама в непредназначенном для этого разделе);
  • Последний визит:
    06.11.2024 02:46:46

:crazyfun:  По старинке По старинке: - табличкаме

В Объявление:

Код:
<!-- Стиль меню таблицы в объявлении -->
<style type="text/css">
/****************************************
   Таблица с переключаемыми Вкладками

****************************************/
#tab2,#tab2*{
  paddibg:0;
  margin:0;
}
#tab2 {
  background:transparent url(http://s2.uploads.ru/80EIC.jpg) 0 0 no-repeat;
  height:367px;
  width:589px;
  outline:solid red 1px;/* Убираем Строку после настройки*/ 
}
#tab2,#tab2 td{
  border:none 0 transparent!important;
  border-collapse:collapse;
}
img[data^="tab"]{
  cursor:pointer;
  height:100%;
  outline:solid red 1px;/* Убираем Строку после настройки*/ 
  border:none 0 transparent!important;
}
.tab-content {
  color:#000!important;
  display:none;
  width:100%;
  height:296px;
  outline:solid blue 1px;/* Убираем Строку после настройки*/
  color:#fff;
  overflow-y:auto;
}
.cont {
  overflow-y:scroll;
     padding:6px;
     border:solid 1px #AAAA00!important;
     -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;
    border-radius:15px;

    -webkit-box-shadow:0px 2px 8px #000;
    -khtml-box-shadow:0px 2px 8px #000;
    -moz-box-shadow:0px 2px 8px #000;
    -ms-box-shadow:0px 2px 8px #000;
    box-shadow: 0px 2px 8px #000;
}
</style>
<script type="text/javascript">
$.fn.switch_tabs = function() {
  var tbl = this,knopK = $("img[data^='tab']",tbl);
  knopK.each(function(){
    var arr = $(this).attr('data').split(",");
    $(this).css("background-image","url("+arr[1]+")")
  }); knopK.css("background-position","120% 10000px")
      knopK.css("background-repeat","no-repeat")

  knopK.click(function(){
    knopK.removeClass('active');
    $(this).addClass('active');
    var arr = $(this).attr('data').split(",");
    tbl.css("background-image","url("+arr[1]+")")
    $(".tab-content",tbl).hide();
    $("#"+arr[0]+"",tbl).show();
  });
}
</script>
<table id="tab2" class="tbl-0" border="0">
 <tr>
 <td class="butt" valign=center height=73>   <!-- Секция кнопок -->
<img width="148" data="tab-1,http://s2.uploads.ru/80EIC.jpg"  src="/i/blank.gif" class="active"/>
<img width="141" data="tab-2,http://s3.uploads.ru/Nwr4y.jpg"  src="/i/blank.gif"/>
<img width="141" data="tab-3,http://s2.uploads.ru/mY6x8.jpg"  src="/i/blank.gif"/>
<img width="141" data="tab-4,http://s2.uploads.ru/qHkZf.jpg"  src="/i/blank.gif"/>
 </td>
 </tr>
 <tr>
 <td  class="content" align=center>
<!-- Контейнер контента 1-й кнопки -->
<div id="tab-1" class="tab-content"  style="display:block;">

<table width=100% border=1>
<tr align=center  valign=center height=286>
<td><div class="cont" style="width:247px;height:210px;"></div></td>
<td>Контент 1-й кнопки<br/>
<div class="cont" style="width:200px;height:193px;"></div></td>
</tr>
</table>

</div>

<!-- Контейнер контента 2-й кнопки -->
<div id="tab-2" class="tab-content">

Контент 2-й кнопки
<table width=95%>
<tr valign=center height=256>
<td width=35% align=center>Контент 1<br/>
<div align=center class="cont" style="width:80%;height:193px;"></div></td>
<td width=65% align=center>Контент 2<br/>
<div class="cont" style="width:80%;height:193px;"></div></td>
</tr>
</table>


</div>

<!-- Контейнер контента 3-й кнопки -->
<div id="tab-3" class="tab-content">

<table width=95% border=1  height=276>
<tr valign=center>
<td width=30% align=center>Контент 1<br/>
<div align=center class="cont" style="width:90%;height:93px;"></div></td>
<td width=70% align=center>Контент 2<br/>
<div class="cont" style="width:80%;height:93px;"></div></td>
</tr>
<tr valign=center>
<td align=center>Контент 1<br/>
<div align=center class="cont" style="width:90%;height:93px;"></div></td>
<td align=center>Контент 2<br/>
<div class="cont" style="width:80%;height:93px;"></div></td>
</tr>
</table>

</div>

<!-- Контейнер контента 4-й кнопки -->
<div id="tab-4" class="tab-content" align=center>
<br/>Контент 2
<table width=95%  height=220>
<tr valign=bottom align=center>
<td width=25%>
<div align=center class="cont" style="width:80%;height:193px;"></div></td>
<td width=25%>
<div align=center class="cont" style="width:80%;height:193px;"></div></td>
<td width=25%>
<div align=center class="cont" style="width:80%;height:193px;"></div></td>
<td width=25%>
<div align=center class="cont" style="width:80%;height:193px;"></div></td>
</tr>
</table>
</div>

 </td>
 </tr>
</table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->

Пояснения к табле тут => http://forum.mybb.ru/viewtopic.php?pid=792447#p792447

Отредактировано Deff (23.03.2013 01:40:48)

0

874

  • Автор: Deff
  • Зарегистрирован: 14.09.2010
  • Сообщений: 1936
  • Уважение: +435
  • Позитив: +252
  • Провел на форуме:
    1 месяц 1 день
  • Замечания: I (реклама в непредназначенном для этого разделе);
  • Последний визит:
    06.11.2024 02:46:46

..ужс - дубль убрал...

Отредактировано Deff (23.03.2013 01:39:52)

0

875

  • Автор: Kisasian
  • Kisasian
  • Зарегистрирован: 11.10.2012
  • Сообщений: 65
  • Уважение: +1
  • Позитив: +6
  • Пол: Мужской
  • Возраст: 36 [1988-01-01]
  • Провел на форуме:
    1 день 6 часов
  • Последний визит:
    25.12.2015 10:28:54

kozhilya, все равно ползет, даже в хроме. И вообще весь форум выравнивается по центра

Скрин с планшета:

++

http://s2.uploads.ru/t/PqpTS.png
http://s3.uploads.ru/t/Bm5RO.png

0

876

  • Автор: Kisasian
  • Kisasian
  • Зарегистрирован: 11.10.2012
  • Сообщений: 65
  • Уважение: +1
  • Позитив: +6
  • Пол: Мужской
  • Возраст: 36 [1988-01-01]
  • Провел на форуме:
    1 день 6 часов
  • Последний визит:
    25.12.2015 10:28:54

А можно мне тогда лучше в ниже приведенной таблице боковые кнопки переставить на верх? А остальное я уже поменяю сам.

код
Код:
<style>    
#menu {
margin-top: -2px;
width: 150px;
height: 20px;
background-repeat : no-repeat;}
#menu span {
border:1px solid # 8f7468
text-align:left;
font: normal 100% Trebuchet Mst;
display:block;
color:# 1c1c1d;
margin: 9px 0;
padding: 10px;
}
#submenu,#menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: url(http://s1.uploads.ru/6us5v.png);
}
#menu .tabactive {
color: #8f7468;
    background:0;
}
#submenu {
padding: 0px;
height: 300px;
border:1px solid #8f7468;
text-align: center;
font: normal 100% Trebuchet Ms;
font-size: 14px;
width: 640px;
}
.submenutext {
display: none; 
height: 40px;
}
</style>
<center><table style="width: 640px">
<tbody>
  <tr>
   <td valign=top>
 <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;"><font color=#660000><b>Контейнер 1</b></font></font></span>
<span alt="#sm2" style="cursor: pointer;"><font color=#660000><b>Контейнер 2</b></font></span>
<span alt="#sm3" style="cursor: pointer;"><font color=#660000><b>Контейнер 3</b></font></font></span>
<span alt="#sm4" style="cursor: pointer;"><font color=#660000><b>Контейнер 4</b></font></font></span>
<span alt="#sm5" style="cursor: pointer;"><font color=#660000><b>Контейнер 5</b></font></font></span>

    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     
<div id="sm1" class="submenutext" 
style="display:block;padding:10px;height:280px;overflow-y: non;">  
<p>
<table>
<tr>
<td rowspan="2"><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 370px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div></td>
</tr>
<tr>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>
     

<div id="sm2" class="submenutext">
<table>
<tr>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>

<div id="sm3" class="submenutext"><center>
<div style="text-align:right; padding-right: 15px;"><font color=#660000><b>надпись  
</b></font></div><br/><div style="text-align: center; width: 600px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>

</center></div>

<div id="sm4" class="submenutext"><center>
<table>
<tr>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 68px; overflow-y: scroll; ">текст</div></div>
</td>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 67px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
<tr>
<td colspan="2"><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 590px ; height: 120px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 115px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</p></center></div>
    
 <div id="sm5" class="submenutext"><center>
<table>
<tr>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
</tr>
<tr>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 78px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</center></div>




</div> </td></tr></tbody></table> 
<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

877

  • Автор: Deff
  • Зарегистрирован: 14.09.2010
  • Сообщений: 1936
  • Уважение: +435
  • Позитив: +252
  • Провел на форуме:
    1 месяц 1 день
  • Замечания: I (реклама в непредназначенном для этого разделе);
  • Последний визит:
    06.11.2024 02:46:46

Kisasian

Код:
<style>    
#menu {
margin-top: -2px;
height: 47px;
width:100%;
background-repeat : no-repeat;
}
#menu span {
border:1px solid # 8f7468
text-align:left;
font: normal 100% Trebuchet Mst;
display:inline-block;
color:# 1c1c1d;
margin: 9px 10px;
padding: 10px;
}
#submenu,#menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: url(http://s1.uploads.ru/6us5v.png);
}
#menu .tabactive {
color: #8f7468;
    background:0;
}
#submenu {
padding: 0px;
height: 300px;
border:1px solid #8f7468;
text-align: center;
font: normal 100% Trebuchet Ms;
font-size: 14px;
width: 640px;
}
.submenutext {
display: none; 
height: 40px;
}
</style>
<center><table style="width: 640px">
<tbody>
  <tr>
   <td valign=top valign=center>
 <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;"><font color=#660000><b>Контейнер 1</b></font></span>
<span alt="#sm2" style="cursor: pointer;"><font color=#660000><b>Контейнер 2</b></font></span>
<span alt="#sm3" style="cursor: pointer;"><font color=#660000><b>Контейнер 3</b></font></span>
<span alt="#sm4" style="cursor: pointer;"><font color=#660000><b>Контейнер 4</b></font></span>
<span alt="#sm5" style="cursor: pointer;"><font color=#660000><b>Контейнер 5</b></font></span>

    </div>
   </td>
</tr>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     
<div id="sm1" class="submenutext" 
style="display:block;padding:10px;height:280px;overflow-y: non;">  
<p>
<table>
<tr>
<td rowspan="2"><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 370px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div></td>
</tr>
<tr>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>
     

<div id="sm2" class="submenutext">
<table>
<tr>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>

<div id="sm3" class="submenutext"><center>
<div style="text-align:right; padding-right: 15px;"><font color=#660000><b>надпись  
</b></font></div><br/><div style="text-align: center; width: 600px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>

</center></div>

<div id="sm4" class="submenutext"><center>
<table>
<tr>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 68px; overflow-y: scroll; ">текст</div></div>
</td>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 67px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
<tr>
<td colspan="2"><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 590px ; height: 120px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 115px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</p></center></div>
    
 <div id="sm5" class="submenutext"><center>
<table>
<tr>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
</tr>
<tr>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 78px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</center></div>




</div> </td></tr></tbody></table> 
<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

878

  • Автор: kozhilya
  • kozhilya
  • Откуда: Москва
  • Зарегистрирован: 17.09.2012
  • Сообщений: 289
  • Уважение: +88
  • Позитив: +12
  • Пол: Мужской
  • Провел на форуме:
    5 дней 16 часов
  • Последний визит:
    18.02.2023 16:48:59
Deff написал(а):

По старинке По старинке: - табличкаме

Таблицы надо использовать для таблиц, а не для разметки. В конце концов, использование слова "Таблица" для Объялений - это не правильно в корне.

Kisasian
Впервые приходится делать костыль для Google Chrome...

Демо
Код:
Код:
<style>
#pun-announcement .html-box {
	text-align: center;
}
#pun-announcement .buttons a {
	display: inline-block;
	height: 30px;
	width: 100px;
	margin: 0 20px 10px 20px;
	border: 1px solid #826E67;
	background: transparent;
	border-radius: 15px;
}
#pun-announcement .buttons a:hover, #pun-announcement .buttons a.active {
	background: lightgray;
	color: black;
	cursor: pointer;
}
#pun-announcement .buttons a span {
	margin: 6px;
	display: block;
}

#pun-announcement .content {
	height: 300px;
	width: 700px;
	padding: 20px;
	border-radius: 20px;
	border: 1px solid #826E67;
	margin: auto;
}
#pun-announcement .content .cont {
	display: none;
	height: 300px;
}
#pun-announcement .content .cont div {
	display: inline-block;
	height: 300px;
	margin: 0 15px;
}
#pun-announcement .content .cont div.block {
	display: block;
	margin: 0;
}
#pun-announcement .content .cont[alt*="3"] div {
	height: 146px !important;
}
#pun-announcement .content .cont h3 {
	font-size: 20px;
	font-weight: bold;
}
#pun-announcement .content .cont div.h {
	height: 280px;
	margin-top: 0;
}
#pun-announcement .content .bor {
	border: 1px solid #826E67;
}
#pun-announcement .content .scr {
	overflow-y: auto;
}
</style>

<div class="buttons">
	<a class="active" alt="1" onclick="toggleAnn(this); return false;"><span>
    Кнопка 1
	</span></a>
	<a alt="2" onclick="toggleAnn(this); return false;"><span>
    Кнопка 2
	</span></a>
	<a alt="3" onclick="toggleAnn(this); return false;"><span>
    Кнопка 3
	</span></a>
	<a alt="4" onclick="toggleAnn(this); return false;"><span>
    Кнопка 4
	</span></a>
</div>

<div class="content">
	<div class="cont" alt="1">
    <div class="gcun" style="width: 45%;">
    	<div class="block bor scr">
        Текст 1.1
    	</div>
    </div>
    <div style="width: 45%">
    	<h3>Заголовок 1.2</h3>
    	<div class="block bor scr h">
        Текст 1.2
    	</div>
    </div>
	</div>
	<div class="cont" alt="2">
    <div style="width: 35%">
    	<h3>Заголовок 2.1</h3>
    	<div class="block bor scr h">
        Текст 2.1
    	</div>
    </div>
    <div style="width: 55%">
    	<h3>Заголовок 2.2</h3>
    	<div class="block bor scr h">
        Текст 2.2
    	</div>
    </div>
	</div>
	<div class="cont" alt="3">
    <div class="block">
    	<div style="width: 30%" class="bor scr"> Картинка 3.1 </div>
    	<div style="width: 55%" class="bor scr"> Текст 3.1 </div>
    </div>
    <br>
    <div class="block">
    	<div style="width: 30%" class="bor scr"> Картинка 3.2 </div>
    	<div style="width: 55%" class="bor scr"> Текст 3.2 </div>
    </div>
	</div>
	<div class="cont" alt="4">
    <h3>Заголовок 4</h3>
    <div class="block">
    	<div style="width: 20%" class="bor scr h">
        Текст 4.1
    	</div>
    	<div style="width: 20%" class="bor scr h">
        Текст 4.2
    	</div>
    	<div style="width: 20%" class="bor scr h">
        Текст 4.3
    	</div>
    	<div style="width: 20%" class="bor scr h">
        Текст 4.4
    	</div>
    </div>
	</div>
</div>

<script>
if ($.browser.webkit) { $('#pun-announcement .gcun').css({position:'relative',top:'-20px'}) }
speed = 100;
function toggleAnn(el, first) {
	var prev = $('#pun-announcement .buttons a.active').removeClass((first)? '' :'active').attr('alt'),
	cur = first || $(el).addClass('active').attr('alt');

	if (first)
    $('#pun-announcement .content .cont[alt='+prev+']').show(speed);
	else {
    if (cur != prev) {
    	$('#pun-announcement .content .cont[alt='+prev+']').fadeOut(speed, function() {
    	$('#pun-announcement .content .cont[alt='+cur+']').fadeIn(speed);
    	});
    }
	}
}
toggleAnn($('#pun-announcement .buttons a.active')[0], true);
</script>

0

879

  • Автор: Deff
  • Зарегистрирован: 14.09.2010
  • Сообщений: 1936
  • Уважение: +435
  • Позитив: +252
  • Провел на форуме:
    1 месяц 1 день
  • Замечания: I (реклама в непредназначенном для этого разделе);
  • Последний визит:
    06.11.2024 02:46:46
kozhilya написал(а):

Таблицы надо использовать для таблиц, а не для разметки.

Хм, спорное утверждение, весь punbb сверстан табличками, и до 2006 -7 года основная верстка - разметка была табличная, поскольку ИЕ6-7 некорректно поддерживают  разметку в div

0

880

  • Автор: Kisasian
  • Kisasian
  • Зарегистрирован: 11.10.2012
  • Сообщений: 65
  • Уважение: +1
  • Позитив: +6
  • Пол: Мужской
  • Возраст: 36 [1988-01-01]
  • Провел на форуме:
    1 день 6 часов
  • Последний визит:
    25.12.2015 10:28:54

kozhilya, Deff, спасибо за помощь. Утащил все варианты

0

Страница:   1 … 42 43 44 45 46 … 50  

Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц

Рейтинг форумов | Создать форум бесплатно