-1
Я пытаюсь поставить на это изображение, но проблема, которую я получаю здесь, заключается в том, что изображение продолжает передавать нижний колонтитул, и я не могу его решить. Пожалуйста, помогите мне. Размер изображения для «batmanshop» равен width = 890 и height = 2000.Выравнивание изображения в html-странице
Вот код CSS и ниже является HTML код
body {
\t font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
\t background-image: url(images/background.png);
\t margin: 0;
\t padding: 0;
\t color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
\t padding: 0;
\t margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
\t margin-top: 0;
\t padding-right: 15px;
\t padding-left: 15px;
word-wrap: break-word;
}
a img {
\t border: none;
}
a:link {
\t color: black;
}
a:visited {
\t color: #6E6C64;
}
a:hover, a:active, a:focus {
\t text-decoration: none;
}
.container {
\t width: 960px;
height:100%;
\t background-color: #FFF;
\t margin: 0 auto;
}
.header {
\t background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
\t padding: 10px 0;
\t background-color: #F1F8E0;
}
.fltrt {
\t float: right;
\t margin-left: 8px;
}
.fltlft {
\t float: left;
\t margin-right: 8px;
}
.clearfloat {
\t clear:both;
\t height:0;
\t font-size: 1px;
\t line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
\t margin: 0;
\t padding: 0;
\t list-style: none;
\t line-height: 1;
}
.nav {
\t /* Layout & positioning */
\t position: relative;
\t margin: auto; /* Centering the menu */
\t height: 46px;
\t width: 960px;
\t text-align: center;
\t
\t /* Background & effects */
\t box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
\t background: #65c0bb;
\t background-image:url(images/navImage.png);
}
.nav>li {
\t margin: 0;
\t line-height: 1;
\t padding: 0;
\t display: inline;
\t position: relative;
\t margin: 0 12px;
}
.nav::after, .nav::before {
\t content: "";
\t display: block;
\t position: absolute;
\t top: 6px;
\t height: 0px;
\t width: 0px;
\t border: 23px solid #65c0bb;
\t z-index: -1;
}
/* The left ribbon */
.nav::before {
\t border-left-color: transparent;
\t left: -30px;
}
/* The right ribbon */
.nav::after {
\t border-right-color: transparent;
\t right: -30px;
}
.nav>li>a {
\t display: inline-block;
\t padding: 15px 20px;
\t position: relative;
\t font-family: 'Oswald', sans-serif;
\t font-size: 16px;
\t text-transform: uppercase;
\t text-decoration: none;
\t color: #fff;
\t
\t -webkit-transition: color .3s linear;
\t -moz-transition: color .3s linear;
\t -o-transition: color .3s linear;
\t -ms-transition: color .3s linear;
\t transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
\t color: #eae8a5;
}
.nav>li>a::after {
\t content: "";
\t height: 15px;
\t width: 15px;
\t position: absolute;
\t right: -20px;
\t top: 16px;
\t display: block;
}
.nav>li:last-child>a::after {
\t display: none;
}
.nav ul {
\t position: absolute;
\t left: -9999px;
\t padding-top: 10px;
\t border-bottom: 1px solid #ccc;
\t opacity: 0;
\t -webkit-transition: opacity .3s linear;
\t -moz-transition: opacity .3s linear;
\t -o-transition: opacity .3s linear;
\t -ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
\t left: 0;
\t opacity: 1;
\t top: 30px;
}
.nav ul li:hover>ul {
\t left: 150px;
\t opacity: 1;
\t top: -11px;
\t padding-left: 12px;
\t border-bottom: 0;
\t box-shadow: none;
}
.nav ul li {
\t display: block;
\t position: relative;
\t border-top: 1px solid #ccc;
\t border-left: 1px solid #ccc;
\t border-right: 1px solid #ccc;
\t width: 150px;
\t text-align: justify;
\t z-index: 9;
\t background: #eee;
\t box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
\t -webkit-transition: background .3s linear;
\t -moz-transition: background .3s linear;
\t -ms-transition: background .3s linear;
\t -o-transition: background .3s linear;
}
.nav ul li a {
\t font-family: "Oswald", sans-serif;
\t font-size: 14px;
\t text-decoration: none;
\t display: block;
\t padding: 7px 12px 7px 20px;
\t color: #65c0bb;
\t -webkit-transition: color .3s linear;
\t -moz-transition: color .3s linear;
\t -ms-transition: color .3s linear;
\t -o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
\t color: #4db6b0;
}
.nav ul li:hover {
\t background: #f7f7f7;
}
.nav ul ul li:last-child {
\t border-bottom: 1px solid #ccc;
}
.nav ul ul li {
\t box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
\t content: "";
\t display: block;
\t z-index: 1;
\t position: absolute;
\t height: 9px;
\t width: 9px;
}
.nav>li>ul::after {
\t border: 1px solid #ccc;
\t background: #eee;
\t border-right: 0;
\t border-bottom: 0;
\t top: 5px;
\t left: 25px;
\t -webkit-transform: rotate(45deg);
\t -moz-transform: rotate(45deg);
\t -o-transform: rotate(45deg);
\t -ms-transform: rotate(45deg);
}
.nav>li>ul::before {
\t height: 1px;
\t width: 12px;
\t background: #eee;
\t border-right: 0;
\t border-bottom: 0;
\t top: 10px;
\t left: 24px;
\t z-index: 99;
}
.nav ul ul::after {
\t border: 1px solid #ccc;
\t background: #eee;
\t border-right: 0;
\t border-bottom: 0;
\t top: 20px;
\t left: 8px;
\t position: absolute;
\t -webkit-transform: rotate(-45deg);
\t -moz-transform: rotate(-45deg);
\t -o-transform: rotate(-45deg);
\t -ms-transform: rotate(-45deg);
}
.nav ul ul::before {
\t height: 10px;
\t width: 1px;
\t background: #eee;
\t z-index: 99;
\t top: 20px;
\t left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
\t padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
\t 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">
\t \t <li>
<a href="index.html">Home</a>
</li>
\t \t <li>
\t \t \t <a href="themes.html">Themes</a>
\t \t \t <ul>
\t \t \t \t <li><a href="boys.html">Boys Party Theme</a></li>
\t \t \t \t <li><a href="girls.html">Girls Party Theme</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li><a href="about.html">About</a></li>
\t \t <li><a href="contact.html">Contact</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signUp.html">Sign Up</a></li>
\t </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">
\t \t <li>
<a href="index.html">Home</a>
</li>
\t \t <li>
<a href="about.html">About</a>
</li>
\t \t <li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="terms.html">Terms and Conditions</a>
</li>
\t </ul>
</div>
</div>
</div>
</body>
</html>
есть два IMG плицирован: что вы хотите сделать? В любом случае, вы не можете поместить изображение в другое подобное! – Gael
Образ в классе «batmanshop» - это тот, который проходит нижний колонтитул. То, что я говорю, это то, что я хочу, чтобы нижний колонтитул сказал ниже, но изображение передает его. –