tomsk82
Feb 26th, 2012, 05:50 PM
Hi everyone. I've been on the forums before to have a look for answers to questions but have been scratching my head over this one for a while now! I'm pretty new to all of this so my code probably isn't brilliant but any help with this matter would be very much appreciated! I've pretty much put this together from what I've learned on the web so far. The footer ends up at the top of the 'content' rather than sitting below it. I know it'll be something obvious! Code as follows:
body, html
{
margin:0;
padding:0;
font-family:verdana;
font-size:16px;
background-image:url('images/birdsberries.png');
background-size:100%
}
a:link
{
color:#000000;
text-decoration:none;
}
a:visited
{
color:#000000;
}
a:hover
{
color:#818181;
}
a:active
}
color:#000000;
}
h1
{
color:black;
text-align:center;
font-family:Helvetica;
}
#wrap
{
margin: 0 auto;
position:relative;
width:70%;
}
#menu
{
border-style:solid;
border-color:transparent;
font-family:calibri;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-align:center;
width:100%;
border-radius:15px;
float:left;
background-color:#EEEEEE;
box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
margin-top:2em;
margin-bottom:2em;
}
#content
{
border-style:solid;
border-color:transparent;
border-radius:15px;
background-color:#EEEEEE;
width:100%;
float:left;
overflow: auto;
box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
margin-bottom:2em;
}
#footer
{
background-image:url('images/birdsberries.png');
background-repeat;no repeat;
height:50px;
clear:both;
padding:5em;
margin:0;
}
IMG.displayed
{
display: block;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-color:transparent;
border-width:20px;
height:45px;width:400px;
}
----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Bank Holidays for the UK and Ireland</title>
<link rel="stylesheet" href="mystyle.css" />
</style>
</head>
<html>
<body>
<div id="wrap">
<div id="menu">
<h1>UK & Ireland Bank Holidays</h1>
<a href="home.html"> 2012</a>    
<a href="2013.html"> 2013 </a>     </br>
</div>
</br>
<div id="content">
<table border="0">
<tr>
<td>Good Friday</td>
<td>          April 6</td>
</tr>
<tr>
<td>Easter Monday</td>
<td>          April 9</td>
</tr>
<tr>
<td>Early May Bank Holiday </td>
<td>          May 7</td>
</tr>
<tr>
<td> Spring Bank Holiday</td>
<td>          June 4</td>
</tr>
<tr>
<td>Diamond Jubilee Holiday</td>
<td>          June 5</td>
</tr>
<tr>
<td>Summer Bank Holiday</td>
<td>          August 27</td>
</tr>
<tr>
<td>Christmas Day</td>
<td>          December 25</td>
</tr>
<tr>
<td>Boxing Day </td>
<td>          December 26 </td>
</tr>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Thank you!
body, html
{
margin:0;
padding:0;
font-family:verdana;
font-size:16px;
background-image:url('images/birdsberries.png');
background-size:100%
}
a:link
{
color:#000000;
text-decoration:none;
}
a:visited
{
color:#000000;
}
a:hover
{
color:#818181;
}
a:active
}
color:#000000;
}
h1
{
color:black;
text-align:center;
font-family:Helvetica;
}
#wrap
{
margin: 0 auto;
position:relative;
width:70%;
}
#menu
{
border-style:solid;
border-color:transparent;
font-family:calibri;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-align:center;
width:100%;
border-radius:15px;
float:left;
background-color:#EEEEEE;
box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
margin-top:2em;
margin-bottom:2em;
}
#content
{
border-style:solid;
border-color:transparent;
border-radius:15px;
background-color:#EEEEEE;
width:100%;
float:left;
overflow: auto;
box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
margin-bottom:2em;
}
#footer
{
background-image:url('images/birdsberries.png');
background-repeat;no repeat;
height:50px;
clear:both;
padding:5em;
margin:0;
}
IMG.displayed
{
display: block;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-color:transparent;
border-width:20px;
height:45px;width:400px;
}
----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Bank Holidays for the UK and Ireland</title>
<link rel="stylesheet" href="mystyle.css" />
</style>
</head>
<html>
<body>
<div id="wrap">
<div id="menu">
<h1>UK & Ireland Bank Holidays</h1>
<a href="home.html"> 2012</a>    
<a href="2013.html"> 2013 </a>     </br>
</div>
</br>
<div id="content">
<table border="0">
<tr>
<td>Good Friday</td>
<td>          April 6</td>
</tr>
<tr>
<td>Easter Monday</td>
<td>          April 9</td>
</tr>
<tr>
<td>Early May Bank Holiday </td>
<td>          May 7</td>
</tr>
<tr>
<td> Spring Bank Holiday</td>
<td>          June 4</td>
</tr>
<tr>
<td>Diamond Jubilee Holiday</td>
<td>          June 5</td>
</tr>
<tr>
<td>Summer Bank Holiday</td>
<td>          August 27</td>
</tr>
<tr>
<td>Christmas Day</td>
<td>          December 25</td>
</tr>
<tr>
<td>Boxing Day </td>
<td>          December 26 </td>
</tr>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Thank you!