сентябрь Нарисуте- заскриншотьте и поправьте, - как должна выглядеть эта вкладка таблички в итоге - а то долго бум
Карусельный скрипт: Объединеный Инфо-Блок и Мини-Фотогаллерея
Сообщений 41 страница 60 из 60
Поделиться42Пн, 6 Июн 2011 22:05:56
Deff
Просто колонки как-то зафиксировать..
http://xmages.net/storage/10/1/0/5/2/up … 168e6e.jpg
Поделиться43Пн, 6 Июн 2011 22:26:39
Просто колонки как-то зафиксировать..http://xmages.net/storage/10/1/0/5/2/up … 168e6e.jpg
Набейте все 4 колонки - я поправлю
Поделиться45Пн, 6 Июн 2011 23:59:04
сентябрь Гм - на форуме - я имею ввиду - код я так увижу (пока там ток три >
Отредактировано Deff (Вт, 7 Июн 2011 00:01:26)
Поделиться46Вт, 7 Июн 2011 14:38:33
Deff
Ну там и четыре набито. Последние колонки: акции, полезные ссылки.
Поделиться47Вт, 7 Июн 2011 14:58:05
<center><!--============== Fotogallere/Information block =========== -->
<style>
/*#announcement_1 .span{visibility: hidden;}*/
</style>
<style>
/*======== Экранная Таблица =========*/
#Tab_01 {
position:relative;
z-index:4;/**/
border-collapse:collapse;
border:#999395 0px solid!important;
width:98%!important;
height:269px;
/*border-color:#000; */
background-image: url(); /*http://s46.radikal.ru/i112/1011/36/d7ce20ebe0a6.jpg*/
background-position:no-repeat;
}
#Tab_Ekr {
width:98%!important;
/*border:red 1px solid!important;*/
}
#Tab_Ekr td {
border-collapse:collapse!important;
/*border:red 0px solid!important;*/
text-align:center;
}
#Ekr td{
height:169px!important;
}
#title {
height:20px!important;
/*border:#000 0px solid!important;*/
}
#title div{
display: none;
/*margin-bottom:1%;*/
position:relative;
/*border:red 0px solid!important;*/
max-width:98%;
font-weight:bold!important;
font-size:14px!important;
text-align:center;
text-align:center;
vertical-align:center;
}
#Ekr div.Num1,#Ekr div.Num2,#Ekr div.Num3,#Ekr div.Num4{
width:90%;
height:167px!important;
padding:2px;
margin: 5px 7%;
display: none;
border:#7E4A4E 0px solid!important;/**/
text-align:left;
}
#Ekr img{
/*max-width:200px!important;*/
max-height:150px!important;
display:inline;
float:left;
padding:3px 4px 3px 0;
text-align:right;
}
#vmeny,#vmeny td{
background:;
border:#AFA7AA 0px solid!important;
}
#prevnext,#prevnext td{
background:;
border:#999395 0px groove!important;/**/
padding:0 65px;
}
/* Ограничение максимального размера превью */
/**/
#lightbox,#imageDataContainer,#hoverNav,#outerImageContainer{
max-width:900px!important;
max-height:680px!important;
}
#lightboxImage {
max-width:880px!important;
max-height:694px!important;
}
.ScrolBlock {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 0px;
padding-left: 6px;
padding-right: 6px;
padding-top: 0px;
width: 100%;
}
</style>
<!-- ==========УКРАШАТЕЛЬСТВА============= -->
<style type="text/css"> /* Стиль первой буквы после тега <p> */
#Ekr p:first-letter,#Ekr .lipsum:first-letter,#Ekr ul li:first-child:first-letter {
font-family: "Times New Roman", Times, serif!important; /* Гарнитура шрифта первой буквы */
font-size: 200% !important; /* Размер шрифта первого символа */
color: #A31B2E!important; /* Красный цвет текста */
}
#Ekr ul li a{color:#5D4B4B!important;
}
#Ekr ul li a:hover{color:#0555D3!important;
}
</style>
<center><table id="Tab_01" border="2" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<!--======&&& Экраные ТАБЛИЦЫ ======= -->
<td width="100%" valign="bottom" height="199" colspan="8" style="height:199px!important;">
<div id="title" alt="Блок экранных Заголовков" style="padding:0px;">
<!--======&&& Блок экранных Заголовков =================================== -->
<!-- &&&"Заголовок Экран 1-->
<div id="title_1" style="display: block;">ветер перемен</div>
<!-- &&&"Заголовок Экран 2-->
<div id="title_2" style="">ветер перемен<span style=font-weight:normal;font-size:11px;"></span></div>
<!--&&&//КОНЕЦ Экранных Заголовков-->
<!--========== &&&"Заголовки для Кнопок ==========-->
<!-- &&&"Заголовок Кнопка 1 Администрация -->
<div id="title_301" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Администрация</span></div>
<!-- &&&"Заголовок Кнопка 2 Правила Форума -->
<div id="title_302" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Правила Форума</span></div>
<!-- &&&"Заголовок Кнопка 3 Новости КПЦ -->
<div id="title_303" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Новости КПЦ</span></div>
<!-- &&&"Заголовок Кнопка 4 Полезные ссылки -->
<div id="title_304" style=";"><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Полезные ссылки</span></div>
<!--&&&//End Блок Экранных Заголовков--></div>
<table id="Tab_Ekr" align="center" width="25%" border="0" cellspacing="0" cellpadding=0">
<tbody>
<tr id="Ekr"><!-- &&&"Экран-Контент -->
<!-- &&&"Экран 1 --><td class="E1">
<div class="Num1" style="display: block;"><!--1Конт 1 -->
<div class="ScrolBlock" style="width:220px!important;padding-left:30px; height:140px;">
<center><b>О ПРОЕКТЕ</b></center>
<br>Добро пожаловать на форумную ролевую игру "". Я не буду пересказывать здесь весь сюжет ролевой, думаю, навигация в этом Вам поможет. Хочу лишь сказать, что я хотел создать атмосферу одновременно волшебства, страха и некой странности. Надеюсь, Вы оцените. Для гостей есть специальная тема, куда вы можете задавать все интересующие вас вопросы, а также занимать или придерживать роли. Вам, когда придете, я подарю счастье, честное слово! Навеки ваш Швейцар. </br>
</div>
<!--//End//1Конт 1 --></div>
</td>
<td class="E1">
<div class="Num2" style="display: block;"><!--1Конт 2 -->
<div class="ScrolBlock" style="width:180px!important;padding-left:30px; height:140px;">
<center><b>НОВОСТИ</b></center>
<br> Дорогие участники, прошу Вас обратить на второй выпущенный квест. Так же, хочется напомнить о первом, который все еще не закончен. Ну, ведь это же так просто поддаться порыву вдохновения. Прошу! </br>
</div>
<!--//End//1Конт 2 --></div>
</td>
<td class="E1">
<div class="Num3" style="display: block;"><!--1Конт 3 -->
<div align=center class="ScrolBlock" style="width:100px!important;padding-left:30px; height:140px;">
<b>АКЦИИ</b>
<br/>
<b><a href="ССЫЛКА">act0</a>
</br><a href="ССЫЛКА">act1</a><br><a href="ССЫЛКА">act2</a><br><a href="ССЫЛКА">act3</a></b>
</div>
<!--//End//1Конт 3 --></div>
</td>
<td class="E1">
<div class="Num4" style="display: block;"><!--1Конт 4 -->
<div align=center class="ScrolBlock" style="width:100px!important;padding-left:30px; height:140px;">
<b>ПОЛЕЗНЫЕ ССЫЛКИ</b>
</br><a href="ССЫЛКА">гостевая</a><br><a href="ССЫЛКА">акции</a><br><a href="ССЫЛКА">занятые внешности</a></b>
</div>
<!--//End//1Конт 4 --></div>
</td><!-- &&&"/End/Экран 1 -->
<!-- &&&"Экран 2 --><td class="E2">
<div class="Num1" style=""><!--1Конт 1 -->
<img rel="lightbox" src="http://xmages.net/storage/10/1/0/f/b/upload/0947001c.jpg" width="160" />
игрок
<!--//End//1Конт 1 --></div>
</td>
<td class="E2">
<div class="Num2" style=""><!--1Конт 2 -->
<img rel="lightbox" src="http://xmages.net/storage/10/1/0/f/b/upload/0947001c.jpg" width="160" />
конкурс
<!--//End//1Конт 2 --></div>
</td>
<td class="E2">
<div class="Num3" style=""><!--1Конт 3 -->
<img rel="lightbox" src="http://xmages.net/storage/10/1/0/f/b/upload/0947001c.jpg" width="160" />
квест
<!--//End//1Конт 3 --></div>
</td>
<td class="E2">
<div class="Num4" style=""><!--1Конт 4 -->
дата и события игре
<!--//End//1Конт 4 --></div>
</td><!-- &&&"/End/Экран 2 -->
<!-- +++++++++++++++++++++++++ ТУТ МОЖНО ДОБАВИТЬ ОЧЕРЕДНОЙ ЭКРАН === -->
<!-- &&&"//End/Контент Экранов -->
<!-- ======= "Экраны для встроенных Кнопок ====== -->
<!-- &&&"Экран Администрация Кнопка 1--><td class="E301">
<div class="Num1" style=""><!--1Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент1 Кнопки 1
<!--//End//1Конт 1 --></div>
</td>
<td class="E301">
<div class="Num2" style=""><!--1Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент2 Кнопки 1
<!--//End//1Конт 2 --></div>
</td>
<td class="E301">
<div class="Num3" style=""><!--1Конт 3 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент3 Кнопки 1
<!--//End//1Конт 3 --></div>
</td>
<td class="E301">
<div class="Num4" style=""><!--1Конт 4 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент4 Кнопки 1
<!--//End//1Конт 4 --></div>
</td><!-- &&&"/End/"Экран Администрация 1 -->
<!-- &&&"Экран Правила Кнопка 2--><td class="E302">
<div class="Num1" style=""><!--2Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент1 Кнопки 2
<!--//End//2Конт 1 --></div>
</td>
<td class="E302">
<div class="Num2" style=""><!--2Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент2 Кнопки 2
<!--//End//2Конт 2 --></div>
</td>
<td class="E302">
<div class="Num3" style=""><!--2Конт 3 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент3 Кнопки 2
<!--//End//2Конт 3 --></div>
</td>
<td class="E302">
<div class="Num4" style=""><!--2Конт 4 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент4 Кнопки 2
<!--//End//1Конт 4 --></div>
</td><!-- &&&"/End/Экран Правила -->
<!-- &&&"Экран Новости КПЦ Кнопка 3--><td class="E303">
<div class="Num1" style=""><!--3Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент1 Кнопки 3
<!--//End//1Конт 1 --></div>
</td>
<td class="E303">
<div class="Num2" style=""><!--3Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент2 Кнопки 3
<!--//End//2Конт 2 --></div>
</td>
<td class="E303">
<div class="Num3" style=""><!--3Конт 3 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент3 Кнопки 3
<!--//End//3Конт 3 --></div>
</td>
<td class="E303">
<div class="Num4" style=""><!--3Конт 4 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент4 Кнопки 3
<!--//End//3Конт 4 --></div>
</td><!-- &&&"/End/Экран Новости КПЦ -->
<!-- &&&"Экран Полезные Ссылки Кнопка 4--><td class="E304">
<div class="Num1" style=""><!--4Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент1 Кнопки 4
<!--//End//4Конт 1 --></div>
</td>
<td class="E304">
<div class="Num2" style=""><!--4Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент2 Кнопки 4
<!--//End//4Конт 2 --></div>
</td>
<td class="E304">
<div class="Num3" style=""><!--4Конт 3 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент3 Кнопки 4
<!--//End//4Конт 3 --></div>
</td>
<td class="E304">
<div class="Num4" style=""><!--4Конт 4 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент4 Кнопки 4
<!--//End//4Конт 4 --></div>
</td><!-- &&&"/End/Экран Полезные Ссылки -->
<!-- &&&"//End/Контент Кнопок--></tr>
</tbody>
</table>
</td>
</tr>
<tr id="prevnext">
<td id="prevtd" width="50%" height="23" valign="center" align="right" colspan="4">
<span class=""><img id="prev" src="http://xmages.net/storage/10/1/0/9/d/upload/c29e3190.png" /></span>
</td>
<td id="nexttd" width="50%" height="23" align="left" colspan=4>
<span class=""><img id="next" src="http://xmages.net/storage/10/1/0/a/1/upload/561ad42a.png"/></span>
</td>
</tr>
</tbody>
</table></center>
<!-- &&& Карусельный Скрипт -->
<script type="text/javascript">
jQuery(document).ready(function(){
var N_max=2 // N_max - максимальное число показываемых экранов
var LH=80
var L=480 // время свертывания - развертывания
var i=1
jQuery('#nexttd').click(function () { // Кнопка: Следующий;
document.getElementById("prev").src='http://xmages.net/storage/10/1/0/7/4/upload/fbdcce07.png '
document.getElementById("next").src='http://xmages.net/storage/10/1/0/9/3/upload/86c535bb.png '
jQuery("#title_"+i).hide();
s2 = "tr.#Ekr td.E"+i+">div.Num"
if (i>=300) i=0;
i++
if (i>N_max) i=1;
jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"
jQuery(s2+"4").hide();
jQuery(s2+"3").hide();
jQuery(s2+"2").hide();
jQuery(s2+"1").hide();
jQuery(s+"1").fadeIn(L);
jQuery(s+"2").fadeIn(L);
jQuery(s+"3").fadeIn(L);
jQuery(s+"4").fadeIn(L);
});
jQuery('#prevtd').click(function () { // Кнопка: Предыдущий;
document.getElementById("next").src='http://xmages.net/storage/10/1/0/a/1/upload/62f9fb08.png'
document.getElementById("prev").src='http://xmages.net/storage/10/1/0/b/d/upload/f5355cac.png'
jQuery("#title_"+i).hide();
s2 = "tr.#Ekr td.E"+i+">div.Num"
i--
if (i>=300) i = 1
if (i<=0) i=N_max;
jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"
jQuery(s2+"1").hide();
jQuery(s2+"2").hide();
jQuery(s2+"3").hide();
jQuery(s2+"4").hide();
jQuery(s+"4").fadeIn(L);
jQuery(s+"3").fadeIn(L);
jQuery(s+"2").fadeIn(L);
jQuery(s+"1").fadeIn(L);
});
jQuery('tr.#vmeny td>.butCont').click(function () { // Кнопки: Администрация; Правила; Новости; Навигация;
document.getElementById("next").src='http://xmages.net/storage/10/1/0/a/1/upload/62f9fb08.png'
document.getElementById("prev").src='http://xmages.net/storage/10/1/0/7/4/upload/fbdcce07.png '
jQuery("#title_"+i).hide();
s2 = "tr.#Ekr td.E"+i+">div.Num"
i = jQuery(this).attr("id")
jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"
jQuery(s2+"1").hide();
jQuery(s2+"2").hide();
jQuery(s2+"3").hide();
jQuery(s2+"4").hide();
jQuery(s+"4").fadeIn(L);
jQuery(s+"3").fadeIn(L);
jQuery(s+"2").fadeIn(L);
jQuery(s+"1").fadeIn(L);
});
});
</script>
<!--============== End//Fotogallere/Info block =========== --></center>Отредактировано Deff (Вт, 7 Июн 2011 15:02:38)
Поделиться48Вт, 7 Июн 2011 15:10:05
Deff
Спасибо, теперь все хорошо ))
И еще вопрос: можно ли менять размер картинок (у меня во втором экране)? то есть, чтобы они были не в соотношение ширина*длина, а длина меньше ширины. Где менять эти значения? Просто без них картинка растягивалась в длину.
Поделиться49Вт, 7 Июн 2011 15:13:16
были не в соотношение ширина*длина, а длина меньше ширины
не понял вопрос - нарисуйте скрин с поправками - в превью или где ? ( вроде ограничены максимальные размеры - а не пропорции, Поставьте ту картинку - что желаете - потом на живом примере спросите
Отредактировано Deff (Вт, 7 Июн 2011 15:14:07)
Поделиться50Вт, 7 Июн 2011 15:27:46
Deff
Нет, простите, пока все работает.
Мм..где-то видела, что этот самый скролл-блок сделан под фон. То есть будь то коричные цвета на форуме, то и полоса прокрутки коричневая и не выпуклая. Можно это как-то сделать в этом скрипте? Если нужен скрин-пример, могу показать.
Поделиться51Чт, 9 Июн 2011 00:14:55
Мм..где-то видела, что этот самый скролл-блок сделан под фон. То есть будь то коричные цвета на форуме, то и полоса прокрутки коричневая и не выпуклая. Можно это как-то сделать в этом скрипте? Если нужен скрин-пример, могу показать.
<div class="Num1" style="display: block;"><!--1Конт 1 -->
<div class="ScrolBlock" style="scrollbar-face-color: #A58C6D; scrollbar-highlight-color: #AF9E84; scrollbar-shadow-color: #B19F88;scrollbar-3dlight-color: #C9BCA2;scrollbar-arrow-color: #F2F0C4; scrollbar-track-color: #C9BCA2; scrollbar-darkshadow-color: #6C5840; width:220px!important;padding-left:30px; height:140px;">
Пробуйте сделать добавку синим в каждый "ScrolBlock"
Поделиться52Чт, 9 Июн 2011 12:31:22
Deff
стало так:
http://wind.rusff.ru/
Поделиться53Чт, 9 Июн 2011 12:46:19
попутный ветер
Я не сказал отдельно - а
в уже проставленные теги к Вашему коду просто добавить синее!
А не выдумывать собственные элементы и разрывать тег надвое
<style="width:220px!important;padding-left:30px; height:140px;">
- такого тега в природе(HTML) не существует
Чо трудно найти соотвествующие строки с class="ScrolBlock" style="
и добавить -(*спецом же дал достаточно длинный код
добавить - значит вставить в тоже место после style=" ...
бывший код ранее просто будет идти в след за текущим
Отредактировано Deff (Чт, 9 Июн 2011 12:56:06)
Поделиться54Чт, 9 Июн 2011 12:58:57
а можно допустим сделать одну картинку в небольшой таблице чтоб она так же сменивалась на такие же размеры как и предыдущая?
Поделиться55Чт, 9 Июн 2011 13:01:38
janyst ничо не понял - приведите пару скриншотов - одно окно и второе
Поделиться56Чт, 9 Июн 2011 13:02:51
Deff
Добавила, но не окрасилось.
все правильно вроде
<div class="ScrolBlock" style="scrollbar-face-color: #A58C6D; scrollbar-highlight-color: #AF9E84; scrollbar-shadow-color: #B19F88;scrollbar-3dlight-color: #C9BCA2;scrollbar-arrow-color: #F2F0C4; scrollbar-track-color: #C9BCA2; scrollbar-darkshadow-color: #6C5840;
width:220px!important;padding-left:30px; height:140px;">
Поделиться57Чт, 9 Июн 2011 13:24:47
попутный ветер Красицо везде, кроме мозиллы > http://savepic.org/1812001.png
для мозиллы нун делать специальный крипт - этим занимацо не буду - тема оч долгая .. можно пробовать искать в инете - над этой задачей многие бились - удовлетворительных удобных для пользователя результатов -не видел
Поделиться58Чт, 9 Июн 2011 13:30:41
Deff
у меня гугл хром, но не красится..
Поделиться59Чт, 9 Июн 2011 13:34:15
попутный ветер http://www.javaportal.ru/htmlandcss/scrollbar.html
ИЕ и Опера (*в принципе 50% -60% аудитории
Отредактировано Deff (Чт, 9 Июн 2011 13:36:22)
Поделиться60Чт, 9 Июн 2011 13:54:40
Deff
ну ничего, спасибо большое *))