Jump to content

Cascading Div Pushing Down Div Below It


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.

Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...