Aligning the Image into the html page - css

Question

Ive been trying to put in this image but the issue i'm getting here is that the image keeps on passing the footer and I cant seem to solve it. Please help me out. The image size for the "batmanshop" is width=890 and height=2000.
Here is the CSS code and below is the HTML code
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/background.png);
margin: 0;
padding: 0;
color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
word-wrap: break-word;
}
a img {
border: none;
}
a:link {
color: black;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
height:100%;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
padding: 10px 0;
background-color: #F1F8E0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 960px;
text-align: center;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #65c0bb;
background-image:url(images/navImage.png);
}
.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;
margin: 0 12px;
}
.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #65c0bb;
z-index: -1;
}
/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;
}
/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;
}
.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
-ms-transition: color .3s linear;
transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}
.nav>li>a::after {
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
top: 16px;
display: block;
}
.nav>li:last-child>a::after {
display: none;
}
.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}
.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}
.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}
.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}
.nav ul li:hover {
background: #f7f7f7;
}
.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}
.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}
.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}
.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
padding-left: 15px;
}
form {
margin-left: auto;
margin-right: auto;s
display:inline-block;
width:600px;
}
input {
float:right;
margin-right: 50px;
clear:both;
}
input2 {
float:left;
}
.row {
margin-left: 200px;
}
.batmanImage {
margin-left: 180px;
}
.batmanshop {
height:auto;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="nav">
<li>
Home
</li>
<li>
Themes
<ul>
<li>Boys Party Theme</li>
<li>Girls Party Theme</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
<div class="content">
<br/>
<IMG class="batmanImage">
<img src="images/batmantitle.jpg" name="Title" width="600" height="206">
</IMG>
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p>
<IMG class="batmanshop">
<img src="images/batmanshop.jpg" name="Title">
</IMG>
</div>
<div class="footer">
<div class="navigationbar">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Terms and Conditions
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Answer 1

Whatever you want to achieve, you can not do that :
<IMG class="batmanshop">
<img src="images/batmanshop.jpg" name="Title">
</IMG>
I replaced that by: <img class="batmanshop" src="images/batmanshop.jpg" name="Title" />
Anyway, even with your code, I do not see the image passing over the footer.
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/background.png);
margin: 0;
padding: 0;
color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
word-wrap: break-word;
}
a img {
border: none;
}
a:link {
color: black;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
height:100%;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
padding: 10px 0;
background-color: #F1F8E0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 960px;
text-align: center;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #65c0bb;
background-image:url(images/navImage.png);
}
.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;
margin: 0 12px;
}
.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #65c0bb;
z-index: -1;
}
/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;
}
/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;
}
.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
-ms-transition: color .3s linear;
transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}
.nav>li>a::after {
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
top: 16px;
display: block;
}
.nav>li:last-child>a::after {
display: none;
}
.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}
.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}
.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}
.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}
.nav ul li:hover {
background: #f7f7f7;
}
.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}
.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}
.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}
.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
padding-left: 15px;
}
form {
margin-left: auto;
margin-right: auto;s
display:inline-block;
width:600px;
}
input {
float:right;
margin-right: 50px;
clear:both;
}
input2 {
float:left;
}
.row {
margin-left: 200px;
}
.batmanImage {
margin-left: 180px;
}
.batmanshop {
height:auto;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="nav">
<li>
Home
</li>
<li>
Themes
<ul>
<li>Boys Party Theme</li>
<li>Girls Party Theme</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
<div class="content">
<br/>
<IMG class="batmanImage">
<img src="images/batmantitle.jpg" name="Title" width="600" height="206">
</IMG>
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p>
<img class="batmanshop" src="http://placehold.it/890x2000&text=Batmanshop" name="Title" />
</div>
<div class="footer">
<div class="navigationbar">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Terms and Conditions
</li>
</ul>
</div>
</div>
</div>
</body>
</html>