New Topic/Question
Reply
I have a problem with my CSS i have tried to code it so that the footer will stay down at the bottom but it isnt working for whatever reason please help.
This is my code
CSS
/* All Page Elements */
Body
{
background: url("./images/background.jpg");
background-color: #3c3231;
background-repeat: no-repeat;
}
.header
{
background: url("./images/header_background.png");
background-color: white;
background-position: center;
background-repeat:no-repeat;
position: absolute;
width: 954px;
height: 90px;
margin-left: -475px;
margin-right: auto;
left: 50%;
top: 0px;
color: black;
font-family: Arial;
text-align: center;
}
.container
{
background-color: white;
position: relative;
width: 954px;
top: 70px;
margin-left: -475px;
margin-right: auto;
left: 50%;
min-height: 100%;
}
.content
{
position: relative;
width: 954px;
margin: 20px;
width: 912px;
font-family: Arial;
text-align: center;
min-height: 100%;
}
.clear
{
clear: both;
}
.footer
{
background-color: white;
position: relative;
bottom: 0;
width: 100%;
height: 150px;
}
.footer-text1
{
color: #333333;
font-family: Arial;
float: left;
width: 45%;
margin-left:4%;
height: 100%;
}
.footer-links li a
{
text-decoration: none;
color: #333333;
}
.footer-text2
{
color: #333333;
font-family: Arial;
float: right;
width: 45%;
height: 100%;
}
/* Navigation Menu */
.navigationbar
{
position: relative;
list-style-type: none;
margin: 2%;
padding: 0;
width: 96%;
background: #0132AC;
float: left;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.navigationbar li a
{
font-family: Arial;
text-decoration: none;
width: 16%;
position: relative;
left: 10%;
color: white;
float: left;
text-align: center;
}
.navigationbar li a:hover
{
background: red;
}
/* Home Page Elements */
.home-page-slideshow-description
{
position: relative;
top: 0px;
color: #7247d7;
width: 730px;
font-family: Arial;
text-align: center;
}
.home-page-slideshow
{
position: relative;
left: 10px;
width: 894px;
height: 200px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.home-page-slideshow>img
{
width: 894px;
height: 200px;
}
.homepage-desc1
{
padding: 10px;
position: relative;
color: white;
background-color: #01326D;
width: 98%;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.youtube-video
{
position:relative;
top: 15px;
float: right;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- Meta Stuff Required -->
<link rel="stylesheet" type="text/css" href="styles.css" /> <!-- CSS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- JQuery -->
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <!-- Jquery Cycle -->
<script> <!-- Image/Text rotator requires JQuery Cycle above ^^/>/>^^/> -->
$('.home-page-slideshow').cycle({
fx: 'fade',
timeout: 3000
});
</script>
<script>
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
</script>
<title>
JWT Haulage Group
</title>
</head>
<body>
<div class='header'>
<h1>JWT Haulage Group Logo</h1>
</div>
<div class='container'>
<ul class='navigationbar'>
<li><a href="index.html">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">ETS2</a></li>
<li><a href="#">UKTS/GTS</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class='content'>
<hr>
<div class='homepage-desc1'>
JWT Haulage Group Ltd. Is a Virtual Trucking Company for various truck simulation games developed by SCS Software.
</div>
<div class='youtube-video'>
<iframe
width="420"
height="345"
src="http://www.youtube.com/embed/OGJu04tVIWg">
</iframe>
</div>
<hr>
</div>
<div class='clear'>
</div>
<div class='footer'>
<div class='footer-text1'>
<h3>Links:</h3>
<ul class='footer-links'>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<div class='footer-text2'>
</br>
</br>
<script>
document.write("Date: " + month + "/" + day + "/" + year)
</script>
</div>
<div class='clear'>
</div>
</div>
</div>
</body>
</html>
MultiQuote
| 