Здравствуйте. Пыталась найти скрипты интересной таблицы ака "мало места - много текста" использовала эти коды в оригинале.
Для КСС второе окошко
Код:/* стиль общего контейнера с кнопками */ .menu{ width: 620px; /* ширина */ margin: 10px auto; padding: 15px; /* отступы */ list-style: none; counter-reset: li; background: #eee; /* фон */ -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset; /* тень вокруг контейнера */ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset; box-shadow: 0 1px 2px rgba(0,0,0,.1) inset; -moz-border-radius: 10px; /* закругление углов */ -webkit-border-radius: 10px; border-radius: 10px; } .menu:before, .menu:after { content: ""; display: table; /* отображение кнопок в виде таблицы */ } .menu:after { clear: both; } .menu { zoom:1; } /* стиль кнопки */ .menu li { position: relative; float: left; cursor: pointer; height: 120px; width: 200px; /* высота и ширина кнопки */ margin: 10px 0 0 10px; /* отступы между кнопками */ color: #fff; } .menu li:hover, .menu li:focus{ /* градиент, который появляется на кнопки при наведении курсора */ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0)); } /* стиль всплывающего описания */ .menu .cover{ z-index: 2; } .menu .cover:focus{ outline: 0; } .menu li::after{ content: counter(li); counter-increment: li; font: italic bold 10px serif, georgia; /* шрифт */ position: absolute; color: rgba(255,255,255,.1); opacity: 0; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .menu li:hover::after, .menu li:focus::after{ font-size: 100px; opacity: 1; } .menu .cover::after{ z-index: -1; } .menu li:nth-child(1), .menu li:nth-child(2), .menu li:nth-child(3){ margin-top: 0; } .menu li:nth-child(1), .menu li:nth-child(4), .menu li:nth-child(7){ margin-left: 0; } /* цвета кнопок по порядку */ .menu li:nth-child(1), .menu li:nth-child(1) .content, .menu li:nth-child(1) .close{ background-color: #2c618f; } .menu li:nth-child(2), .menu li:nth-child(2) .content, .menu li:nth-child(2) .close{ background-color: #91ab31; } .menu li:nth-child(3), .menu li:nth-child(3) .content, .menu li:nth-child(3) .close{ background-color: #714a28; } .menu li:nth-child(4), .menu li:nth-child(4) .content, .menu li:nth-child(4) .close{ background-color: #e58600; } .menu li:nth-child(5), .menu li:nth-child(5) .content, .menu li:nth-child(5) .close{ background-color: #c33a00; } .menu li:nth-child(6), .menu li:nth-child(6) .content, .menu li:nth-child(6) .close{ background-color: #7f5dac; } .menu li:nth-child(7), .menu li:nth-child(7) .content, .menu li:nth-child(7) .close{ background-color: #5672b7; } .menu li:nth-child(8), .menu li:nth-child(8) .content, .menu li:nth-child(8) .close{ background-color: #69003f; } .menu li:nth-child(9), .menu li:nth-child(9) .content, .menu li:nth-child(9) .close{ background-color: #393043; } /* стиль всплывающего контента */ .menu .content{ opacity: 0; display: none\9; overflow: hidden; font: 12px Arial, Helvetica; /* шрифт */ position: absolute; height: 120px; width: 200px; /* Высота и ширина области текста. В идеале: height: 100%; width: 100%; , но будет работать только в FF */ -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .menu .expanded{ opacity: .95; display: block\9; overflow: visible; padding: 40px; height: 300px; width: 540px; /* высота и ширина области перекрытия контейнера с всплывающего описания */ } .menu li:nth-child(3n) .content{ /* 3,6,9 */ right: 0; } .menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */ left: 50%; margin-left: -310px; } .menu li:nth-child(7) .content, /* 7,8,9 */ .menu li:nth-child(8) .content, .menu li:nth-child(9) .content{ bottom: 0; } .menu li:nth-child(4) .expanded, /* 4,5,6 */ .menu li:nth-child(5) .expanded, .menu li:nth-child(6) .expanded{ margin-top: -190px; top: 50%; } /* стиль названия кнопок */ .menu .title{ position: absolute; height: 100%; width: 100%; text-align: center; /* выравнивание по центру */ font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica; /* шрифт */ opacity: .2; } .menu li:hover .title{ opacity: .7; } /* стиль крестика, закрывающего всплывающее описание */ .menu .close { display: none; border: 5px solid #fff; /* обводка (граница) */ color: #fff; /* цвет */ cursor: pointer; height: 40px; width: 40px; /* высота и ширина */ font: bold 20px/40px arial, helvetica; /* шрифт */ position: absolute; text-align: center; top: -20px; right: -20px; /* расположение (двигаем крестик) */ -moz-border-radius: 40px; /* закругление границ */ -webkit-border-radius: 40px; border-radius: 40px; } .menu .cover .close{ display: block; }Для объявления
Код:<ul class="menu"> <li tabindex="1"> <span class="title">Один</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Два</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Три</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Четыре</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Пять</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Шесть</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Семь</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Восемь</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Девять</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> </ul> <script> (function(){ // Добавялем кнопку закрытия каждому блоку $('.menu .content').append('<span class="close">x</span>'); // Выводим окно function showContent(elem){ hideContent(); elem.find('.content').addClass('expanded'); elem.addClass('cover'); } // Сбрасываем все function hideContent(){ $('.menu .content').removeClass('expanded'); $('.menu li').removeClass('cover'); } // Когда элемент li нажат, выводим окно с его содержанием и позиционируем поверх всего $('.menu li').click(function() { showContent($(this)); }); // Содержание будет также выводиться с помощью нажатия клавиши ENTER $('.menu li').keypress(function(e) { if (e.keyCode == 13) { showContent($(this)); } }); // Когда нажат верхний правый элемент, сбрасываем все $('.menu .close').click(function(e) { e.stopPropagation(); hideContent(); }); // Также сброс происходит по нахатию клавиши ESC $(document).keyup(function(e) { if (e.keyCode == 27) { hideContent(); } }); })(); </script>
Так вот, в чем проблема? В том виде что я предоставила - вся таблица съезжает влево, когда я ввожу скрипт центра - сама таблица по центру а названия кнопок въезжают вправо. Тогда я разделила таблицу на две части, в одной - слева кнопки, а во второй простой блок для новостей. Но названия всё равно сьезжают. В чем дело?
Ссылка на пробник
Код для КСС я не меняла, а код для объявления вот.
<table width="100%" border="1">
<tbody align="center"><tr><td> <ul class="menu">
<li tabindex="1">
<span class="title">Добро пожаловать! Для гостей.</span>
<div class="content"><center><font size=3><font color=#e0922c>Для гостей форума</font> </font>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=20#p198"><strong> Сюжет</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=469"><strong> Правила</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=352#p13950"><strong> Список ролей</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=14#p174"><strong> Шаблон анкеты</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=5#p5"><strong> Забивание ролей</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=4#p4"><strong> Вопросы</strong></a></center></div>
</li>
<li tabindex="1">
<span class="title">Пользовательские ссылки</span>
<div class="content"><center><font size=3><font color=#e0922c>Для пользователей форума</font> </font>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=107#p1386"><strong> Занятые внешности</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=6#p6"><strong> Отсутствие / Уход</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=218#p4501"><strong> Заполнение профиля</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=302#p10411"><strong> Чакра</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=239#p6076"><strong> Опыт и изучение техник</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=318"><strong>Гайдбук по техникам, направлениям, рангам </strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=433#p22193"><strong>Путеводитель для новичка </strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=432#p22141"><strong>Гайд по созданию хорошей анкеты </strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=522"><strong>Деньги в мире Наруто</strong></a></center></div>
</li>
<li tabindex="1">
<span class="title">Акции форума</span>
<div class="content"><center><font size=3><font color=#e0922c>Акции форума</font> </font>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=242#p6139"><strong>Акция № 1 "Взаимопомощь"</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=284#p9160"><strong> Акция №2 "Бидзю твоей мечты"</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=294#p9879"><strong> Акция №3 "Дзентюрики"</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=344"><strong> Акция №4 "Быстрый старт"</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=449#p25153"><strong> Акция № 5 "Akatsuki: Return."</strong></a>
<br/><a href="http://nextchance.rusff.ru/viewtopic.php?id=624"><strong> Акция № 6 "Дружба - это вещь замечательная и прекрастная"</strong></a></center></div>
</li>
<li tabindex="1">
<span class="title">Время и погода</span>
<div class="content"><font size=5><font color=#1d185b>Игровое время и погода</font> </font> </b>
<br/>
<br/>
<br><font size=4><font color=#e0922c><b>Время суток:</b> </font> </font>
<br/>Рассвет. Первые лучи солнца окрасили горизонт в алый.
<br>
<br/><font size=4><font color=#e0922c><b>Погода:</b> </font></font>
<br/><u>Конохагакуре но Сато:</u> +20°, Прохладно.
<br/><u>Сунагакуре но Сато: </u> +26°, Душно.
<br/><u>Киригакуре но Сато: </u> +16°, Дождя нет, туманно.
<br/><u>Кумогакуре но Сато: </u> +13°, Идет дождь.
<br/><u>Ивагакуре но Сато: </u> +17°, Облачно, возможно будет дождь.
<br/><u>Амегакуре но Сато: </u> +10°, Идет ливень, холодно.
<br/><u>Отогакуре но Сато: </u> +19°, Безоблачно.
<br/><u>Такигакуре но Сато: </u> +15°, Прохладно, легкий туман.
<br/><u>Окори но Сато: </u> +10°, Холодно.
<br/><p></div>
</li>
<li tabindex="1">
<span class="title">Администрация</span>
<div class="content"><font size=3><font color=#e0922c>Админы</font> </font>
<br/><table>
<tr valign=top>
<td><center><img style="width: 80px; height: 80px;" src="http://uploads.ru/i/z/S/3/zS3xM.png">
<p>
<a href="http://nextchance.rusff.ru/profile.php?id=2"><strong>Seishi</strong></a>
<p>(Скайп : seishi_sava )
<p>Род деятельности: Проверка анкет</center>
<br/></td>
<td><center><img style="width: 80px; height: 80px;" src="http://uploads.ru/i/z/Z/y/zZyRA.png">
<p>
<a href="http://nextchance.rusff.ru/profile.php?id=17"><strong>Kuri_Uchiha</strong></a>
<p>(Скайп : akagi_uchiha)
<p>Род деятельности: Проверка анкет (Главный техник)</center>
</td>
<td><br/><br/><center><a href="http://nextchance.rusff.ru/profile.php?id=68"><strong>Akemi</strong></a>
<p>Род деятельности: Главный модератор всея форума</center>
<br/></td>
</tr>
</table>
</b><font size=3><font color=#e0922c>Модераторы</font> </font>
<br/><table>
<tr valign=top>
<td>
<a href="http://nextchance.rusff.ru/profile.php?id=142"><strong>Belphegor</strong></a>
<p>Род деятельности: ГМ форума
<br/>
<br/>
<br/></td>
<td>
<a href="http://nextchance.rusff.ru/profile.php?id=111"><strong>Kaede</strong></a>
<p>Род деятельности: Пиар, проверка анкет
<br/>
<br/>
<br/></td>
<td>
<a href="http://nextchance.rusff.ru/profile.php?id=154"><strong>Uchiha Takeshi</strong></a>
<p>Род деятельности: ГМ форума
<br/></td>
</tr>
</table></div>
</li>
<li tabindex="1">
<span class="title">Звезды форума</span>
<div class="content">Наши звездочки</div>
</li>
<li tabindex="1">
<span class="title">Друзья форума</span>
<div class="content">партнерские баннеры</div>
</li>
<li tabindex="1">
<span class="title">Очередность постов</span>
<div class="content"><table>
<tr valign=top>
<td><b><font color=purple>Konohagakure no Sato</font></b>
<br/>
<b>Квартал клана Учиха</b>
<br/>Akira, Uchiha Akemi<br/>
<br/>
<b>Вход в деревню</b>
<br/>Ameya Senju,
Toboe Inuzuka,
<br/>Uchiha Yudai
<br/>
<br/>
<b>Деревушка Мори</b>
<br/>
Yamanaka Haru,
<br/>Gemumasuta
<br/>
<br/><b><font color=purple>Kirigakure no Sato</font></b>
<br/>
<b>Побережье</b>
<br/>
<p>Yakushi Akihiro,
<p>Terumi Sora
</td>
<td>
<br/><b><font color=purple>Kumogakure no Sato</font></b>
<br/>
<b>Деревушка Сэн</b>
<br/>Toshiro Asuka,
Gemumasuta
<br/>
<br/><b><font color=purple>Amegakure no Sato</font></b>
<br/>
<b>Кафе</b>
<br/>
Uchiha Itachi,
Gemumasuta
<br/>
<br/><b><font color=purple>Otogakure no Sato</font></b>
<br/>
<b>Штаб АНБУ</b>
<br/>
Hanebu Mizuki,
Matatabi</td>
</tr>
</table>
</div>
</li>
<li tabindex="1">
<span class="title">Девять</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
</ul><script>
(function(){
// Добавялем кнопку закрытия каждому блоку
$('.menu .content').append('<span class="close">x</span>');
// Выводим окно
function showContent(elem){
hideContent();
elem.find('.content').addClass('expanded');
elem.addClass('cover');
}
// Сбрасываем все
function hideContent(){
$('.menu .content').removeClass('expanded');
$('.menu li').removeClass('cover');
}
// Когда элемент li нажат, выводим окно с его содержанием и позиционируем поверх всего
$('.menu li').click(function() {
showContent($(this));
});
// Содержание будет также выводиться с помощью нажатия клавиши ENTER
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});// Когда нажат верхний правый элемент, сбрасываем все
$('.menu .close').click(function(e) {
e.stopPropagation();
hideContent();
});
// Также сброс происходит по нахатию клавиши ESC
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});
})();
</script></td><td>
<div style="OVERFLOW: auto; width: 230px; HEIGHT: 100px;"><font size=5><center>Новости Форума</font></center>
</br>Новый дизайн.</div></td>
</tr></tbody>
</table>
P.S. У меня самой вообще все нормально, но мои партнеры пишут что у них съзжает ==
Отредактировано Риро (29.11.12 21:12)
