I've been trying to learn CSS and I'm having a bit of a problem that I hope one of the experts here can help me with. I'm pretty sure it's a simple problem, but I just can't figure out how to fix it.
Anyway, you can see my end results here. What I am trying to get is on the right side is an image to show correctly. For some reason I just can't get it to show. Any suggestions?
My code so far is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="verify-v1" content="ymb8D6xloPywy+TF2wZDeU5vjH+g0YFQ8QkIz3XFs cU=" />
<title>Home Of Creative Video Productions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="copyright" content="©2007 Creative Video Productions">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: rgb(21,0,0);
margin:0;
padding:0;
}
#container {
width:1000px;
margin:0 auto;
height:623px;
}
#banner {
background-image: url('../new/images/header.jpg');
background-repeat: no-repeat;
width: 881px;
height: 172px;
}
#nav {
float:left;
height:100%;
width:196px;
height:651px;
background-image: url('../new/images/left.jpg');
background-repeat: no-repeat;
text-align:left;
}
#mid {
text-align: left;
background-image: url('../new/images/mid.jpg')
background-repeat: no-repeat;
padding-top: 0px;
padding-left: 15px;
width: 391px;
height: 651px;
margin:0;
float:left;
color: #FFF;
}
#right {
background-image: url('../new/images/right-test.jpg')
background-repeat: no-repeat;
width: 292px;
height: 651px;
}
#copyright {
background-color: rgb(21,0,0);
width: 681px;
height: 30px;
text-align: center;
color: #FFF;
font-size: 11px;
margin-left: 75px;
clear:both;
}
div.menu {
width:175px;
padding: 0.9px;
margin-top: 0.8em;
margin-left:0.3em;
border:0px;
text-align:left;
}
div.menu a {
display:block;
font-size:17px;
font-family: "elephant";
width:100%;
padding: 0.15em;
margin-left: .0em;
border-top:1px ;
color: rgb(239,145,39);
text-decoration:none;
line-height:38px;
}
html>body div.menu a {width: auto;}
div.menu a:hover {
color: #FFF;
font-size:18px;
font-style: italic;
}
img.special {
display: block;
margin-left: 17px;
margin-right: auto;
margin-top: 5.0em;
border: none;
}
h2 {text-align: center;
font-weight: bold;
color: rgb(239,145,39);
}
p {color: rgb(254,251,154);
</style>
</head>
<body>
<div id="container">
<div id="banner">
</div>
<div id="nav"><br><br><br>
<div class="menu">
<a href=>Home</a>
<a href=>About Us</a>
<a href=>Why Us</a>
<a href=>FAQ's</a>
<a href=>Video Services</a>
<a href=>Pricing</a>
<a href=>Request Info</a>
<a href=>Contact Us</a>
</div>
<a href="..//intro.html"><img class="special" src="../images/introad.gif" alt="specials" height="169" width="125"></a>
</div>
<div id="mid">
<!--[if IE]>
<br>
<![endif]-->
<p> </p>
<p>This is a test to check spacing and overall layout.</p>
<p>This is the place where introductory information will go. So these comments are just for marking space where important
information will go.</p>
<p>So here is where the fun starts.</p>
<p> </p>
<h2>Contact Us Today! (724) 968-8679</h2>
</div>
<div id="right">
</div>
<div id="copyright"><br><br>
© 2007 Creative Video Productions
All Rights Reserved <br><br>
</div>
</div>
</body>
</html>
If anyone can tell me what I am doing wrong with my code and how to fix it, I would really appreciate it.
Thanks |
