Evening
I am trying experiencing problems with a new layout. I am trying to achieve the following style:
http://www.further-flight.co.uk/testing/notes/attempt.htm
My current layout has ended up like this:
http://www.further-flight.co.uk/testing/notes/failedlayout.jpg
Code:
<div id="menu"><?php include($_SERVER['DOCUMENT_ROOT'].'/testing/notes/menu.php');?></div>
<div id="main">
1.1 Allow Apostrophes
</div>
<div id="content">
<p>
Information relating to allow apostrophes here
</p>
</div>
<div id="main">
method of testing
</div>
<div id="content">
<p>
Information relating to method of testing here
</p>
</div>
<div id="main">
testing criteria
</div>
<div id="content">
<p>
Information relating to testing criteria here
</p>
</div>
<div id="main">
current feedback
</div>
<div id="content">
<p>
Information relating to current feedback here
</p>
</div>
CSS:
#menu{
position: absolute;
margin-top: -3px;
z-index: 1;}
#main{
position: absolute;
margin-top: 10px;
margin-left: 200px;
width: 75%;
height: 15px;
font: bold 13px verdana;
color: white;
background: #606060 url(/images/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
z-index: 2;}
#content{
position: absolute;
margin-top: 40px;
margin-left: 200px;
width: 76%;
font: 13px verdana;
color: #000000;
background: #E9E9E9;
padding: 7px 10px 7px 10px; /*31px is left indentation of header text*/
z-index: 2;}
Any help would be greatly appreciated.