Here is my CSS code:
Code: Select all
@charset "utf-8";
/* set global default properties to ensure they are equal for all browsers */
* {
clear: none;
margin: 0;
padding: 0;
}
#container * {
float: left;
}
/* end global style */
body {
float: none;
background-color: #fff;
background-image: url(http://liveequian.com/images/background.png);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #522f40;
/*text-align: center;*/
padding: 0px;
margin: 0px;
}
/* make sure default tags don't float and have the correct clear properties */
#container br {
clear: both;
float: none;
}
#container a img, button {
border: none;
background-color: transparent;
}
#container h1, #container h2, #container strong, #container i, #container b {
float: none;
font-size: 100%;
margin: 0;
padding: 0;
}
/* end default tags */
/* utility tags */
#container .bold {
font-weight: bold;
float: none;
}
#container .clear {
display: block;
clear: both;
float: none;
margin-bottom: 3px;
}
#container .clearL {
width: 270px;
display: block;
clear: both;
float: none;
margin-bottom: 5px;
}
#container .clearR {
width: 220px;
display: block;
clear: both;
float: none;
margin-bottom: 5px;
}
#container .pink {
color: #ac4269;
float: none;
}
#container #submit, .submit {
margin-top: 20px;
}
#container .rss {
margin: 6px;
}
/* end utility tags */
/* there are four nested main containers */
#container {
float: none;
width: 1018px;
margin: auto;
text-align: left;
}
#shadow {
float: left;
width: 1018px;
padding: 0px 43px 0px 43px;
background-color: transparent;
background-position: left;
background-image: url(http://liveequian.com/images/shadow.png);
background-repeat: repeat-y;
}
#bg {
width: 1018px;
background-repeat: repeat-x;
background-color: transparent;
}
#content {
width: 1018px;
background-repeat: repeat-y;
background-color: white;
}
#content .maincontent {
height: 500px;
width: 810px;
margin: 0;
padding: 0;
background-color:#FF0000;
float: left;
}
#content .header {
height: 173px;
width: 1018px;
margin: 0;
padding: 0;
background-image: none;
}
#content .login {
height: 120px;
width: 208px;
margin: 0;
padding: 0;
background-image: url("http://liveequian.com/images/plaque.jpg");
float: left;
clear:both;
}
.loginBold {
font-weight:bold;
color:#8a7536;
}
/* end main containers */
/* navigation */
#mainnav {
width: 208px;
}
#leftCol {
width:208px;
background-color:#d3e298;
}
#centerCol {
width:810px;
background-color:#FFFFFF;
}
dl.navigation{
width:208px;
float:none;
clear:both;
margin:0;
padding:0;
list-style-type:none;}
dl.navigation dt{
width:208px;
clear:both;
float:none;
_width:208px;/*hack for IE*/
cursor:pointer;
display:block;
margin:0;
padding:0;
background-color:white;
border-width:0px;}
#mainnav a.rollover {
display: block;
width: 208px;
height: 22px;
text-decoration: none;
}
#mainnav a.rollover:hover {
background-position: -208px 0;
}
.displace {
position: absolute;
left: -5000px;
}
a.rollover:link, a.rollover:visited {
background-color: white;
}
a.rollover:hover, a.rollover:active {
background-color: #DDDDFF;
}
/* end navigation */
/* end central subcontainers / main content */
/* footer styles */
#content .footer {
height: 96px;
width: 1018px;
margin: 0;
padding: 0;
background-image: none;
}
#footer a:link, #footer a:visited {
color: #95999b;
text-decoration: none;
float: none;
}
#footer a:hover, #footer a:active {
color: #886174;
}And the main template for my pages:
Code: Select all
<!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>Live Equian</title>
<!--[if lt IE 7]>
<style type="text/css">
body {
background-image: none;
}
#content {
width: 1018px;
background-image: url(images/checkers.gif);
background-repeat: repeat-y;
}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="includes/new_style.css" lang="EN" />
</head>
<body>
<div id="container">
<div id="shadow">
<div id="bg">
<div id="content">
<div class="header">
<a href="index.php"><img src="images/hillimage.jpg" width="1018" height="173" alt="Live Equian" /></a>
</div>
<div id="leftCol">
<div class="login">
</div><!--end login div-->
<div id="mainnav">
<dl class="navigation">
<dt><img src="../images/btn_mybarn.jpg" /></dt>
<dd><a href="../train.php" class="rollover" style="background-image: url(../images/btn_trainhorses.jpg)" title="Train"><span class="displace">Train</span></a></dd>
<dd><a href="../feedhorses.php" class="rollover" style="background-image:url(../images/btn_feedhorses.jpg)" title="Feed"><span class="displace">Feed</span></a></dd>
<dd><a href="../viewriders.php" class="rollover" style="background-image:url(../images/btn_viewriders.jpg)" title="View Riders"><span class="displace">View Riders</span></a></dd>
<dt><img src="../images/btn_compete.jpg" /></dt>
<dd><a href="../viewallshows.php" class="rollover" style="background-image:url(../images/btn_entershow.jpg)" title="Enter Show"><span class="displace">Enter Show</span></a></dd>
<dd><a href="../viewresults.php" class="rollover" style="background-image:url(../images/btn_viewresults.jpg)" title="View Results"><span class="displace">View Results</span></a></dd>
<dt><img src="../images/btn_world.jpg" alt="World" /></dt>
<dd><a href="../forumindex.php" class="rollover" style="background-image:url(../images/btn_forum.jpg)" title="Forum"><span class="displace">Forum</span></a></dd>
<dt><img src="../images/btn_myaccount.jpg" /></dt>
<dd><a href="#" class="rollover" style="background-image:url(../images/btn_changepass.jpg)" title="Change Password"><span class="displace">Change Password</span></a></dd>
</dl>
</div><!--end mainnav div-->
</div><!--end left col div-->
<div id="centerCol">
ALL MAIN CONETENT HERE
</div>
<div class="footer">
footer
</div>
</div> <!--end content div-->
</div> <!--end bg div-->
</div> <!--end shaddow div-->
</div> <!--end container div-->
</body>
</html>