2010-08-06 103 views
0

我有以下结构,#tabs div是一个静态定位div。我想在ajax请求期间显示加载内部div,并使其以#tabs div(实际上是一个jquery选项卡)为中心。但是它并没有集中于我现在拥有的CSS。中心加载覆盖div

<div class="span-18 last" id="top_tab_container"> 
    <div id="loading"> 
    <div id="loading_inner"> 
     Loading... 
    </div> 
    </div> 
    <div class="normal-pad ui-widget-content ui-tabs ui-widget ui-corner-all" id="tabs"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Most Voted</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs2" title="tabs2"><span>Near You xxxx</span></a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs3" title="tabs3"><span>You are Tracking</span></a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs4" title="tabs4"><span>Most Tracked</span></a></li> 
    </ul> 
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> 

    </div><div id="tabs2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div> 

     <div id="tabs-2"> 
     </div> 
     <div id="tabs3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> 
     <div id="tracked_posts"></div> 
     </div> 

    <div id="tabs4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> 
     <div id="most_tracked_"></div> 
    </div> 
    </div> 
</div> 

#loading_inner { 
    background:transparent url(/images/loading_big.gif) no-repeat scroll center center; 
    font-size:16px; 
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    height:100px; 
    left:50%; 
    line-height:normal; 
    margin-left:-50px; 
    margin-top:-50px; 
    overflow:auto; 
    padding:10px; 
    position:fixed; 
    text-align:center; 
    top:50%; 
    width:100px; 
    z-index:2; 
} 
+0

如果有任何其他风格正在混淆,请使用萤火虫进行检查。并看看是否删除滚动或把它放在最后改变任何东西 – naugtur 2010-08-06 08:28:04

回答

0

更改位置:固定;定位:绝对; 并添加:#top_tab_container {position:relative; }

是你的意思吗?

+0

这在其他情况下,但在这里发生的事情是,jQuery的标签是通过ajax加载和选项卡divs自动填充。因此,第一次点击标签(例如tabs-2)时,加载div未正确对齐,因为标签-2可能还不存在。一旦tab-2被加载,下次点击时加载确实显示正确。有什么想法吗? – badnaam 2010-08-06 18:28:33

+0

嗯..如果你可以改变加载div的位置,我会为这些标签制作一个容器。然后将加载div作为容器的子元素并使用相同的绝对位置。这样标签可以被自动加载,并且容器应该从一开始就集中加载div。 – no1cobla 2010-08-09 15:41:33