Jump to content

Cascading Div Pushing Down Div Below It


rmpotter

Recommended Posts

I didn't know if I would put this problem under the html section instead, but I suspect this to be a css problem.. let me know if I'm wrong.anyways... the problem is this: 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!

Link to comment
Share on other sites

You're using <p> elements where they shouldn't be.The quick fix would be to apply "margin: 0" to the <p> elements, but using <p> elements there is about as bad as using tables for layout: It's semantically incorrect.Try changing this:

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

for this:

<dl id="navigation"><dt><a href="<? echo $web_app_path ?>home.php">Home</a></dt><dd>View/update contact information</dd><dt><a href="<? echo $web_app_path ?>projects.php">Projects</a></dt><dd>Create/open projects, view existing reports</dd><dt><a href="<? echo $web_app_path ?>help.php">Help</a></dt><dd>If something doesn't work, click here</dd></dl>

Then style the dl, dt and dd elements with CSS however necessary.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...