I have a main css file.. It is common to all my jsp. On my other jsp, I need to remove a background picture.. How can i overlapped it?
Part of the css that should be overlapped.
#body .header div {
background: url(images/smiling-man.jpg) no-repeat bottom right; --> i want this
removed. by overlapping it with another css.
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
This is what i have done.. just removing the the background does not worked and added a class overlap on the div.
.overlap{
background:none;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
My HTML
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="product.css">
<title>Lot Movement Main Page</title>
</head>
<body>
<body>
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.jpg" alt="" /></a>
</div>
<nav>
<ul>
<li class="selected"><a href="index.html"><span>home</span></a></li>
<li> <a href="#"><span>Product </span></a>
<ul>
<li>
<a href="#"><span>Input</span></a>
</li>
<li>
<a href="#"><span>Enquiry</span></a>
</li>
</ul>
</li>
<li><a href="services.html"><span>Movement</span></a></li>
<li><a href="contact.html"><span>contact us</span></a></li>
</ul>
</nav>
</div>
<div id="body">
<div class="header">
<div id ="prodoverlap">
<h3>Lot Movement Tracking System</h3>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div>
<h3>AusTralAsia</h3>
<ul>
<ul>
<li>+630212013129 -Main</li>
</ul>
</ul>
</div>
<div>
<h3>europe</h3>
<ul>
<li>To Be Announced</li>
</ul>
</div>
<div>
<h3>canada</h3>
<ul>
<li>To Be Announced</li>
<li></li>
</ul>
</div>
<div>
<h3>middle east</h3>
<ul>
<li>To Be Announced</li>
<li></li>
</ul>
</div>
<div>
<h3>follow us:</h3>
<a class="facebook" href="http://www.facebook.com/" target="_blank">facebook</a>
<a class="twitter" href="http://twitter.com" target="_blank">twitter</a>
</div>
</div>
<div>
<p>© Copyright 2012. All rights reserved</p>
</div>
</div>
</body>
</body>
</html>
My Main CSS
/* Template by freewebsitetemplates.com */
body {
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding: 0;
}
#header {
margin:0 auto;
padding: 0;
overflow: hidden;
width: 960px;
}
#header #logo {
float: left;
height: 144px;
width: 355px;
}
#header #logo img {
border: 0;
}
#header ul li {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
width: 121px;
}
#header ul li a,
#header ul li a span,
#header ul li a:hover,
#header ul li a:hover span,
#header ul li.selected a,
#header ul li.selected a span
{
background: url(images/menu.gif);
}
#header ul li a
{
background-position: 10px 0;
color: #2a4f5e;
display: block;
font-size: 14px;
height: 36px;
line-height: 36px;
margin: 0;
padding: 0 0 0 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #fff;
}
#header ul li a span
{
background-position: -70px 0;
display: block;
margin: 0;
padding: 0 10px 0 0;
}
#header ul li a:hover {
background-position: -186px -37px;
color: #346b84;
text-shadow: none;
}
#header ul li a:hover span {
background-position: -70px -37px;
}
#header ul li.selected a{
background-position: 10px 36px;
color: #fff;
text-shadow: none;
}
#header ul li.selected a span{
background-position: -70px -74px;
}
/*dropdown*/
#header ul ul {
display: none;
}
#header ul li:hover > ul {
display: block;
}
#header ul ul li a span
{
background-position: -70px 0;
font-size: 10px;
text-transform: none;
display: block;
margin: 0;
padding: 0 10px 0 0;
}
#header ul ul li a:hover {
background-position: -186px -37px;
color: #346b84;
text-shadow: none;
}
#body {
background: url(images/bg-content.gif) repeat-x top left;
margin: 0;
padding: 0;
min-width: 960px;
}
#body .header {
background: url(images/bg-body.gif) repeat-x bottom center;
margin: 0 0 30px 0;
}
#body .header div {
background: url(images/smiling-man.jpg) no-repeat bottom right;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
#body .header div div {
background: none;
margin: 0;
padding: 0 0 0 13px;
height: 200px;
width: 490px;
}
#body .header div h3 {
color: #2a4f5e;
font-size: 20px;
line-height: 30px;
margin: 18px 0 0 0;
padding: 0;
text-shadow: 1px 1px 1px #fff;
}
#body .header div h3 span {
display: block;
font-size: 25px;
}
#body .header div h3 a {
color: #2a4f5e;
text-decoration: none;
}
#body .header div h3 a:hover {
color: #507685;
}
#body .header div p {
color: #507685;
font-size: 14px;
line-height: 24px;
margin: 12px 0 6px 0;
padding: 0;
text-shadow: 1px 1px 1px #fff;
}
#body .header div p a {
color: #507685;
}
#body .header div p a:hover {
color: #2a4f5e;
}
#body .header ul {
overflow: hidden;
margin: 0;
padding: 49px 0 0;
}
#body .header ul li {
float: left;
list-style: none;
padding: 0 5px;
}
#body .body {
border: 1px solid #e0e0e0;
margin: 0 auto 34px auto;
overflow: hidden;
padding: 0 2px;
width: 954px;
}
#body .body div {
float: left;
}
#body .body .section {
background: url(images/bg-section.gif) repeat-x top left;
height: 193px;
margin: 0;
padding: 35px 0 0 40px;
width: 186px;
}
#body .body .section img {
display: block;
}
#body .body .section a {
color: #2a4f5e;
display: block;
font-size: 14px;
font-weight: bold;
height: 145px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 145px;
}
#body .body .section a:hover {
color: #507685;
}
#body .body .section img {
border: 0;
}
#body .body .article {
background: url(images/bg-article.gif) no-repeat top center;
overflow: hidden;
padding: 19px 16px;
width: 470px;
}
#body .body .article img {
border: 0;
float: left;
padding: 0 10px 0 0;
}
#body .body .article h4 {
color: #2a4f5e;
font-size: 15px;
font-weight: bold;
margin: 12px 0;
padding: 0;
}
#body .body .article h4 a {
color: #2a4f5e;
text-decoration: none;
}
#body .body .article h4 a:hover {
color: #507685;
}
#body .body .article p {
color: #2a4f5e;
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 0;
}
#body .body .article p a {
color: #2a4f5e;
}
#body .body .article p a:hover {
color: #346b84;
}
#body .footer {
margin: 0 auto;
overflow: hidden;
padding: 0 0 15px 0;
width: 960px;
}
#body .footer div {
float: left;
margin: 0;
padding: 0;
}
#body .footer div ul {
margin: 0;
padding: 0;
}
#body .footer div ul li {
list-style: none;
margin: 0 0 15px;
padding: 0 0 15px;
}
#body .footer h3 {
color: #2a4f5e;
font-size: 14px;
line-height: 26px;
margin: 0 0 12px 0;
padding: 0;
text-align: justify;
text-transform: uppercase;
}
#body .footer h3 a {
color: #2a4f5e;
text-decoration: none;
}
#body .footer h3 a:hover {
color: #507685;
}
#body .footer .section {
padding: 0 10px;
width: 220px;
}
#body .footer ul li {
background: url(images/border-dashed.gif) repeat-x bottom left;
}
#body .footer ul li:last-child {
background: none;
}
#body .footer li p {
color: #5d5d5d;
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .footer li p a {
color: #5d5d5d;
text-decoration: underline;
}
#body .footer li p a:hover {
color: #aeaeae;
}
#body .footer li span {
color: #aeaeae;
display: block;
font-size: 10px;
line-height: 16px;
margin: 5px 0 0;
padding:0;
}
#body .footer ul.news li p {
background: url(images/bullets.gif) no-repeat 0 8px;
padding: 0 0 0 15px;
}
#body .footer .featured {
padding: 0 18px 0 24px;
width: 438px;
}
#body .footer .featured ul li {
overflow: hidden;
}
#body .footer .featured img {
border: 1px solid #dbddde;
float: left;
margin: 0 20px 0 0;
padding: 1px;
}
#body .footer .featured p {
margin: 0;
padding: 0;
}
#body .contact,
#body .about,
#body .services,
#body .blog {
margin: 0 auto;
padding: 25px 10px 50px 10px;
width: 940px;
}
#body h1 {
color: #2a4f5e;
font-size: 27px;
font-weight: bold;
height: 74px;
line-height: 74px;
margin: 0;
padding: 0;
text-indent: 10px;
text-transform: uppercase;
}
#body .contact p {
color: #7b7b7b;
font-size: 15px;
font-weight: bold;
line-height: 26px;
margin: 0;
padding: 40px 0;
text-align: justify;
width: 830px;
}
#body .contact p a {
color: #7b7b7b;
}
#body .contact p a:hover {
color: #2a4f5e;
}
#body .contact div {
margin: 0;
padding: 0 0 30px 0;
}
#body .contact div h3 {
color: #5d5d5d;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 0 0 5px 0;
}
#body .contact div ul {
margin: 0;
padding: 0 0 20px 0;
}
#body .contact div ul li {
color: #5d5d5d;
font-size: 14px;
list-style: none;
margin: 0;
padding: 5px 0;
}
#body .about div {
padding: 50px 0 0 0;
}
#body .about h2 {
color: #2a4f5e;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#body .about p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 10px 0 0;
padding: 0;
text-align: justify;
width: 830px;
}
#body .about p a {
color: #5d5d5d;
}
#body .about p a:hover {
color: #2a4f5e;
}
#body .services div {
overflow: hidden;
margin: 0;
padding: 40px 0 0;
}
#body .services h2 {
color: #2a4f5e;
font-size: 16px;
font-weight: bold;
line-height: 24px;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#body .services h2 a {
color: #2a4f5e;
}
#body .services h2 a:hover {
color: #507685;
}
#body .services h3 {
color: #2a4f5e;
font-size: 14px;
font-weight: bold;
line-height: 24px;
margin: 15px 0 0;
padding: 0 30px 0 0;
text-transform: uppercase;
}
#body .services h3 a {
color: #2a4f5e;
}
#body .services h3 a:hover {
color: #507685;
}
#body .services h4 {
color: #2a4f5e;
font-size: 16px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#body .services p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
}
#body .services p a {
color: #5d5d5d;
}
#body .services p a:hover {
color: #2a4f5e;
}
#body .services div ul {
float: left;
margin: 0;
padding: 20px 0 0;
width: 312px;
}
#body .services div ul li {
background: url(images/bullets.gif) no-repeat center left;
color: #5d5d5d;
font-size: 14px;
list-style: none;
margin: 0;
padding: 5px 0 5px 12px;
text-align: left;
}
#body .services div div {
overflow: hidden;
margin: 0;
padding: 0 0 5px 0;
}
#body .services div div img {
float: left;
padding: 0 10px 0 0;
}
#body .services div div p {
padding: 0 30px 0 0;
text-align: justify;
}
#body .products {
margin: 0 auto;
padding: 25px 0 70px 0;
width: 960px;
}
#body .products h2 {
color: #2a4f5e;
font-size: 26px;
margin: 0;
text-align: center;
text-transform: uppercase;
padding: 90px 0 30px 0;
}
#body .products p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0 10px;
text-align: justify;
}
#body .products p a {
color: #5d5d5d;
}
#body .products p a:hover {
color: #2a4f5e;
}
#body .products div {
overflow: hidden;
margin: 0 0 45px 0;
padding: 0;
}
#body .products div div {
float: left;
margin: 0;
padding: 0 10px;
text-align: center;
width: 300px;
}
#body .products div div h3 {
color: #2a4f5e;
font-size: 16px;
line-height: 24px;
margin: 0;
padding: 0 0 10px 0;
text-align: justify;
text-transform: uppercase;
}
#body .products div p {
font-size: 16px;
}
#body .products div div p {
font-size: 14px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog {
overflow: hidden;
}
#body .blog div {
float: left;
padding: 60px 0 0 0;
width: 630px;
}
#body .blog ul {
float: left;
margin: 0;
padding: 38px 0 0 30px;
width: 280px;
}
#body .blog ul li {
background: url(images/border-dashed.gif) repeat-x bottom left;
list-style: none;
margin: 0;
padding: 22px 0;
}
#body .blog ul li:last-child {
background: none;
}
#body .blog h2 {
color: #2a4f5e;
font-size: 16px;
margin: 0;
padding: 0;
text-transform: capitalize;
}
#body .blog h3 {
color: #5d5d5d;
font-size: 14px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog h3 a {
color: #5d5d5d;
}
#body .blog h3 a:hover {
color: #2a4f5e;
}
#body .blog p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog p a {
color: #5d5d5d;
}
#body .blog p a:hover {
color: #2a4f5e;
}
#body .blog div p {
padding: 15px 0;
}
#body .blog div p.article {
font-weight: bold;
}
#footer {
background: #f5f5f5 url(images/bg-footer.gif) repeat-x top left;
margin: 0;
min-width: 960px;
padding: 0;
}
#footer div {
margin: 0 auto;
overflow: hidden;
padding: 26px 0 0;
width: 960px;
}
#footer div div {
float: left;
margin: 0;
padding: 0;
text-align: center;
width: 192px;
}
#footer div div h3 {
color: #818a8c;
font-size: 12px;
font-weight: bold;
margin: 0 0 5px 0;
padding: 0;
text-transform: uppercase;
}
#footer div div ul,
#footer div div ul li {
margin: 0;
list-style: none;
padding: 0;
}
#footer div div ul li {
font-size: 12px;
line-height: 22px;
color: #818a8c;
}
#footer div a.facebook,
#footer div a.twitter {
display: block;
float: left;
height: 27px;
margin: 10px 0 0;
text-indent: -99999em;
width: 40px;
}
#footer div a.facebook,
#footer div a.twitter {
background: url(images/icons.gif) no-repeat;
}
#footer div a.facebook {
background-position: 0 0;
margin: 10px 0 0 58px;
_margin: 10px 0 0 28px;
}
#footer div a.twitter {
background-position: 0 -37px;
}
#footer div p {
color: #c1c1c1;
font-size: 12px;
margin: 0;
padding: 0 0 30px 0;
text-align: center;
text-shadow: 1px 1px 1px #fff;
}
My other CSS to overwrite.
/*
Document : login
Created on : Nov 15, 2012, 2:15:26 PM
Author : god-gavedmework
Description:
Purpose of the stylesheet follows.
*/
.overlap{
background:none;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
table
{
position:absolute;
width: 20%;
float: left;
}
.errorMessage {
color: red;
font-size: 0.8em;
}
You could try to use the visibility hidden that way it will take the same space but will be invisible