rendered paste body/*css file: style.css*/
body
{
background-color: #B4B4B4;
}
/*Wrapper for overall layout*/
#Wrapper
{
width: 80%;
margin-Right: auto;
margin-Left: auto;
border: 1px solid;
min-width: 750px;
min-height: 768px;
height: 100%;
color: #000000;
}
.Header
{
background-color: #008001;
height: 18%;
min-width: 138px;
text-align: center;
}
.Navigation
{
background-color: #025702;
color: #FFFFFF;
padding-top: 0.5%;
padding-bottom: 0.5%;
text-align: center;
font-size: 70%;
height: 4%;
min-width: 31px;
}
/* -> Content Wrapper: index.php*/
.ContentBox
{
background-color: #7FFF7F;
height: 70%;
min-width: 515px;
}
/* -> Content Wrapper: *.php*/
.FullContent
{
background-color: #7FFF7F;
overflow: auto;
padding-left: 1%;
padding-right: 1%;
height: 70%;
min-width: 492px;
}
.ContentLeft
{
position: relative;
padding-right: 27%;
text-align: center;
height: 100%;
}
.ContentRight
{
position: absolute;
right: 0;
top: 0;
border-left: 1px solid;
text-align: left;
height: 100%;
width: 25%;
}
.ContentRight div
{
position: relative;
overflow: auto;
padding-left: 4px;
padding-right: 4px;
height: 50%;
}
.LeftColumn
{
position: relative;
padding-right: 80%;
text-align: left;
height: 100%;
}
.RightColumn
{
position: absolute;
overflow: auto;
right: 0;
top: 0;
border-left: 1px solid #000000;
padding-left: 1em;
text-align: left;
height: 100%;
width: 78%;
font-size: 75%;
}
#line
{
border-top: 1px solid;
}
.Footer
{
background-color: #025702;
color: #FFFFFF;
border-top: 1px solid;
padding-top: 5px;
height: 6.2%;
min-width: 75px;
}
/*End of CSS file*/
<!-- SEPARATE HTML FILE: index.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>
<body>
<div id='Wrapper'>
<!-- Header for Banner or Company Logo -->
<div class='Header'>
<img src='resource/main_pic.jpg' alt='V2ios' align='bottom' width='100%' height='100%'>
</div>
<!-- Navigation Bar -->
<div class='Navigation'>
</div>
<!-- Wrapper for Content Column -->
<div class='ContentBox'>
<!-- Main Content -->
<div class='ContentLeft'>
<div class='ContentRight'>
<!-- Upper Content -->
<div>
<p class='topic'>Latest News</p>
</div>
<!-- Lower Content -->
<div id='line'>
<p class='topic'>Announcement</p>
</div>
</div>
[ Will add a interactive flash demo, on how the product will work ]
</div>
</div>
<!-- Footer for disclaimer etc -->
<div class='Footer'>
[ Company Disclaimer ]
</div>
</body>
</html>
<!--End of HTML file-->