Choose from our various pricing plans. There is a package for everyone!


Issue with positioning

View previous topic View next topic Go down

Issue with positioning

Post by donlowx on Mon May 06, 2013 8:43 pm

I'm using a tabbed menu and the problem is the content is overlapping other table cells that are behind it.

Here is what I'm using: http://cyberschool.fateback.com/how/tabmenu.html

If someone can test it out, look how it floats and overlaps over texts.


Code:
.contents
   {
   text-align:center;
   background:#ddeeff;
   border-left: solid thin white;
   position:absolute;
   visibility:show;
   left:250px;
   top:130px;
   width:500px;
   height:200px;
   }
I believe the issue is from the contents class in the CSS script. When I change position:absolute; to position:relative;, the text are not overlapped anymore, but all the tab information is displayed bellow each other when it should not be like that.

How can I make sure the content information is in their places without having them to be displayed below each other when using position:relative; ?

Thanks. Smile


Last edited by donlowx on Mon May 06, 2013 10:06 pm; edited 1 time in total
avatar
donlowx
Member
Member

Age : 62
Posts : 4
Join date : 2013-05-06
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Re: Issue with positioning

Post by Irate on Mon May 06, 2013 9:01 pm

You need to set the z-index of whatever content you want to see in the foreground to 999 so that it is definitely the highest layer in the document.

Example:

Assume you have a button that creates a new class example1 on click at a specified position and you want that class to be shown in the foreground over another class named example2, your CSS would need to look something like this...

Code:
.example1 { z-index: 999; }

Code:
.example2 { z-index: 998; }

Hope this helps Wink
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Re: Issue with positioning

Post by donlowx on Mon May 06, 2013 9:20 pm

Thanks for the reply irate. Smile

That's correct. It works fine in what you said, however what happens is this:

Tab1 === Tab2 === Tab3
======================



Content



======================

This would be the entire Tab interface. Clicking Tab1, Tab2, Tab3 all work and the contents change for each tab which is good. Z-index works fine and the contents for all tabs overlaps each other very well, however the problem is that the contents are still overlapping table cells and text information from behind it when it is at position:absolute. So when I change position to relative, the information that was overlapped from the table cells and text information can all be visible and works, however the contents of all 3 tab menus end up going below each other when they should be overlapping each other. So basically I got the overlapping things from the table cells and text information to be visible, but the contents of the tab menus just ended up going below each other.

Let me know if I am unclear, I'll write it in better format.
Thanks Smile


I removed the height and width and top from the script. Here is what I have.

Code:
<style type="text/css">
.thistab
 {
   visibility:show;
   z-index:1;
   }
.tab
 {

   visibility:show;
   z-index:20
   }
.contents
   {
   text-align:center;
   background:#ddeeff;
   border-left: solid thin white;
   position:absolute;
   visibility:show;
   }
</style>
avatar
donlowx
Member
Member

Age : 62
Posts : 4
Join date : 2013-05-06
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Re: Issue with positioning

Post by Irate on Mon May 06, 2013 9:36 pm

donlowx wrote:Thanks for the reply irate. Smile

That's correct. It works fine in what you said, however what happens is this:

Tab1 === Tab2 === Tab3
======================



Content



======================

This would be the entire Tab interface. Clicking Tab1, Tab2, Tab3 all work and the contents change for each tab which is good. Z-index works fine and the contents for all tabs overlaps each other very well, however the problem is that the contents are still overlapping table cells and text information from behind it when it is at position:absolute. So when I change position to relative, the information that was overlapped from the table cells and text information can all be visible and works, however the contents of all 3 tab menus end up going below each other when they should be overlapping each other. So basically I got the overlapping things from the table cells and text information to be visible, but the contents of the tab menus just ended up going below each other.

Let me know if I am unclear, I'll write it in better format.
Thanks Smile


I removed the height and width and top from the script. Here is what I have.

Code:
<style type="text/css">
.thistab
 {
   visibility:show;
   z-index:1;
   }
.tab
 {

   visibility:show;
   z-index:20
   }
.contents
   {
   text-align:center;
   background:#ddeeff;
   border-left: solid thin white;
   position:absolute;
   visibility:show;
   }
</style>

So you are trying to make the table cells move out of the way when you open a new tab from the menu?
You could add a .hover function with jQuery which hides all the content when you move the mouse back to the table cells you want to be displayed.

I think you should be a little bit more exact, sorry :l
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Re: Issue with positioning

Post by donlowx on Mon May 06, 2013 9:51 pm

Hey buddy. Thats fine Smile

Here is the entire script. Run it and see what happens. You'll see it clearly. In the CSS script for '.content', Try switching to position relative and look what happens.

Code:

<style>
.thistab
 {
   font-size:14px;
   color:#C90064;
   z-index:998;
   }
.tab
 {
   font-size:14px;
   cursor:pointer;
   color:0072E4;
   z-index:999;
   }
.tab:hover {
   background-color:#f6f6f6;
}
.tab:active {
   position:relative;
   top:1px;
}
.contents
   {
   text-align:center;
   background:#fff;
   position:absolute;
   width:16%;
   height:45%;
   }
</style>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="15%">
  <tr>
  <td width="100%">
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
      <tr>
        <td width="100%"><div class="contrel">
<div>
<table style="width:100%; border-collapse:collapse" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="tab1" class="thistab" onclick="javascript:DoChanges(1);" height=30 style="border-right: 1px dotted #CCCCCC">Popular</td>
<td id="tab2" class=tab onclick="javascript:DoChanges(2)" style="border-right: 1px dotted #CCCCCC">Interesting</td>
<td id="tab3" class=tab onclick="javascript:DoChanges(3)">Popular</td>
</tr>
</table>
</div>
<div class=contents id="box1"  style="z-index:2">
TAB1
TAB1
TAB1
TAB1
TAB1
TAB1
TAB1
TAB1
TAB1
TAB1
TAB1
TAB1
TAB1
 </div>
<div id="box2" class=contents style="z-index:1;">
TAB2
TAB2
TAB2
TAB2
TAB2
TAB2
TAB2
TAB2
TAB2
TAB2
TAB2
TAB2
TAB2
</div>
<div id="box3" class=contents style="z-index:1;">
TAB3
TAB3
TAB3
TAB3
TAB3
TAB3
TAB3
TAB3
TAB3
TAB3
TAB3
TAB3
TAB3
</div></div>
</td>
</tr>
</table>
</td>
  </tr>
  <tr>
  <td width="100%">sdfsdfsdfsdf</td>
  </tr>
  <tr>
  <td width="100%">sddsfsdf</td>
  </tr>
  </table>

So the information from behind the contents appear at the bottom, which is good. Now the contents of the tabs end up going below each other at the same time.


Last edited by donlowx on Mon May 06, 2013 11:53 pm; edited 1 time in total
avatar
donlowx
Member
Member

Age : 62
Posts : 4
Join date : 2013-05-06
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Re: Issue with positioning

Post by Mati™ on Mon May 06, 2013 10:28 pm

Can i see a live demo please...
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: Issue with positioning

Post by donlowx on Mon May 06, 2013 10:33 pm

Hey.
Sorry I am on localhost. If its difficult I'll find a way to resolve it.

Thanks. Smile
avatar
donlowx
Member
Member

Age : 62
Posts : 4
Join date : 2013-05-06
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Re: Issue with positioning

Post by Mati™ on Tue May 07, 2013 6:11 am

Hello

Please remove height:200px; from this code.

Code:
.contents
  {
  text-align:center;
  background:#ddeeff;
  border-left: solid thin white;
  position:absolute;
  visibility:show;
  left:250px;
  top:130px;
  width:500px;
  height:200px;
  }
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: Issue with positioning

Post by Mati™ on Wed Dec 25, 2013 11:43 am

User inactive and seems not to need help. Because of this, the support topic has been closed.


If you have other questions, please open a new topic.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: Issue with positioning

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum