tags:

views:

684

answers:

2

So, I have a predicament. My tabs are pushing down the content below it. Here is some of the code:

<div id="navigation">
    <div id="test" class="blue">
 <p><a href="<? echo $web_app_path ?>home.php">Home</a></p>
<p class="subtext">View/update contact information</p>
    </div>
    <div id="lessons" class="blue">
 <p><a href="<? echo $web_app_path ?>projects.php">Projects</a></p>
<p class="subtext">Create/open projects, view existing reports</p>
    </div>
 <div id="test" class="blue">
 <p><a href="<? echo $web_app_path ?>help.php">Help</a></p>
<p class="subtext">If something doesn't work, click here</p>
    </div>
</div>

 <div id="contain3">
  <table id="maintable" align="center" width="940" cellspacing="0" cellpadding="0" class="lessontablemain">
<tr align="center" valign="top">
<td height="500" cellpadding="0" cellspacing="0">
<!--<div id="maincontent">-->
<table align="left" cellspacing="4" cellpadding="4" style=" margin-top:10px; background-color:transparent; border: 0;" width="100%" class="textfont_charms">
                <tr>
                    <td cellspacing="0" cellpadding="0" align="center"  valign="top">
   <br>
   <!--template up-->
   <!--side bar table below -->
    <? include_once("sidebar.php"); ?>
    </td>
    <td cellspacing="0" cellpadding="0" width="100%" valign="top" align="center">
    <table id="maintable" style=" margin-top:10px; background-color:transparent; border: 0;" cellspacing="0" cellpadding="0" height="100%" valign="top" width="100%">
    <tr>
    <td valign="top" align="center" width="100%" cellspacing="0" cellpadding="0" height="100%">
    <div align="center" id="content" style="vertical-align: top;"></div>        
    </td>
    </tr>

   </table>
   <!--template down-->
   </div>
</td>
</tr>
</table>
</tr>
<tr valign="bottom">
<td style="background-color: #E2E2E2;">
<?

 include('template/footer_tmpl.php');
 ?>  

</td>
</tr>
</table>
</div>

Here is my css:

#contain3{
width:940px;
margin-left:auto;
margin-right:auto;
text-align:left;
/*position: absolute;*/
top: 137;
z-index: -1;
    }

#navigation{
width:940px;
margin-left: 8px;
text-align:left;
font-family:"Lucida Grande","Lucida Sans",sans-serif;  
font-size:12px;
top: 109;
/*position: absolute;*/
z-index: 2;
}

To see what I'm talking about, my site is: http://www.charmscorp.com/inspect/projects.php - click on the tabs up above. Don't mind the slowness of the site, it's a server issue... so you have to wait a few seconds for the tabs to initialize.

Also, as you can see, I commented out position absolute. I thought that would be the answer, but instead, it just put the tab div on top of the content... Please help, this is giving me a headache!

+2  A: 

Instead of making the divs with class "blue" higher - and thus revealing the drop down - why don't you show() the paragraphs with class "subtext" themselves instead?

Have them set to display: none by default, and use JavaScript to reveal them. You'll need to set them to position: absolute also, so they don't push any content down.

wows
the problem I'm faced with is that, I'm using jquery for the drop down to bownce like it does. If I do a display: hide;, and then show(), I'm not sure I can still have the same effect.Also, when I do, position absolute, the tab div gets put on top of the content div. Not sure if you're able to access the beta version of the site, but it's: http://beta.charmscorp.com/inspect/projects.php - and on that site, the positions are absolute.If you want the css for .blue and .subtext, let me know.
Only set position absolute on the subtext items, that way the tab div won't get put on top of the content div. You should be able to use jQuery to do the same thing your doing at the moment, but with the subtext items instead. You can do things like slideDown, slideUp, etc.
wows
A: 

ok, I fixed this. I made the position: absolute, and then margin-top:27px, which pushed the content div down to where I wanted it to be. Another problem arose though, which is IE related. I'll start a new thread for that one though, as it's a new problem. Thanks!