рони,
Еще раз побеспокою.
Если прописать .make_transist { right: 0; left: 0; text-align: center; margin: 0 auto; position: absolute;top:10px; }, то возвращается старая проблема со ссылками. А точнее ссылка становится не кликабельной во многих браузерах (Яндекс браузер, Мозилла, другие не проверял). Будто бы не ссылка вовсе, а обычный текст.
И у меня почему-то возникает проблема с выравниванием вкладок, когда в одной из них текста много... Пытаюсь сделать, чтобы они все были одной высоты с выравниванием по центру, но, увы, что-то идет не так. Оговорюсь сразу, верстку пытаюсь сделать адаптивной.
Отправляю все, что причастно ко вкладкам, в том числе кусочки своего css, где есть какое-либо отношение ко вкладкам. Может в чем-то там дело.
<!DOCTYPE html>
<html lang="en-US"><head>
<link rel="stylesheet" href="http://php-ilyaru.rhcloud.com/moysite/style-cleaned.css" media="screen">
<link rel="stylesheet" href="http://php-ilyaru.rhcloud.com/moysite/style.responsive-cleaned.css" media="all">
<link href='http://php-ilyaru.rhcloud.com/moysite/tabulous.css' rel='stylesheet' type='text/css'>
<script src="http://php-ilyaru.rhcloud.com/moysite/jquery.js"></script>
<script src="http://php-ilyaru.rhcloud.com/moysite/script.responsive.js"></script>
<script type="text/javascript">
(function($) {
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "10px",
"left":0,
"right":0
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
block.height(div.height())
})
}).eq(0).click();
$(window).resize(function() {
block.height(divs.filter("." + show).height())
})
})
}
})(jQuery);</script>
<style>
@media (max-width: 520px) and (min-width: 200px) {
.art-content .art-postcontent-0 .layout-item-old-0 {
padding-right: 3px;
padding-left: 3px;
}
.art-post {
padding: 3px;
}
.art-footer {
padding: 10px 0px 0px 0px;
}
}
</style></head>
<body>
<div id="art-main">
<div>
<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-content">
<div id="wrapper">
<div id="tabs3">
<ul id="tabs_tabs">
<li><a href="#tabs-1" title="">текст, которому не хватает одной строки</a></li>
<li><a href="#tabs-2" title="">простой текст</a></li>
<li><a href="#tabs-3" title="">еще один простой текст</a></li>
<li><a href="#tabs-4" title="">заключительный текст</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p style="text-align:center">
здесь просто какой-то текст <a href="#" >ссылочка</a>.<br>
</p>
</div>
<div id="tabs-2">
<p>
текст по правому краю<br>
простой.
</p>
</div>
<div id="tabs-3">
<p>
тоже простой текст<br>
</p>
</div>
<div id="tabs-4">
<p>
заключительный текст<br>
для третьей вкладки</p>
</div></div></div></div></div></div></div></div></div>
<script>
$(function(){
$('#tabs').tabulous({ effect: 'scale' });
$('#tabs2').tabulous({ effect: 'left' });
$('#tabs3').tabulous({ effect: 'up' });
$('#tabs4').tabulous({ effect: 'flip' });
});
</script>
</body>
</html>
PS: надеюсь, ничего страшного, что ссылки на css и js дал со своего хостинга...