Hello,

I am working to create a website with a banner that changed during the night and daytime but I have a HTML index and a style.css and I don't know how to do this

My html script is:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TekkiTown | Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
<div id="before_head_contain">
<div class="head_logo">
</div>
</div>

<div id="featured"></div>

<div id="nav_contain">

<!-- Start Header -->

<center>
<a href="index.html" class="menu">Home</a>
<a href="index.html" class="menu">Category 1</a>
<a href="index.html" class="menu">Category 2</a>
<a href="index.html" class="menu">Category 3</a>
<a href="index.html" class="menu">Category 4</a>
<a href="index.html" class="menu">Category 5</a>
</center>
</div>

<!-- End Header -->

<div id="left_content">

<!-- Start Latest Posts -->

<div id="latest_post">
<div class="latest-img"></div>
<div class="side-widget">Recent Posts</div>
</div>

<div id="latest-post-content">

<a href="#" class="post-title">Post Title Goes Here w/ Link</a>
<div class="latest-sub">Date and Author Goes Here</div>
<hr />

<a href="#" class="read-more">More Posts</a>

</div>
</div>

<!-- End Latest Posts -->

<!-- Start Latest Videos -->

<div id="latest_videos">
<div class="latest-img"></div>
<div class="side-widget">Latest Videos</div>

<table>
<tr>
<th><a href="#"><img src="images/video_sample.jpg" width="100" height="100" border="0" /></a></th>
<th><a href="#"><img src="images/video_sample.jpg" width="100" height="100" border="0" /></a></th>
</tr>

<tr>
<th><a href="#"><img src="images/video_sample.jpg" width="100" height="100" border="0" /></a></th>
<th><a href="#"><img src="images/video_sample.jpg" width="100" height="100" border="0" /></a></th>
</tr>

</table>

<a href="#" class="read-more">More Videos</a>

<!-- End Latest Videos -->

</div>

<!-- Start Content -->

<div id="body">

<span class="page-name">Home</span>

<div class="posts">
<a href="#" class="posts-title">Post Title Goes Here</a>
<div class="posts-info">
<span class="meta_date">Friday, December 9, 2011</span><span class="meta_author">Name</span>
<a href="#" class="post-read-more">Read More</a></div>
<a href="#"><img src="images/post-image.jpg" alt="" width="300" height="168" border="0" class="post-img" /></a><p><form name="counter"><input type="text" size="8" 
name="d2"></form> 

<script> 
<!-- 
// 
 var milisec=0 
 var seconds=30 
 document.counter.d2.value='30' 

function display(){ 
 if (milisec<=0){ 
    milisec=9 
    seconds-=1 
 } 
 if (seconds<=-1){ 
    milisec=0 
    seconds+=1 
 } 
 else 
    milisec-=1 
    document.counter.d2.value=seconds+"."+milisec 
    setTimeout("display()",100) 
} 
display() 
--> 
</script> </p></div>

<div class="posts">
<a href="#" class="posts-title">Post Title Goes Here</a>
<div class="posts-info">
<span class="meta_date">Friday, December 9, 2011</span><span class="meta_author">Name</span>
<a href="#" class="post-read-more">Read More</a></div>
<a href="#"><img src="images/post-image.jpg" alt="" width="300" height="168" border="0" class="post-img" /></a><p>bla.
</p></div>


<!-- End Content -->
    
</div>
<div id="footer">
<div id="footer-text">© 2012 Website Here. All Rights Reserved. Created by <a href="http://www.theminecolony.com">TheMineColony</a> </div>
</div>
</div>
</body>
</html>
And my Style.css =
Code:
body {
background-image:url(images/bg.jpg);
}

#container {
margin-left:auto;
margin-right:auto;
width:1000px;
}

#before_head_contain {
width:1000px;
height:100px;
background-color:#FFFFFF;
color:#FFF;
}

#login {
vertical-align:middle;
margin-top:20px;
position:absolute;
margin-left:700px;
background-color:#F1F1F1;
height:60px;
width:300px;
}

.login {
color:#4A4A4A;
font-family:Verdana, Geneva, sans-serif;
font-weight:700;
}



.head_logo {
margin-top:12px;
background-image:url(images/logo.bmp);
background-repeat:no-repeat;
width:570px;
height:95px;
}

#featured {
font-size:16px;
width:1000px;
height:225px;
background-image:url(images/featured.jpg);
}

#nav_contain {
position:relative;
width:1000px;
height:50px;
background:#FFF;
}

#left_content {
float:left;
width:250px;
height:1330px;
background-color:#FFF;
}

#body {
float:right;
width:750px;
height:1330px;
background:#FFF;
}

.menu {
text-align:center;
background-image:url(images/menu_bg.jpg);
border-radius:5px;
line-height:3.5em;
color:#4A4A4A;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
text-transform:uppercase;
font-weight:700;
text-shadow:0 1px 0 #FEFEFE;
margin:px;
padding:7px 10px;
}

.menu:hover {
background-image:url(images/menu_bg_roll.jpg);
color:#fff;
outline:0;
border:0;
text-shadow:none;
}

#latest_post {
background-image:url(images/widget_bg.jpg);
margin-top:10px;
clear:both;
position:absolute;
width:250px;
height:40px;
}

#latest_videos {
background-image:url(images/widget_bg.jpg);
margin-top:380px;
clear:both;
position:absolute;
width:250px;
height:40px;
}

#latest-post-content {
margin-top:55px;
}

.latest-img {
float:left;
background-image:url(images/mc_block.png);
background-repeat:no-repeat;
width:45px;
height:45px;
margin:5px;
}

.side-widget {
font-weight:500;
font-family:Verdana, Geneva, sans-serif;
color:#333;
line-height:1.7em;
float:right;
overflow:hidden;
margin-left:40px;
position:absolute;
text-shadow:2px #CCC;
font-size:24px;
}

.post-title {
display:block;
margin-left:4px;
outline:none;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:12.5px;
font-weight:700;
color:#4A4A4A;
}

.latest-sub {
display:block;
margin-left:4px;
padding-top:5px;
font-weight:300;
font-style:italic;
font-family:Verdana, Geneva, sans-serif;
font-size:11.5px;
border-bottom:thin;
border-bottom-color:#030303;
}

.post-title:hover {
border:none;
color:#06C;
}

.post-title:active {
border:none;
}

hr {
width:auto;
color:#FFF;
}

.read-more {
display:block;
text-align:center;
background-image:url(images/menu_bg_roll.jpg);
border-radius:5px;
width:110px;
height:17px;
vertical-align:middle;
float:right;
color:#fff;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-transform:uppercase;
font-weight:700;
margin:5px;
padding:5px;
}

.watch-more {
margin-top:5px;
margin-right:3px;
margin-bottom:8px;
text-align:center;
background-image:url(images/menu_bg_roll.jpg);
border-radius:5px;
width:110px;
height:17px;
vertical-align:middle;
float:right;
color:#fff;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
text-transform:uppercase;
font-weight:700;
padding:7px;
}

.read-more:hover {
background-image:url(images/read_more_roll.jpg);
color:#fff;
outline:0;
border:0;
text-shadow:none;
}

table {
margin-left:auto;
margin-right:auto;
width:100%;
height:20px;
}

#footer {
background-image:url(images/footer.jpg);
width:1000px;
height:38px;
background-color:#333;
float:left;
}

#footer-text {
text-align:center;
margin-top:5px;
vertical-align:middle;
background-color:#360;
color:#fff;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
text-transform:uppercase;
text-shadow:0 1px 0 #CCC;
padding:5px;
}

.posts-title {
margin-top:10px;
display:block;
margin-left:4px;
outline:none;
text-decoration:underline;
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
font-weight:600;
color:#333;
}

.posts-title:hover {
display:block;
color:#06C;
}

.posts-info {
font-family:Verdana, Geneva, sans-serif;
display:block;
background:#F1F1F1;
width:auto;
font-size:13px;
padding-top:5px;
padding-bottom:5px;
margin:2px 2px 2px 4px;
}

.meta_date,.meta_author,.meta_comments,.meta_edit,.meta_categories,.meta_tags {
margin-left:5px;
margin-right:5px;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
background-position:left center;
background-repeat:no-repeat;
padding:3px 0 3px 20px;
}

.meta_date {
width:100%;
background-image:url(images/time.png);
}

.meta_author {
background-image:url(images/author.png);
}

.post-img {
float:left;
margin:5px;
}

p {
font-family:Verdana, Geneva, sans-serif;
color:#4A4A4A;
font-size:14px;
margin-top:5px;
}

.posts {
width:auto;
height:250px;
margin-left:6px;
margin-right:6px;
}

.post-read-more {
float:right;
margin-top:1px;
line-height:1.1em;
background-image:url(images/post-read-more.jpg);
background-repeat:no-repeat;
width:110px;
height:15px;
color:#fff;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
text-transform:uppercase;
font-weight:700;
padding:1px;
}

.post-read-more:hover {
background-image:url(images/post-read-more-roll.jpg);
}

.post-space {
background-image:url(images/post-space.jpg);
height:1px;
width:auto;
margin:80px 5px 5px;
}

.page-name {
font-family:Verdana, Geneva, sans-serif;
font-size:22px;
margin-left:4px;
font-weight:700;
text-decoration:underline;
}
Can any one help me with this? The images has to be rotate 6 AM and 6 PM

Thanks
Sjoerd