Note that there are some explanatory texts on larger screens.

plurals
  1. PONeed to overlapped a CSS command I need to removed an image background.?
    primarykey
    data
    text
    <p>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?</p> <p>Part of the css that should be overlapped.</p> <pre><code>#body .header div { background: url(images/smiling-man.jpg) no-repeat bottom right; --&gt; i want this removed. by overlapping it with another css. height: 472px; margin: 0 auto; padding: 0; width: 960px; } </code></pre> <p>This is what i have done.. just removing the the background does not worked and added a class overlap on the div.</p> <pre><code>.overlap{ background:none; height: 472px; margin: 0 auto; padding: 0; width: 960px; } </code></pre> <p>My HTML</p> <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%&gt; &lt;%@ taglib prefix="s" uri="/struts-tags" %&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;link rel="stylesheet" type="text/css" href="product.css"&gt; &lt;title&gt;Lot Movement Main Page&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;div id="logo"&gt; &lt;a href="index.html"&gt;&lt;img src="images/logo.jpg" alt="" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;nav&gt; &lt;ul&gt; &lt;li class="selected"&gt;&lt;a href="index.html"&gt;&lt;span&gt;home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;&lt;span&gt;Product &lt;/span&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;&lt;span&gt;Input&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;&lt;span&gt;Enquiry&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="services.html"&gt;&lt;span&gt;Movement&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html"&gt;&lt;span&gt;contact us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; &lt;div id="body"&gt; &lt;div class="header"&gt; &lt;div id ="prodoverlap"&gt; &lt;h3&gt;Lot Movement Tracking System&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;div&gt; &lt;div&gt; &lt;h3&gt;AusTralAsia&lt;/h3&gt; &lt;ul&gt; &lt;ul&gt; &lt;li&gt;+630212013129 -Main&lt;/li&gt; &lt;/ul&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;europe&lt;/h3&gt; &lt;ul&gt; &lt;li&gt;To Be Announced&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;canada&lt;/h3&gt; &lt;ul&gt; &lt;li&gt;To Be Announced&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;middle east&lt;/h3&gt; &lt;ul&gt; &lt;li&gt;To Be Announced&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;follow us:&lt;/h3&gt; &lt;a class="facebook" href="http://www.facebook.com/" target="_blank"&gt;facebook&lt;/a&gt; &lt;a class="twitter" href="http://twitter.com" target="_blank"&gt;twitter&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;p&gt;&amp;copy Copyright 2012. All rights reserved&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>My Main CSS</p> <pre><code>/* 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 &gt; 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; } </code></pre> <p>My other CSS to overwrite.</p> <pre><code>/* 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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload