Jump to content

[SOLVED] Layout issue


lmhart

Recommended Posts

I can not get my page to layout correctly.

 

I have three different div's at the top of a page.  The first is header, second is nav, and third is mainbody.

 

I have used different colors to identify the different div's for right now. It lays out fine but when I add the menu it moves the menu to mainbody section.  I have attached screen shots. 

 

Here is my code

<?php
header("Expires: ".gmdate("D, d M Y H:i:s")." GMT"); // Always expired 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");// always modified 
header("Cache-Control: no-cache, must-revalidate");// HTTP/1.1 
header("Pragma: nocache");// HTTP/1.0 
?>
<html>
<head>
<title>Expense Tool</title>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<link href="style.css" rel="stylesheet" type="text/css" />
</head
<body>

<div id=header>
Main street web solutions -> Expense Tracker v 1.01
</div>

<div id=nav>
 <?php include'../includes/menu.php'; ?>

</div>

<div id=mainarea>
	welcome to my site I hope you find in to your liking
</div>


</body>
</html>

 

This is the code that produces the correct color pattern without the menu

<?php
header("Expires: ".gmdate("D, d M Y H:i:s")." GMT"); // Always expired 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");// always modified 
header("Cache-Control: no-cache, must-revalidate");// HTTP/1.1 
header("Pragma: nocache");// HTTP/1.0 
?>
<html>
<head>
<title>Expense Tool</title>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<link href="style.css" rel="stylesheet" type="text/css" />
</head
<body>

<div id=header>
Main street web solutions -> Expense Tracker v 1.01
</div>

<div id=nav>
 Menu section

</div>

<div id=mainarea>
	welcome to my site I hope you find in to your liking
</div>


</body>
</html>

 

 

My style sheet

#header	{	
	/*margin:0 auto;*/
	/*text-align:left;*/

	margin-left:0 auto;
	margin-right:0 auto;
	background-color:#CCCCCC;
	/*min-height:600px;
	max-height:inherit;
	min-width:800px;*/
}


#mainarea {
	background-color:#00CC33;

	margin-left:0 auto;
	margin-right:0 auto;


}

#nav {
	background-color:#FFFF66;
	list-style:none;
}

#nav li {
background-color:#FFFF66;
width: 5em;
float: left;
margin: 0 0.3em;
padding: 0;
list-style:none;
display: inline;
}

#nav ul {
background-color:#FFFF66;
list-style:none;
}

 

I am not sure why it is doing this.  So that makes it hard for me to try an resolve

 

[attachment deleted by admin]

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.