Tutorial :Trouble Layering in CSS



Question:

I'm trying to layer some elements using z-index and it's not working at all.

Here's the CSS:

    ul.ui-tabs-nav {list-style:none; float:left; display:block;padding:0; margin:6px 0px 0px 0px; width:85px;  }      ul.ui-tabs-nav li {padding:0px 7px; height:64px; background:url(/templates/gspm_home/images/tab_bak.gif) top left no-repeat;}      ul.ui-tabs-nav li.ui-tabs-selected {z-index:100; display:block; background:url(/templates/gspm_home/images/tab_bak_current.gif) top left no-repeat; overflow:visible;  }  .ui-tabs-panel { z-index:1; width:360px; height:256px; padding:0;background:#fff; float:right; margin-top:6px;}  

When the ui-tabs-selected class is invoked, there is supposed to be a background image that layer above the ui-tabs-panel. But nothing happens.

Here is the html markup:

<ul class="ui-tabs-nav">      <li class=""> <a href="#1" class="blue">      Link</a></li>      <li class="ui-tabs-selected"> <a href="#2" class="blue">Link</a></li>      <li class=""> <a href="#3" class="blue"></a></li>      <li class=""> <a href="#4" class="blue">Link</a></li></ul>                      <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="1">                  Content                  </div>                  <div style="" class="leading ui-tabs-panel" id="2">                  Content                  </div>                    <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="3">                  Content                          </div>                  <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="4">                  Content                  </div>  

What am I missing?

www.gspm.org - site's under construction. The section in question are the rotating tabs. Uses jQuery UI Tabs plugin.


Solution:1

You need to use:

ul.ui-tabs-nav  {      list-style:none;      padding:0;      margin:6px 0px 0px 0px;      width:85px;      position: absolute;      z-index: 100;  }     ul.ui-tabs-nav li.ui-tabs-selected  {      display:block;      background: url(/templates/gspm_home/images/tab_bak_current.gif) top left no-repeat;       width: 100px  }  

z-index won't take effect unless the element has position absolute or relative iirc. You also need to set a width on the selected li - a background image won't "escape" even with overflow: visible; (which you can now remove).

This worked for me in FireBug - hopefully it will work when you put it in code.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »