div与动态元素推动其他div下降

时间:2009-09-21 20:35:15

标签: css html

所以,我有一个困境。我的标签正在按下它下面的内容。以下是一些代码:

<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>

这是我的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;
}

要查看我在说什么,我的网站是:http://www.charmscorp.com/inspect/projects.php - 点击上方的标签。不要介意网站的缓慢,这是一个服务器问题...所以你必须等待几秒钟才能初始化标签。

另外,正如你所看到的,我评论了绝对的位置。我认为这将是答案,但相反,它只是将标签div放在内容的顶部...请帮助,这让我头疼!

2 个答案:

答案 0 :(得分:2)

不是让类“蓝色”的div更高 - 从而揭示下拉 - 为什么不用自己的类“subtext”显示()段落呢?

默认设置为display:none,并使用JavaScript显示它们。你需要将它们设置为position:absolute,因此它们不会向下推送任何内容。

答案 1 :(得分:0)

好的,我解决了这个问题。我做了一个位置:绝对,然后是margin-top:27px,它将内容div推到了我想要的位置。然而,出现了另一个问题,即IE相关。我会为那个开始一个新线程,因为这是一个新问题。谢谢!