AirfieldCards
10-29-2011, 04:19 PM
Hi People.
My site is currently running Joomla but I want to get away from that and make it more dynamic to ease my work burden.
I am trying to put together the site with html php and css.
I have the following page http://www.airfieldcards.com/html/index.html and am trying to put a php file into the #body section.
Here is the code for all three files
index.html
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<div class="HorizLinks">
</div>
</div>
<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="http://www.airfieldcards.com">Home</a></li>
<li><a href="http://www.airfieldcards.com">By Name</a></li>
<li><a href="http://www.airfieldcards.com">By County</a></li>
<li><a href="http://www.airfieldcards.com">By ICAO Code</a></li>
<li><a href="http://www.airfieldcards.com">Add Airfield</a></li>
<li><a href="http://www.airfieldcards.com">Logbook Calculator</a></li>
<li><a href="http://www.airfieldcards.com">Contact Us</a></li>
</div>
</div>
<div id="leftnav">This is the leftnav</div>
<div id="rightnav">Please visit our sponsors</div>
<div id="body"><?php include("1.php"); ?></div>
<div id="footer">This is the footer</div>
</body>
</html>
Here is the style.css
#container {
width: 1000px;
}
#header {
width: 1000px;
height: 100px;
position: relative;
background-image: url(images/headerBG.jpg);
border-bottom: 2px solid #000000;
}
#header a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;
}
#header a:visited {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
#header a:hover {
color: #cc0000;
text-decoration: none;
font-weight: bold;
}
.HorizLinks {
position: absolute; top: 77px; left: 180px;
}
.HorizLinks ul {
margin: 0px;
}
.HorizLinks li {
margin: 0px 15px 0px 0px;
list-style-type: none;
display: inline;
}
#horizontalnav {
width: 1000px;
height: 30px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 5px; left: 5px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 5px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
text-decoration: bold;
font-size: 15px;
font-family: Verdana;
}
.navlinks li a:hover{
color: #ffffff;
/*background-image: url(images/BGhover.jpg);*/
background-color:#36F;
/*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];*/
text-decoration: underline;
}
#header p {
color: #000000;
font-weight: bold;
}
.smalltext {
font-size: 9px;
font-family: Arial;
}
#leftnav {
float: left;
width: 168px;
height: 3000px;
background-color: #2949ea;
border-right: 1px dashed #694717;
}
#rightnav {
float: right;
width: 122px;
height: 3000px;
background-color: #e8e8e7;
border-left: 1px dashed #694717;
}
#body {
margin: auto;
width: 710px;
padding: 10px 0px 0px 10px;
}
#footer {
clear: both;
background-color: #D1C0A7;
}
.box {
margin-top: 10px;
padding: 5px 5px 5px 5px;
background-color: #dddddd;
border: 2px solid #d22929;
width: 350px;
color: #000000;
}
h2 {
font-size: 20px;
color: #cc0000;
padding: 10px;
font-family: Verdana;
}
the 1.php file is simply a echo "hello world" just to test the thing.
Please could someone tell me where I'm going wrong?
My site is currently running Joomla but I want to get away from that and make it more dynamic to ease my work burden.
I am trying to put together the site with html php and css.
I have the following page http://www.airfieldcards.com/html/index.html and am trying to put a php file into the #body section.
Here is the code for all three files
index.html
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<div class="HorizLinks">
</div>
</div>
<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="http://www.airfieldcards.com">Home</a></li>
<li><a href="http://www.airfieldcards.com">By Name</a></li>
<li><a href="http://www.airfieldcards.com">By County</a></li>
<li><a href="http://www.airfieldcards.com">By ICAO Code</a></li>
<li><a href="http://www.airfieldcards.com">Add Airfield</a></li>
<li><a href="http://www.airfieldcards.com">Logbook Calculator</a></li>
<li><a href="http://www.airfieldcards.com">Contact Us</a></li>
</div>
</div>
<div id="leftnav">This is the leftnav</div>
<div id="rightnav">Please visit our sponsors</div>
<div id="body"><?php include("1.php"); ?></div>
<div id="footer">This is the footer</div>
</body>
</html>
Here is the style.css
#container {
width: 1000px;
}
#header {
width: 1000px;
height: 100px;
position: relative;
background-image: url(images/headerBG.jpg);
border-bottom: 2px solid #000000;
}
#header a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;
}
#header a:visited {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
#header a:hover {
color: #cc0000;
text-decoration: none;
font-weight: bold;
}
.HorizLinks {
position: absolute; top: 77px; left: 180px;
}
.HorizLinks ul {
margin: 0px;
}
.HorizLinks li {
margin: 0px 15px 0px 0px;
list-style-type: none;
display: inline;
}
#horizontalnav {
width: 1000px;
height: 30px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 5px; left: 5px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 5px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
text-decoration: bold;
font-size: 15px;
font-family: Verdana;
}
.navlinks li a:hover{
color: #ffffff;
/*background-image: url(images/BGhover.jpg);*/
background-color:#36F;
/*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];*/
text-decoration: underline;
}
#header p {
color: #000000;
font-weight: bold;
}
.smalltext {
font-size: 9px;
font-family: Arial;
}
#leftnav {
float: left;
width: 168px;
height: 3000px;
background-color: #2949ea;
border-right: 1px dashed #694717;
}
#rightnav {
float: right;
width: 122px;
height: 3000px;
background-color: #e8e8e7;
border-left: 1px dashed #694717;
}
#body {
margin: auto;
width: 710px;
padding: 10px 0px 0px 10px;
}
#footer {
clear: both;
background-color: #D1C0A7;
}
.box {
margin-top: 10px;
padding: 5px 5px 5px 5px;
background-color: #dddddd;
border: 2px solid #d22929;
width: 350px;
color: #000000;
}
h2 {
font-size: 20px;
color: #cc0000;
padding: 10px;
font-family: Verdana;
}
the 1.php file is simply a echo "hello world" just to test the thing.
Please could someone tell me where I'm going wrong?