hey guys,
been working on this all day.
have created a real basic landing page at http://www.byblosgroup.com.au
The picture at the bottom wont sit on the footer div, have tried everything…can you please help me?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Byblos Group Website | Commercial Construction Company, Western Australia | Coming Soon</title>
<meta name="keywords" content="Byblos Group Constructions, Commercial Construction Company, Perth, Western Australia" />
<meta name="description" content="Byblos Group are a Commercial Construction Company based in Paraburdoo, Western Australia">
<meta name="author" content="pddesign.com.au">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="mailto:"><img src="img/byblos-logo-02.gif" width="944" height="112" alt="Byblos Group Constructions Coming Soon DECEMBER 2013"></a></h1>
</div>
<div id="navigation"></div>
<div id="content">
<h2>THIS WEBSITE IS CURRENTLY UNDER CONSTRUCTION</h2>
<p> We are currently working hard to design our new online website. This will be complete in the next few weeks. In the meantime please read a little more about us below</p>
<br>
<h2>About Us</h2>
<p>
Byblos Group Constructions have been delivering solidly built, high quality buildings in Paraburdoo for some time now. </p>
<p>Based in Paraburdoo, Western Australia Byblos Group meet the needs of governments and major corporations for offices, retail, education facilities, health centres and large-scale accommodation of every type. We’re not just constructing buildings, we’re building communities.</p>
<p>We specialise in projects in the $10-80 million range and we’re constantly striving to exceed our customers’ expectations of value for money, providing innovative building solutions that will pass the test of time.</p>
<div id="projects">
<img src="img/project-01-small.jpg" alt="Project 01" width="250" height="166"> <img src="img/project-02-small.jpg" alt="Project 02" width="250" height="166"> <img src="img/project-03-small.jpg" alt="Project 03" width="250" height="166"> <img src="img/project-04-small.jpg" alt="Project 04" width="250" height="166"></div>
</div>
<div id="blackline">
<div class="text">
<br>
<h2>Services</h2>
<p>Byblos Group Constructions offer a comprehensive range of building services covering commercial, apartment and multi-residential developments:</p>
<ul>
<li>Planning & programming</li>
<li>Design solutions</li>
<li>Constructability review</li>
<li>Approvals and documents</li>
<li>Cost estimating</li>
<li>Value engineering</li>
<li>Scheduling</li>
<li>Construction management</li>
<li>Program management</li>
<li>Quality control</li>
<li>Risk and safety management</li>
</ul>
</div>
<img src="img/website-under-construction.gif" width="600" height="333" style="padding-top:20px" alt="This website is currently under constuction">
</div>
<div id="footer"> <a href="http://www.pddesign.com.au" target="_blank"><img src="img/pddesign-comingsoon-logo-black.gif" width="502" height="66" style="text-align:right;" alt="Paul Dickson Design"></a>
</div>
</div>
</body>
</html>
CSS
body
{
background-color:#000;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;
}
#container
{
width:100%;
overflow:hidden;
}
#projects
{
margin: 0 30px;
padding: 40px;
width: auto;
}
#header
{
background: #FFF;
padding: 20px;
text-align:centre;
}
#header h1 { margin: 0; padding-bottom: 20px; }
#navigation
{
float: left;
width: 100%;
height:20px;
background: #333;
}
#construction
{
background: #FFF;
}
#blackline
{
padding: 0 0 0 0;
margin:0 0 0 0;
border: 0;
outline: 0;
vertical-align: baseline;
overflow:hidden;
text-align:right;
background-repeat: repeat;
background-image: url(../img/graphy.png);
}
.text
{
padding-left: 40px;
margin:0px;
border: 0;
outline: 0;
vertical-align: baseline;
text-align:left;
float:left;
overflow:hidden;
}
#navigation li
{
line-height:10px;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content
{
clear: left;
padding: 40px;
background-repeat: repeat;
background-image: url(../img/graphy.png);
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer
{
background: #000;
text-align: right;
padding: 40px;
height: 1%;
overflow:hidden;
}