фон "содержимое контейнера" какой нибудь бледной картинкой
Эм, одноцветная полупрозрачная, или какая-то конкретная? Оо
Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (14)
фон "содержимое контейнера" какой нибудь бледной картинкой
Эм, одноцветная полупрозрачная, или какая-то конкретная? Оо
Rion Leonheart
Это я просила Гладь заказать, т.к. не могла ссыль найти х(
Просто поставьте любую картинку, я потом изменю.
А заказывать таблицу по бокам форума тут?
Susy, тут. есть другие варианты? Оо
КукарачА, законспирировались
html-верх:
<style>
#menu {
margin-top: 0px;}
#menu span {
width: 100px;
height: 10px;
text-align: center;
display: block;
margin-bottom: 5px;
padding: 5px 0px 10px 0px;
font-weight: bold;
font-size: 14px;
font-family: 'Georgia';}
#menu .tabactive {
color: #fff;
font-weight: normal;}
#submenu {
padding: 0px;
height: 200px;
background: transparent url(ссылка на картинку) no-repeat center;}
.submenutext {
display: none;
text-align: center;
width: 100%;
height: 200px;
overflow-y: auto;}
</style>Объявление:
<table style="width: 100%; border: 1px solid #375B36;" cellpadding="0" cellspacing="0" border="0">
<tr><td style="width: 25%; border: 1px solid #375B36;" align="center" valign="top">
<div id="menu">
<span alt="#sm1" style="cursor: pointer;">Кнопка 1</span>
<span alt="#sm2" style="cursor: pointer;">Кнопка 2</span>
<span alt="#sm3" style="cursor: pointer;">Кнопка 3</span>
<span alt="#sm4" style="cursor: pointer;">Кнопка 4</span>
</div>
<br/>
<b>Наш баннер:</b><br/><br/>
<a href="http://antropomorfwolf.mybb.ru/" title="Мир Надежд. Новые открытия" target="blank"><img src="картинка баннера"></a><br/><br/>
<marquee style="width: 98%; height: 16px;">
Прокруточка
</marquee>
</td><td id="MenuTxT" style="width: 50%; border: 1px solid #375B36;" align="center" valign="top">
<marquee style="width: 98%; height: 20px;">
Прокруточка
</marquee>
<div id="submenu" align="center">
<div id="sm1" class="submenutext" style="display:block;"><br/>
Контент первой кнопки
</div>
<div id="sm2" class="submenutext"><br/>
Контент второй кнопки
</div>
<div id="sm3" class="submenutext"><br/>
Контент третьей кнопки
</div>
<div id="sm4" class="submenutext"><br/>
Контент четвертой кнопки
</div>
</div>
</td>
</td><td style="width: 25%; border: 1px solid #375B36;" align="center" valign="top">
<b>Партнеры:</b><br/><br/>
баннер
<br/><br/>
баннер
<br/><br/>
баннер
</a><br/><br/>
баннер
</td></tr></table>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>Блэдную картинку совать так (кусок кода из части, что в html-верх пошла):
#submenu {
padding: 0px;
height: 200px;
background: transparent url(ссылка на картинку) no-repeat center;}
1) 
2) http://worldoftheunknown.rusff.ru/
3) Прокрутку указала. Внутри "окон" цвет: ffdead, если можно окантовку цветом: 321a02 в несколько пиксилей (3-4). Шрифт черный, не жирный
Отредактировано Susy (Вс, 18 Мар 2012 18:58:25)
эх, уточните размеры всех вставляемых картинок - и если кнопки-переключатели тоже картинками - уж кидайте сразу сюда?
Продублирую заявку)
Добрый день... В общем я чего-то тут намудрила, надеюсь не запутаю окончательно.
Мне нужна таблица с пятью переключающимися вкладками.
1. Вкладка 1
Картинки админов и модераторов - 60х60 пикс
Кнопка неактивная
активная
2. Вкладка 2
Картинка размером 190 х 100
неактивная
активная
3. Вкладка 3
левая картинка - 190х100
правая - 190х190
неактивная
активная
4. Вкладка 4
170 х 220
неактивная
активная
5. В пятой ничего интересного нет, делать ее не стала)
неактивная
активная
http://eldorado.rusff.ru/ - ссылка на форум
На макете нарисовала у таблицы границы, но потом решила что их делать не стоит.
Все остальное вроде как указано на картинках)
Надеюсь с размерами не напутала)
Susy, а картинки админов-модеров примерно какого размера?
Rion Leonheart
Ксать у Танюшки вродь на текущем форе -почти все вкладки, кроме одной - мон чисто скопировать (наверно), мну она тоже напугала
Отредактировано Deff (Пн, 19 Мар 2012 00:31:45)
Deff, не сошлось... я раскидывал из слайдера то, шо есть... потом подумал, что мой альтруизм стал фанатизмом и переделал как на эскизе
Танюшка1482,
1) удаляете стиль слайдера из конца второго окна стиля - вот это:
/* CS5 Categories and other
-------------------------------------------------------------*/
#slideshow {margin:10px 48px -20px; width:680px; height: 290px; position:relative; line-height: 10px;}#slideshow #slidesContainer {margin: 0 auto; width:680px; height: 290px; overflow:auto; /* allow scrollbar */
position:relative;}#slideshow #slidesContainer .slide {margin:0 auto; width:680px; height:290px;}
.control {display:block;width: 50px; height: 53px; text-indent:-10000px; position:absolute; cursor: pointer;}
#leftControl {top: 60px; left: -60px; background:transparent url(http://s1.ipicture.ru/uploads/20120201/h7ilZx9L.png) no-repeat 0 0;}
#rightControl {top: 60px; right: -20px; background:transparent url(http://s1.ipicture.ru/uploads/20120201/kxU7uYF5.png) no-repeat 0 0;}
.slide h2 {letter-spacing:-1px;}
2) Удаляете из html-низ:
</script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 680;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'right',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
3) обновляете объявление полностью:
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr height="40">
<td align="center">
<div id="menu">
<span alt="#sm1" style="cursor: pointer;"><img src="http://s1.ipicture.ru/uploads/20120318/trPaKU1i.png"></span>
<span alt="#sm2" style="cursor: pointer;"><img src="http://s1.ipicture.ru/uploads/20120318/o1B82Doy.png"></span>
<span alt="#sm3" style="cursor: pointer;"><img src="http://s1.ipicture.ru/uploads/20120318/vPSV6P76.png"></span>
<span alt="#sm4" style="cursor: pointer;"><img src="http://s1.ipicture.ru/uploads/20120318/dyS1M66L.png"></span>
<span alt="#sm5" style="cursor: pointer;"><img src="http://s1.ipicture.ru/uploads/20120318/zWCnL4JV.png"></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;">
<table style="width: 100%;">
<tr>
<td style="width: 50%;" align="center" valign="top">
<div style="width: 100%; height: 270px; overflow-y: auto;">
текст текст текст текст
</div>
</td>
<td style="width: 50%;" align="center" valign="top">
<b>Администрация:</b>
<br/><br/>
<img src="картинка">
<img src="картинка">
<br/><br/><b>Модераторы:</b><br/><br/>
<img src="картинка">
<img src="картинка">
<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>
</td>
</tr>
</table>
</div>
<div id="sm2" class="submenutext">
<table style="width: 100%;">
<tr>
<td style="width: 50%;" align="center" valign="top">
<div style="width: 100%; height: 270px; overflow-y: auto;">
текст текст текст текст
</div>
</td>
<td style="width: 50%;" align="center" valign="top">
<b>Время и погода:</b>
<br/><br/>
текст текст текст текст
<br/><br/>
<b>Шоу "Пять вечеров"</b>
<br/><br/>
<img src="картинка">
</td>
</tr>
</table>
</div>
<div id="sm3" class="submenutext">
<table style="width: 100%;">
<tr>
<td style="width: 50%;" align="center" valign="top">
<img src="картинка">
<div style="width: 100%; height: 170px; overflow-y: auto;">
текст текст текст текст
</div>
</td>
<td style="width: 50%;" align="center" valign="top">
<b>Игрок недели:</b>
<br/><br/>
<img src="картинка">
</td>
</tr>
</table>
</div>
<div id="sm4" class="submenutext">
<table style="width: 100%; height: 100%;">
<tr>
<td style="width: 33%;" align="center">
<a href="ссылка"><img src="картинка"></a>
</td>
<td style="width: 33%;" align="center">
<a href="ссылка"><img src="картинка"></a>
</td>
<td style="width: 33%;" align="center">
<a href="ссылка"><img src="картинка"></a>
</td>
</tr>
</table>
</div>
<div id="sm5" class="submenutext">
баннеры баннеры баннеры баннеры
</div>
</td>
</tr>
</tbody>
</table>4) в html-верх:
<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}
</style>
<style>
#menu {margin: 0px;}
#menu span {
padding: 0px;
margin: 0px 8px;
width: 120px;}
#menu .tabactive {
border-bottom: 1px solid #AC8454;}
#submenu {
padding: 3px;
width: 96%;}
.submenutext {
display: none;
text-align: center;
height: 270px;}
</style>5) в 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>А те кнопки, шо у вас в активном состоянии... чо-то не сильно отличаются от неактивных-то... поэтому заменил на подчеркивание при активации... 
Сообщений: 999
Опять на число зверя нарвался... уже третье за вторые сутки ОО
Отредактировано Rion Leonheart (Пн, 19 Мар 2012 03:00:56)
Susy, а картинки админов-модеров примерно какого размера?
так-с: картинки "админы", "модеры" - 100х40, а сами картинки: 40х40. Кое-какие изменения: в окошке где должны быть новости с навигатором, пусть будут только новости (с прокруткой). Справа и слева нужно еще добавить по одному окошку. Слева будет навигатор, справа будут баннеры и ТОПы. То есть всего с каждой стороны должно быть по три окошечка
обрамление вот этой рамкой
Отредактировано Susy (Пн, 19 Мар 2012 14:32:10)
Слева будет навигатор
Тогда еще вопрос - навигатор какого рода, если теперь он будет отдельно - просто ссылки, ссылки с меняющимся фоном, выпадающее меню, другие варианты? 
Rion Leonheart Скрипты от пользователей
Deff, можно тву обнять?
А его всей кучкой в объявление?
А его всей кучкой в объявление?
Ну ды... тиж заешь - я не люблю расчлененки
Ну ды... тиж заешь - я не люблю расчлененки
дя ++, аккордионище тож хорош
Rion Leonheart, вот такой
цвета все такие как в этом навигаторе
PS - в окошке, где будут баннеры должна быть прокрутка (:
Отредактировано Susy (Вт, 20 Мар 2012 18:05:49)
Доооообрый день.) В общем, вот такая будет просьба. У нас есть таблица:

Код:
Хотелось бы сделать вот что:
1. Перенести кусочек с названием "Очередность постов" в середину таблицы, тоесть, передвинуть ее влево, чтобы она оказалась посередине.
2. Взять все части таблицы в обводку, а вот тут я не знаю как объяснить, если вы зайдете ко мне на форум wwwthemorion.ru и посмотрите на любой профиль, то вы увидите, что их аватары взяты в обводку с тенью, вот так же нужно выделить каждый кусочек таблицы.
Надеюсь, пояснила понятно, заранее спасибо.)
Хотел бы такую таблицу, заранее спасибо

Susy, короче
все в объявление:
<style>
.sidebar {position: absolute;
width: 200px;
top: 50px;
height: 400px;
padding: 5px;
padding-top: 10px;
text-align: center;}
#Rightbar {margin-left: 30px;}
#Leftbar {margin-left: -252px;}
#Rightbar .container, #Leftbar .container {
color: #3d3225;
padding: 5px;
padding-top: 5px;
margin-bottom: 15px;
width: 170px;
border: 1px red solid;}
#Leftbar .container.a1, #Leftbar .container.a2, #Leftbar .container.a3, #Rightbar .container.a1, #Rightbar .container.a2, #Rightbar .container.a3 {
height: 250px;
overflow-y: auto;
background: transparent url(http://savepic.net/2297193.png) repeat;
border: 16px solid #321A02;}
.nav {margin: 0 -5px 0 0px;}
.nav a {display: block; color:#fff!important; background-color: #492F22; text-align: center; width:150px; padding: 2px; margin: 1px; text-decoration: none; border-left: 6px solid #fff;}
.nav a:hover {background-color: transparent; color: #492F22!important; border-left-color: #3E2419;}
</style>
<span style="float:left;">
<div id="Leftbar" class="sidebar">
<div class="container a1">
Приветствие для гостей!
</div>
<div class="container a2">
<img src="http://savepic.net/2252401.png"><br/><br/>
<img src="http://savepic.net/2295290.png">
<img src="http://savepic.net/2295290.png">
<img src="http://savepic.net/2295290.png">
<br/><br/><img src="http://savepic.net/2239089.png"><br/><br/>
<img src="http://savepic.net/2295290.png">
<img src="http://savepic.net/2295290.png">
<img src="http://savepic.net/2295290.png">
</div>
<div class="container a3">
<div class="nav" align="center">
<a href="ссылка">Тема 1</a>
<a href="ссылка">Тема 2</a>
<a href="ссылка">Тема 3</a>
<a href="ссылка">Тема 4</a>
<a href="ссылка">Тема 5</a>
<a href="ссылка">Тема 6</a>
<a href="ссылка">Тема 7</a>
<a href="ссылка">Тема 8</a>
<a href="ссылка">Тема 9</a>
<a href="ссылка">Тема 10</a>
</div>
</div>
</div>
</span>
<span style="float:right;">
<div id="Rightbar" class="sidebar">
<div class="container a1">
Погода
</div>
<div class="container a2">
Новости
</div>
<div class="container a3">
<img src="http://savepic.net/2230897.png"><br/><br/>
<a href=http://urchoice.ru/ target="_blank"><img src="http://s005.radikal.ru/i212/1001/b3/a2328b18a862.gif"></a>
</div>
</div></span>Прокрутка везде на автомате. 
| Таблицы на заказ (15) | Архив | Вт, 13 Янв 2015 |
| Таблицы на заказ (13) | Корзина | Вс, 26 Фев 2012 |
| Таблицы на заказ (16) | Архив | Пн, 31 Окт 2016 |
| Таблицы на заказ (10) | Корзина | Чт, 6 Янв 2011 |
| Таблицы на заказ (11) | Архив | Сб, 9 Июл 2011 |
Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (14)