Linked jpg background color?

Is it possible to specify the background color of a linked jpg?
I am linking directly to a jpg on my site and I think would like to keep it that way for sake of simplicity. The link looks something like this:
http://my-domain.com/jpg-name.jpg
I am getting the default color of the browser, but am hoping I can manipulate that color somehow.
Thanks,
Brian

I'm not exactly sure what you are asking. You want the page's background color to be determined by the colors used in the JPG? Which colors? You might try something like this:
http://www.phpclasses.org/package/5577-PHP-Get-the-most-used-colors-in-an-image.html

Similar Messages

Jpg background color is inverted to black in Supporting Document print page

In Packaging spec, print page, background of some of the the jpgs in supporting documents are inverted to black. we had similar issue happened to WMF, we were instructed by Oracle to use jpg since WMF is not among the supported format. but now jpg is having the same issue. any suggestions?

Hi,
Are these images transparent by any chance?
Dmitriy

Trouble changing background color. Using Dreamweaver CS4

I can't get to change the back ground color [The greenish grey color] , within a table, of a web page... Please see http://www.urefillit.com/index2.html Can use some help here... Also I notice that the foliage background is slow in loading... Any suggestions as to what is causing the loading delay?
Thanks in advance!!!!!
Using CS4.........The Code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="msvalidate.01" content="F33B6715B987C15F0176AAFDA87BE459" />
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>Urefillit manufactures and markets Octenol, Asian Tiger lure, and Kaboom replacement type products</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="We are focused on providing high-quality products and a commitment to customer satisfaction - We will do everything we can to meet your expectations for the best priced and highest quality mosquito control and Kaboom replacement type products available on the market today" />
<meta name="Keywords" content="Octenol, Lure, Asian Tiger mosquito lure, Kaboom refills, mosquito magnet mosquito killing machine" />
<meta name="Robots" content="index, follow" />
<style type="text/css">
/*<![CDATA[*/
body {
        background-image: url(images/SambucusBlackLaceFoliage.jpg);
        background-color: #FFCC66;
body.c7 {background-attachment:fixed}
div.c6 {text-align: center}
p.c5 {font-family: Arial; font-size: 70%; text-align: center}
span.c4 {font-family: Arial; font-size: 70%}
span.c3 {font-family: Courier}
p.c2 {text-align: center}
span.c1 {font-family: Courier; font-size: 120%}
/*]]>*/
.c7 table tr .c11 {
        background-color: #F60;
        font-size: 18px;
tr .c11 table tr td p {
        font-family: "Times New Roman", Times, serif;
        font-size: 16pt;
.c7 table tr .c11 table tr td p {
        font-family: "Times New Roman", Times, serif;
        font-size: x-large;
.c7 table tr .c11 table tr td p {
        font-family: "Times New Roman", Times, serif;
        font-size: 16pt;
.c7 table tr .c11 #table2 tr th {
        background-color: #0F6;
/*]]>*/
</style>
<script src="file:///C|/Scripts/swfobject_modified.js" type="text/javascript">
</script>
<style type="text/css">
/*<![CDATA[*/
table.c16 {background-color: #FFD9B3}
p.c15 {text-autospace:none;}
th.c14 {background-color: #00FF99}
td.c13 {background-color: #00FF99}
th.c12 {background-color: #FF6666}
h2.c11 {font-size: 120%}
span.c10 {font-size: 150%}
span.c9 {text-decoration: underline}
div.c8 {font-size: 70%; text-align: right}
td.c7 {background-color: #003399}
p.c6 {text-decoration: underline}
table.c5 {background-color: #FFCC66}
td.c4 {background-color: #FFFFFF}
div.c3 {text-align: center}
table.c2 {
        background-color: #0F6;
        font-size: 18px;
th.c1 {background-color: #FFFFFF}
.c7 table tr th .c7 {
        color: #008040;
.c7 table tr th .c7 strong {
        color: #000;
.c7 table tr th .c7 {
        color: #000;
.c7 table tr th .c1 strong {
        color: #008000;
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
body {
        background-color: #FFCC33;
th.c1 {background-color: #FFCC66}
/*]]>*/
th.c11 {background-color: #FFFFFF}
th.c11 {
        background-color: #F93;
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        visibility: visible;
        width: auto;
.c7 table tr .c11 #table2 tr th .c2 a .c3 strong {
        color: #00F;
.c7 table tr .c11 #table2 tr td a {
        color: #00F;
.c7 table tr .c11 #table2 tr td a {
        color: #00F;
.c7 table tr .c11 #table2 tr td p a {
        color: #00F;
.BLUE { color: #00F;
.BLUE { color: #00F;
.blue { color: #00F;
.blue { color: #00F;
p.c1 {text-align: center}
p.c13 {font-size: 80%; text-align: center}
p.c71 {margin-right:0in;
margin-left:0in;
font-size:9.5pt;
font-family:"Comic Sans MS";
color:#000040;
span.c101 {font-size: 80%}
span.c12 {font-family: Courier New, Courier, monospace}
span.c6 {font-family: Arial}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c16 {border:0;width:88px;height:31px}
span.c15 {font-size: 120%}
div.c14 {color: #FFFFFF; font-size: 150%; text-align: center}
span.c13 {font-size:18.0pt; color:#B90D09;}
strong.c12 {text-decoration: underline}
span.c11 {font-family:'Comic Sans MS'; color:red;}
em.c10 {text-decoration: underline}
span.c9 {color:red;}
table.c8 {background-color: #006600}
td.c7 {background-color: #006600}
span.c6 {font-size: 150%; text-decoration: underline}
p.c5 {text-decoration: underline}
p.c4 {text-align: center; text-decoration: underline}
p.c3 {text-align: center}
span.c2 {text-decoration: underline}
div.c1 {text-align: center}
/*]]>*/
.c7 table tr .c11 #table2 tr td p {
        color: #00F;
.eight {
        color: #F00;
</style>
<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
table.c11 {background-color: #0033FF}
th.c10 {background-color: #8D8D5E}
span.c9 {font-family:'Times New Roman','serif'; font-size:18pt;}
p.c8 {line-height: normal; margin-bottom: .0001pt; text-align: center}
p.c7 {; font-family: 'Times New Roman', 'serif'; font-size: 14pt; text-align: center}
p.c6 {; font-family: 'Times New Roman', 'serif'; color: #00F; font-size: 18pt; font-style: italic; text-align: center}
span.c5 {font-style: italic}
span.c4 {line-height:115%; font-family:'Times New Roman','serif'; font-size:16.0pt;}
p.c3 {text-align: center}
strong.c2 {text-decoration: underline}
th.c1 {background-color: #FFFFFF}
/*]]>*/
</style>
</head>
<body>
<![CDATA[*/
&amp;lt;!--
#Layer1 {position:absolute;
        width:110px;
        height:34px;
        z-index:1;
        left: 430px;
        top: 1116px;
        visibility: visible;}
#Layer2 {position:absolute;
        width:170px;
        height:33px;
        z-index:1;
        left: 536px;
        top: 652px;}
p.c7 {color: #000000; font-family: Arial; font-size: 80%}
--&amp;gt;
/*]]>
*/ <script src="file:///C|/Scripts/AC_RunActiveContent.js" type="text/javascript">
</script>
<table class="c11" width="1250" border="15" align="center" cellpadding="5">
<tr>
<th width="888" height="2254" align="center" valign="top" class="c11 c10" scope="col">
<p><br />
<img src="images/webpagepicture.jpg" alt="WEB PAGE HEADER" width="1267" height="212" border="6" align="middle" /><br /></p>
<table width="1188" border="6" align="center" class="c2" id="table2">
<tr>
<th width="143" scope="col">
<p><a href="OctenolLure.html">Octenol Lure</a></p>
</th>
<th width="145" scope="col"><a href="FlowtronTypeLure.html">FlowtronTypeLure</a></th>
<th width="145" scope="col">
<p><a href="AsianTiger.html"></a><a href="AsianTiger.html">Asian Tiger Lure</a></p>
</th>
<th width="146" scope="col"><a href="Combolure.html">Combo Lure</a><br />
(Octenol & Lactic Acid)</th>
<th width="146" scope="col">
<p><a href="SkeeterVacLure.html">SkeeterVac Lure</a></p>
</th>
<th width="145" scope="col">
<p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Mosquito Magnet</a></p>
<p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Repair Guide</a></p>
</th>
<td width="145" align="center" valign="middle" scope="col"><a href="Kaboom.html">Kaboom</a><a href="/Kaboom.html">Replacement Tablets</a></td>
<th width="111" height="104" align="center" valign="middle" scope="col"><a href="https://www.paypal.com/us/verified/pal=sales%40urefillit%2ecom" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" alt="Official PayPal Seal" width="98" height="108" border="0" align="top" /></a><br />
<br /></th>
</tr>
</table>
<br />
<table width="282" border="20" align="center" cellpadding="0">
<tr>
<th class="c1" width="128" scope="col"><img src="images/flying%20mosquito.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" width="97" height="75" /></th>
<th class="c1" width="104" scope="col"><a href="#" onClick="window.open('https://www.sitelock.com/verify.php?site=www.urefillit.com','SiteLock','width=600,height=6 00,left=160,top=170');"><img src="//shield.sitelock.com/shield/www.urefillit.com" alt="website security" align="absmiddle" title="SiteLock" /></a></th>
</tr>
</table>
<p>



======================================================================================</p >
<table width="1002" border="0" align="center">
<tr>
<td width="996">
<p class="c3"><strong class="c2">All About Urefillit, LLC</strong></p>
<p class="c3"><span class="c4">Urefillit, LLC prides itself on quality and consistency of its fine products, which are designed, made and manufactured in the USA. From production to quality control to final shipment, our highly trained team ensures the best quality, and reliable service for our customers. We are focused on providing high-quality products along with a commitment to customer satisfaction. We will do everything we can to meet your expectations for the best priced and highest quality mosquito lures, Kaboom replacement tablets, and bromine tablets available on the market today. With a variety of offerings to choose from, we're sure you will be happy with your purchase. Thank you for visiting our website and if you have any comments or questions, please feel free to contact us. We hope to see you again soon!</span><br /></p>
<p class="c3"><img src="images/made_in_USA.jpg" width="221" height="228" alt="usa" /><br />
<br /></p>
<p class="c3">****************************************************************************** *************<br />
<br /></p>
<p class="c6">REFUND POLICY: <span class="c5">Our number one goal is your satisfaction. If our product does not perform as advertised you may return then unused item for a refund. A 25% restocking fee may apply. Buyer pays the return shipping costs. Special and international orders items DO NOT qualify for a refund.</span><br />
<br /></p>
<p class="c7"><img src="images/ebay-top-rated-seller-tracking.jpg" width="230" height="158" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=fjp800&ftab=Feedbac kAsSeller"><br />
Check Out Our E-Bay Feedback</a></p>
<p class="c7"><br />
****************************************************************************************** ********************<br /></p>
</td>
</tr>
</table>
<table width="1002" border="0" align="center">
<tr>
<td width="996">
<p class="c3"><strong class="c2">Using Octenol to Attract Mosquitoes<br /></strong><br /></p>
<p class="c3">Octenol is an natural chemical that occurs naturally as a by-product of plants and some animals that eat a lot of vegetable produce. If carbon dioxide is mixed with octenol, it has been found to be an attractant to several mosquito species. There are other insects such as no-see-ums and biting midges that are also attracted to this scent. It has been proven to be a very effective product, especially for no-see-ums.<br />
<br />
<img src="images/12137165-cartoon-stop-mosquito.jpg" width="168" height="168" alt="mosquito" /><br />
<br />
Octenol is also a pesticide ingredient that is used to attract mosquitoes and biting flies. It does not kill the insects; it only attracts them. It can be used in combination with other products and devices that do kill them once they are successfully attracted to the device. It is important to be aware that non-pest insects are also attracted and destroyed by some of the devices.<br />
<br />
If octenol is ingested, there is a possibility for toxicity. It is not, however, harmful in the air to humans, pets, or the environment. It is vitally important that it is kept safely away from children to avoid the possibility of ingesting. Placement of the attractant and device utilized to catch biting insects should be carefully considered. It should be kept safely away from children and pets.<br /></p>
<p class="c3">To be most effective in mosquito control, the attractant should be placed between the breeding grounds of the mosquito and the area where the people are located. There are range limits that the attractant will reach and this needs to be considered in the placement of the trap as well.<br /></p>
</td>
</tr>
</table>
<a href="http://www.startlogic.com/join/index.bml?AffID=626972&cid=592'"><br /></a> ==============================================================
<p><img src="images/americanatural_1875_97577.gif" width="234" height="118" alt="** PLEASE DESCRIBE THIS IMAGE **" /></p>
<p>Considering buying a mosquito trap? If so, compare the following traps before you make a purchase:</p>
<a href="http://www.bluerhino.com/BRWEB/Outdoor-Living-Products/Mosquito-Traps.aspx">SkeeterVac</a>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td align="center">
<div class="c3"><a href="http://www.mosquitomagnet.com/">Mosquito Magnet</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td>
<div class="c3"><a href="http://www.megacatch.com/">Mega-Catch</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td>
<div class="c3"><a href="http://koolatrononline.stores.yahoo.net/mosquito-control.html">Koolatron</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td width="273">
<div class="c3"><a href="http://www.mosquitocontroltrap.com/comparisons">Mosquito Trap Comparison Chart</a></div>
</td>
</tr>
</tbody>
</table>
<p><br /></p>
<table width="126" border="20" align="center" cellpadding="0">
<tr>
<th class="c1" scope="col"><a href="mailto:[email protected]">E-mail Urefillit</a></th>
</tr>
</table>
<br />
<p class="c8"> </p>
<p class="c8"><span class="c9">Urefillit, LLC<br />
800 Shore Drive East<br />
Oldsmar, Florida 34677-4402</span></p>
<p class="c8"> </p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br /></p>
<p> </p>
</th>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
</body>
</html>

Copy & Paste this code into a new, blank document. SaveAs index3.html. Feel free to adjust CSS colors and backgrounds as desired.   You'll find plenty of code comments to help you.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>U Refill It</title>
<meta name="description" content="Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom">



<style>
/**CSS Reset**/
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
img {
    vertical-align: baseline;
    display: block;
    max-width: 100%
/**layout**/
body {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    /**CSS gradient**/
/* Old browsers */
    background: rgb(180,221,180);
    /* FF3.6+ */
    background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* Chrome,Safari4+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(180,221,180,1)), color-stop(17%, rgba(131,199,131,1)), color-stop(33%, rgba(82,177,82,1)), color-stop(67%, rgba(0,138,0,1)), color-stop(83%, rgba(0,87,0,1)), color-stop(100%, rgba(0,36,0,1)));
    /* Chrome10+,Safari5.1+ */
    background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* IE10+ */
    background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* good browsers */
    background: linear-gradient(to bottom, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
/* older IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400', GradientType=0 );
#wrapper {
    width: 75%;
    margin: 0 auto; /**with width, this is centered**/
    background: #FFC;
    border: 4px groove #F30;
    border-radius: 20px;
header, footer {
    color: #F30;
    text-align: center;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
header img {
    border-radius: 15px 15px 0 0;
    width: 100%
/**top menu**/
nav {
    width: 90%;
    margin: 25px auto;
nav li {
    list-style: none;
    font-weight: bold;
    display: inline;
/**menu link styles**/
nav li a {
    display: inline-block;
    font-weight: bold;
    color: green;
    text-decoration: none;
    padding: 1.15em;
    border: 2px outset green;
/**menu links on mouse over**/
nav li a:hover, nav li a:active, nav li a:focus { background: gold }
/**main content**/
article { padding: 2% }
figure img {
    margin: 0 auto;
    border: 3px solid #FFF;
    border-radius: 10px;
    box-shadow: 1px 2px 5px #333;
/**typography**/
header h1 {
    font-size: 55px;
    text-shadow: 2px 3px 3px #666;
header h2 {
    font-size: 18px;
    font-style: oblique
h3 { margin-top: 20px; }
p {
    margin-bottom: 18px;
    font-size: 18px;
    color: #000;
figcaption {
    text-align: center;
    font-style: oblique;
    margin-bottom: 18px;
</style>
</head>
<body>
<div id="wrapper">
<header>
<img src="http://www.urefillit.com/images/webpagepicture.jpg" alt="U Refill It banner">

<h1>U Refill It</h1>
<h2>Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom.</h2>
</header>

<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</nav>

<article>
<h3>Article Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<figure>

<img src="http://placehold.it/500x325" alt="figure">
<figcaption> Figure Caption </figcaption>
</figure>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>

<footer>
<small>© 2014 Your Site Name. All Rights Reserved</small> </footer>
 </div>
</body>
</html>
Nancy O.

Spry vertical menu button shows background color instead of image in preview

Hello All, I'm a newbie (to the forum and Dreamweaver) so my apologies if my question is not in good form. I've searched for this issue but cannot seem to find the exact problem I have.
I've created a website (my first) and used the spry menu bar. It works well using the default blue and grey colors for button and hover. However, I decided I want to spruce it up a little and change the buttons to use a background image (rainbow pattern) instead of background color. I internet researched this for some time and watched all the youtube videos people have posted for this process and editing the spry vertical menu bar CSS. Using the .a and hover lines from the CSS, I was able to add my background .jpg image file. In the design view, the button look exactly how I want them to. However, when I attempt to preview in IE, Chrome, or FF, the buttons still have the default colors and no image. I've gone back and deleted the default blue and grey, but then the preview just shows dark grey and white for the buttoms. is there something that I am overlooking that would cause the background color to show instead of the image I have attached to the buttons. I can't figure out why it looks right in DW but not in preview.
BTW, I'm editing a template file and all the pages are updated with the new image buttons, but none of the pages show correctly in preview.
Thanks

Point taken :-)
This is my spry vertical css code. No sub-menus.
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-weight: bold;
background-image: url(/Images/Rainbow_Button.jpg);
background-color: ;
background-repeat: no-repeat;
background-position: center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #666666;
color: #333333;
background-image: url(/Images/Rainbow_Button_Hover.jpg);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #0000FF;
color: #FFF;

How to apply background color to link button in Flex 2

I need to apply background color to link button as the Rollover color has on its over event.How is this possible in Flex 2 ?I am using the above in Xcelsius as custom component so if I apply graphics and draw rect method it does not have any effect.Please help.

These might help:
http://jdevadf.oracle.com/adf-richclient-demo/components/skinningKeys/column.jspx
http://jdevadf.oracle.com/adf-richclient-demo/components/skinningKeys/table.jspx

Linked Image with CSS Hover background Color Jerks in IE8

Please see http://www.rrmuseumpa.org/about/musviews/index.shtml and hover over any of the five slideshow images, using IE8. Note that the hover causes a jerk when the assigned background color for hover kicks in, apparently by adding some vertical margin at botton. It's fine in all other browsers.
What I want is for any image that serves as a link to not have a border and to not pick up the default hover background color, and to not cause the "jerk" in IE8.
CSS file is at http://www.rrmuseumpa.org/css/main.css . Specific css would be most appreciated.
Thanks.
Jim

The very last style rule states
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
color: #FFF;
This is a white backgorund and white text. Simply change the background colour to #2565B2
Gramps

How do I change the white background color in a b/w line drawing jpg?

How do I change the white background color in a b/w line drawing jpg?

Just put a Solid Color Layer atop it and set it to Blend Mode Multiply or
• load the Channel with the best contrast (cmd-click it in the Channels Panel)
• invert Selection (cmd-I)
• create a black Solid Color Layer
• put whatever below that Layer

CS6 #nav links change hover background color based on its position in series

First post from a complete DW CS 6 novice on Win7. Not knowing JavaScript or JQuery, I thought I would add simplest animation to a website navigation based on the two col fixed header footer design. The navigation links on the left <sidebar1> have been increased to 24, with a common link background in the default state. When the cursor is passed over the links they would change background color to one of five given in the image placed in the jpeg image loaded as the 1st list item. The image itself only acts as a color key to the five catagories of links directly below it, and is not hyperlinked. The idea is that someone looking for new tools would need to hover down the nav links and only be concerned with the Yellow background ones, even if they appear in any random position down the list. To give each link a color to start with would make <sidebar1> appear too colorful.
I have David Powers' two dvd titles and was thinking of using a nth-of-type() . It does not work. Perhaps there are two sets of colons required ( a:hover:nth-of-type(4), a:active:nth-of-type(4) {background-color:#f00;} ). There is surely a way that would work but I do not know enough of DW and CSS at present to figure this out.
Many thanks.

I don't what menu system you're using, but you might be able to create some CSS classes to use in your menu like so:
<ul>
<li>a href="some-link.html" class="about">about link</a></li>
<li>a href="some-link.html" class="new">new link</a></li>
<li>a href="some-link.html" class="new_proc">new procedures link</a></li>
<ul>
CSS:
li a.about:hover {background-color:gray}
li a:new:hover {background-color:forestgreen}
li a:new_proc:hover {background-color:lawngreen}
and so on...
Nancy O.

Apply Different Background Color to Promoted Links Tiles

Hello everyone,
Does anybody know a way of changing the background color of each individual tile of Promoted Links? If possible, and if anybody is familiar, I would like to do it using a JS Link file.
Thanks in advanced.
Fausto Capellan, Jr - SharePoint Admin

Hi Fausto,
You could try the script below to set color without randomly change:
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function () {
var id;
var rgb;
var rgb1;
var rgb2;
var rgb3;
for (var i = 0; i < $("div.ms-tileview-tile-content").length; i++){
id = $("div.ms-tileview-tile-content")[i].id;
if(i%2 == 0){
rgb1 = getRgb(0,i);
rgb2 = getRgb(50,i);
rgb3 = getRgb(150,i);
}else{
rgb1 = getRgb(150,i);
rgb2 = getRgb(50,i);
rgb3 = getRgb(0,i);
rgb = "rgb("+rgb1+","+rgb2+","+rgb3+")";
$("#"+id).css("background-color",rgb);
function getRgb(n,i){
var rgbNum = n + i *25;
if (rgbNum < 255){
return rgbNum;
}else{
getRgb(1,1);
</script>
Please set the parameter “n” with number per your situation in the function getRgb(n,i). The screenshot below is my result:
Regards,
Rebecca Tu
TechNet Community Support

Encore DVD 2.0 on Windows: Composition background color of dynamically linked After Effects projects

Hello,
I used Adobe Dynamic Link to import an After Effects project, and I saw that in Encore the background color of a composition is set to black even though it is defined with another value in After Effects.
I had to open the project in AE and place a solid layer with the desired color behind all other layers.
What are the causes for this behaviour? Did I do something wrong or is it a bug?
Best regards,
Christian Kirchhoff

The composition background is transparent. It has per se no color and does not react to blendmodes and such. It's imaginable that Encore resets it to black for whatever reason (wouldn't know, as I design my menus always with full frame backgrounds to begin with). Still, I would consider it a bug regardless, so please fiel away:
http:www.adobe.com/go/wish
Mylenium

How can I make FF use custom visited/unvisited link colors but allow the website to choose the other text and background colors?

websites often choose colors that I have trouble distinguishing between but overriding the other colors can cause color defects on certain websites.

Add code like this to userContent.css in the chrome folder.<br />
There can however still be problems with clickable elements that use background images.
Remove that link from the history to restore that background image.
*http://kb.mozillazine.org/userContent.css
*http://kb.mozillazine.org/Editing_configuration
You can use the ChromEdit Plus or Stylish extension to have easier access to the customization files.
*ChromEdit Plus: http://webdesigns.ms11.net/chromeditp.html
<pre><nowiki>a:visited, a:visited * {
color:#CC33CC!important;
background-color:#F8F8F8;
</nowiki></pre>

Problem printing to jpg - only get background color

Sometimes when I print to a jpg all I get is the background color. I can't see any pattern as to when this occurs and when it doesn't. (LR4, Win7, original files are CR2) Any clues?
thx,
John

No question mark - all appears normal in the Library and Develop Modules, regardless of the view. There's no indication that it will happen prior to it happening that I've been able to detect. The black files are quite small (40k - 50k as I recall) which is reasonable for a solid color jpg.

Footer now floating in middle of page and no background color

Hello all,
Been working on this for days with no luck. I hope someone can spot the silly mistake, because I know it has to be something silly but it's driving me round the bend! The page has always been just fine until I recoded part of the body (the four columns with titles, photos, and text) to help with 508 compliance. Since then, the orange footer that was firmly at the bottom has started floating half way up the page and the background orange color has disappeared.
I've gone through my code line by line, marking off each beginning and ending div tag and everything is fine there. Below, is a screenshot of the lower half of the page showing how the footer should look.
Here is a screenshot of how it looks offline right now:
as you can hopefully see, the footer has lost it's orange background and is sitting halfway up the page.
Here is the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1100">
<meta name="keywords" content="Meadows museum, Southern Methodist university, SMU, Dallas, Texas, Algur Hurtle Meadows, The Meadows Foundation, Dr. Mark A. Roglán, medieval, baroque, tenth to twentieth century spanish art, 10th to 20th century Spanish art, Spanish art collection, Spanish paintings, Meadows school of art, masterpieces, world's greatest painters, El Greco, Velázquez, Ribera, Murillo, Goya, Miró, Picasso, Juan Gris, Renaissance, altarpieces, rococo oil sketches, polychrome wood sculptures, Impressionist landscapes, modernist abstractions, sculptures, twentieth-century sculptors, Rodin, Maillol, Giacometti, Henry Moore, David Smith, Claes Oldenburg, James Surls, Santiago Calatrava, Texas artists, Frank Reaugh, Jerry Bywaters, Otis Dozier, Alexandre Hogue, William Lester, exhibitions, education, educational workshops, lectures, gallery talks, symposia, symposium, museum shop, Spain's Golden Age, neo-Palladian structure, Jones Great Hall, Founder's Room, auditorium, Gates Restaurant, Moss Chumley Award, William B. Jordan internships, Fortuny, Sorolla, Steve Mumford, Don Quijote, eighteenth-century tapestries, Roger Winter, Stanley Marcus, Mark Lemmon, The Barrett Collection, Mexican art, DeGolyer Library, greek vase painting, Juan van der Hamen y León, Division of Cinema-Television, musical and danse performances, performing artists, studio art activities, storytelling, artist demonstrations, community education, Spanish discussion and book club, Master of Liberal Arts courses, MLA program, corporate membership, Museum membership, Museo Nacional del Prado, Prado Museum Designer=Pam Muirheid">
<meta name="description" content="The Meadows Museum is committed to the advancement of knowledge and understanding of art through the collection and interpretation of works of the greatest aesthetic and historical importance, as exemplified by the founding collection of Spanish art">
<meta name="robots" content="index, follow">
<title>Home – Meadows Museum</title>
<meta name="google-site-verification" content="WJGKz4uefsWUilZUdPa5ggL23MSk1IsHeLMzUz3B1QE" />
<style type="text/css">

</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="ajxmenu1.js" type="text/javascript"></script>
<style type="text/css">

</style>
<link rel="stylesheet" href="ajxmenu1.css" type="text/css" />
<style type="text/css">

</style>
<link rel="stylesheet" href="ajxmenu3.css" type="text/css" />
<link rel="stylesheet" href="ajxmenu4.css" type="text/css" />
<style type="text/css">

</style>
<link rel="stylesheet" href="ajxmenu8.css" type="text/css" />
<link rel="stylesheet" href="ajxmenu13.css" type="text/css" />
<style type="text/css">

</style>
<link rel="stylesheet" href="ajxmenu16.css" type="text/css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32262060-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript" language="javascript">AC_FL_RunContent = 0;</script>
<script type="text/javascript" src="slideshow/AC_RunActiveContent.js" language="javascript"></script>
<script type="text/javascript" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">

</script>
<script src="ajxmenu1.js" type="text/javascript"></script>
<script src="ajxmenu3.js" type="text/javascript"></script>
<script src="ajxmenu4.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<script src="ajxmenu8.js" type="text/javascript"></script>
<script src="ajxmenu13.js" type="text/javascript"></script>
<script src="ajxmenu16.js" type="text/javascript"></script>

<meta name="google-translate-customization" content="9966f40ce63f3936-63b7db40478c71ff-g3ab4db8eb77d6f75-1b">
</meta>

</head>
<body bgcolor="#f1eee1">
<div class="hidden">Skip to main content.</div>

<div id="logo">
<header role="banner"><a href="http://smu.edu/meadowsmuseum/">Home Page - Meadows Museum</a></header>
</div>

<div id="navbackground">

<div id="nav">
    <div class="AJXCSSMenuBOOIZUD">
      <ul>
        <li class="tsub"><a class="ajxsub" href="mission_statement.htm">About  Us</a>
          <ul>
            <li><a href="mission_statement.htm">Mission Statement</a></li>
            <li><a href="Director.htm">Message from the Director</a></li>
            <li><a href="contacts.htm">Contact Us</a></li>
            <li><a href="news.htm">News</a></li>
            <li><a href="media.htm">Multimedia</a></li>
            <li><a href="history.htm">Museum History</a></li>
            <li><a href="Plaza.htm">Plaza & Sculpture Garden</a></li>
            <li><a href="Moss_Chumley.htm">Moss/Chumley Award</a></li>
            <li><a href="javascript:open_window(%27http://www.meadows.smu.edu%27)">Meadows School of the Arts</a></li>
            <li><a href="javascript:open_window(%27http://www.smu.edu%27)">Southern Methodist University</a></li>
          </ul>
        </li>
        <li class="tsub"><a class="ajxsub" href="visit.htm">Visit Us</a>
          <ul>
            <li><a href="visit.htm">General Information</a></li>
            <li><a href="tours.htm">Groups & Tours</a></li>
            <li><a href="access_programs.htm">Accessibility</a></li>
            <li><a href="shop.htm">Museum Shop</a></li>
            <li><a href="students_teachers.htm">K-12 Resources</a></li>
            <li><a href="dining.htm">Dining</a></li>
            <li><a href="lodging.htm">Lodging</a></li>
            <li><a class="ajxsub" href="events.htm">Facility Rentals</a>
              <ul>
                <li><a href="events_rental_images.htm">Rental Facility Images</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="tsub"><a class="ajxsub" href="collections_intro.htm">Collections</a>
          <ul>
            <li><a href="collections_intro.htm">About the Collections</a></li>
            <li><a class="ajxsub" href="collections_highlights.htm">Highlights of the Collections</a>
              <ul>
                <li><a href="collections_highlights_Algur.htm">Algur H. Meadows Collection</a></li>
                <li><a href="collections_highlights.htm">Meadows Museum Collection</a></li>
                <li><a href="collections_highlights_sculpture.htm">Elizabeth Meadows Sculpture Coll.</a></li>
              </ul>
            </li>
            <li><a href="collections_provenance.htm">Provenance & Research</a></li>
            <li><a class="ajxsub" href="#">Recent Acquisitions</a>
              <ul>
                <li><a href="collections_acquisitions_Goya.htm">Goya</a></li>
                <li><a href="collections_acquisitions_Barcelo.htm">Barceló</a></li>
                <li><a href="collections_acquisitions_Madrazo.htm">Madrazo</a></li>
                <li><a href="collections_acquisitions_Munoz.htm">Muñoz</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="tsub"><a class="ajxsub" href="exhibitions_current.htm">Exhibitions</a>
          <ul>
            <li><a href="exhibitions_current.htm">Current</a></li>
            <li><a href="exhibitions_upcoming.htm">Upcoming</a></li>
            <li><a class="ajxsub" href="#">Past</a>
              <ul>
                <li><a href="exhibitions_2013-present.htm"><span>2013-Present</span></a></li>
                <li><a href="exhibitions_recent_past.htm">2010-12</a></li>
                <li><a href="exhibitions_past_07-09.htm">2007-09</a></li>
                <li><a href="exhibitions_recent_past2.htm">2004-06</a></li>
                <li><a href="exhibitions_2001-3.htm">2001-03</a></li>
              </ul>
            </li>
            <li><a href="longterm_loans.htm">Visiting Masterpieces</a></li>
            <li><a class="ajxsub" href="#">Prado at the Meadows</a>
              <ul>
                <li><a href="about_Prado_Meadows.htm">Prado at the Meadows</a></li>
                <li><a href="docs/Pradopartnershipexpansionrelease.pdf">Expansion of Partnership</a></li>
                <li><a href="exh_Prado_Meadows_press.htm">Press Release El Greco</a></li>
                <li><a href="exh_Prado_Meadows_Ribera_press.htm">Press Release - Ribera</a></li>
                <li><a href="about_Velazquez_Prado_release.htm"><span>Press Release - Velaquez </span></a></li>
                <li><a href="prado_press.htm">News Articles</a></li>
                <li><a href="prado_fellowship.htm">Fellowships</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="tsub"><a class="ajxsub" href="public_programs.htm">Education</a>
          <ul>
            <li><a href="public_programs.htm">Program Calendar</a></li>
            <li><a href="internships.htm">Internships</a></li>
            <li><a href="fellowships.htm">Fellowships</a></li>
            <li><a href="students_teachers.htm">K-12 Resources</a></li>
            <li><a href="symposia.htm">Symposia</a></li>
          </ul>
        </li>
        <li class="tsub"><a class="ajxsub" href="membership.htm">Get Involved</a>
          <ul>
            <li><a href="membership.htm">Join or Renew a Membership</a></li>
            <li><a href="member_travel.htm">Member Travel</a></li>
            <li><a href="volunteer.htm">Volunteer</a></li>
            <li><a href="internships.htm">Internships</a></li>
            <li><a href="work_here.htm">Employment</a></li>
            <li><a href="support.htm">Donate</a></li>
          </ul>
        </li>
        <li class="tlast"><a href="50th_anniversary.htm">50th Anniversary</a></li>
        <li class="timg"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""/></li>
      </ul>
    </div>
</div> 
</div> 
<br />

<div id="wrapper">

<div id="slideshow">

        
        <script type="text/javascript" src="v4flashslideshow/slideshow.js"></script>
        <div class="dwuser_xfs_v4_holder" style="width: 1100px; height: 358px;"> <strong><a href="http://www.adobe.com/go/getflashplayer/">You need to upgrade your Flash Player and enable Javascript to view this content »</a></strong> </div>
        <script type="text/javascript">
            // <![CDATA[
            if (typeof(window['XMLFlashSlideshow_v4']) == 'undefined') { XMLFlashSlideshow_v4 = function(){}; alert('To use the XML Flash Slideshow v4, you must upload the v4flashslideshow/slideshow.js file, and have a properly defined ' + String.fromCharCode(60) + 'script' + String.fromCharCode(62) + ' reference to it in your HTML.');};
            XMLFlashSlideshow_v4({width:'1100', height:'358', level:'a', xml:'v4flashslideshow/slideshow_data1.xml', backgroundColor:'#F1EFE0', backgroundAlpha:'1', preloaderColor:'#FFFFFF', preloaderTextColor:'#FFFFFF', externalSkinURL:'', touchMode:'inline', touchBackgroundColor:'#F1EFE0', backgroundImage:'images/slideshow/Calatrava3_big.jpg', rightClickLabel:'slideshow of upcoming events'});
            // ]]>
            </script>
        
</div>

<div id="bodyArea">
    
    <div id="programseventstitle">
    <h3>PROGRAMS & EVENTS<br />
</h3><a href="public_programs.htm"><img src="images/index/class.png" alt="programs and events" width="275" height="143" /></a>
    <ul id="programsevents">
<p><a
href="public_programs.htm#symposium">International
    Symposium</a><BR>Sat, Feb 7, 10 A.M.-3 P.M.</p>
<p><a
href="public_programs.htm#toast">Champagne
    Toast</a><BR>Sat, Feb 7, 3:30-5:00 P.M.</p>
<p><a href="public_programs.htm#music">Music
    at the Meadows</a><BR>Sat, Feb 7, 6:30 P.M</p>
<p><a
href="http://www.meadowsmuseumdallas.org/public_programs.htm#drawing">Drawing
    from the Masters</a><BR>Sun, Feb 8, 1:30-3 P.M.</p>
<p><a
href="public_programs.htm#conn">Access
    Program: Connections</a><br />
    Wed, Feb 11, 10:30 A.M.-12:30 P.M.</p>
    </ul>
    </div> 
    
      <div id="newstitle">
      <h3>NEWS</h3> <a href="news.htm"><img src="images/index/Bacon_thumb.jpg" width="275" height="143" alt="news" title="news" /></a>
      <ul id="news">
    <p>12/23/14 - <a href="docs/50th_updated.pdf" target="_blank">Meadows Museum Looks Ahead to Golden Anniversary in 2015</a> (PDF)</p>
      <p>12/15/14 - <a href="docs/MossChumley2014Award.pdf" target="_blank">Meadows Museum Announces 2014 Moss/Chumley Artist Award Winner: Darryl Lauster</a> (PDF)</p>
      <p>11/3/14 - <a href="docs/Abello_2014.pdf" target="_blank">Meadows Museum to Present First Exhibition in U.S. of Paintings from
        Juan Abelló Collection, Among World’s Top Private Collections</a> (PDF)</p>
      </ul>
</div>    

    <div id="multimediatitle">
    <h3>MULTIMEDIA</h3><a href="http://vimeo.com/109750163" target="_blank"><img src="images/50th_anniversary/thumb_homepage.jpg" alt="multimedia" title="multimedia" width="275" height="143" /></a>
    <ul id="multimedia">
    <p><a href="media.htm">Watch videos, live webcasts, and podcasts</a>.</p>
      <p><strong>50th Anniversary</strong><br />
        Experience the Meadows Museum at SMU as the Museum approaches its <a href="http://vimeo.com/109750163" target="_blank">50th anniversary</a>. Find out what's going on this year, what's in the news, and discover the fascinating history of the Museum in <a href="50th_anniversary_timeline.htm">Meadows Milestones</a>.</p>
      <p><a href="media.htm">June 20, 2014 <em>WFAA News</em> story about artist John Bramblitt.</a></p>
      </ul>
</div> 

<div id="supportustitle">
<h3>SUPPORT US!</h3>
    <a href="support.htm"><img src="images/news_programs/MeadowsandLois.jpg" width="275" height="143" /></a>
    <ul id="supportus">
    <p><a href="membership.htm">Join/Renew your Membership</a></p>
      <p><a href="support.htm">Donate to the Museum</a></p>
      <p><a href="shop.htm">Browse our online shop</a></p>
        <p><a href="volunteer.htm">Become a Docent</a></p>
      <p><a href="shop.htm"></a><a href="volunteer.htm">Volunteer</a></p>
        <p><a href="javascript:open_window(%27http://visitor.constantcontact.com/manage/optin/ea?v=001WVdpo956d6mu5VjDxJQqvxlxNOVSB0HGHh q6v_z9sTXd8YFRILmxqroHCfw5TVmt2p88AqzgSHcInE_zTaFkPw%3D%3D%27)">Join our E-newsletter</a></p>
      </ul>
      
    <div id="google_translate_element"></div>
    <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></scrip t>

    </div> 
      <div class="push"></div>
</div>

    <div id="footer">
      
      <div id="searchbar">
        <form role=“search” style="margin-right:0px; margin-top:12px; float:left; width:265px;" action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
          <input type="hidden" name="si" value="47230699">
          <input type="hidden" name="pid" value="r">
          <input type="hidden" name="n" value="0">
          <input type="hidden" name="_charset_" value="">
          <input type="hidden" name="bcd" value="÷">
          <input type="text" name="query" size="15" style="border:thin">
          <input aria-label=”search” type="submit" value="search">
        </form>
        <br />
        <br />
        <a href="https://www.facebook.com/MeadowsMuseumDallas"><img src="images/symbols/facebook_white.png" alt="like us on Facebook" title="like us on Facebook" width="28" height="28" /></a><a href="https://twitter.com/MeadowsMuseum"><img src="images/symbols/twitter_white.png" alt="Follow us on Twitter" title="Follow us on Twitter" width="25" height="25" /></a> <a href="https://blog.smu.edu/tabularasa/"><img src="images/symbols/blog_white.png" alt="Museum blog" title="Museum blog" width="23" height="23" /></a> <a href="http://visitor.constantcontact.com/manage/optin/ea?v=001WVdpo956d6mu5VjDxJQqvxlxNOVSB0HGHh q6v_z9sTXd8YFRILmxqroHCfw5TVmt2p88AqzgSHcInE_zTaFkPw=="><img src="images/symbols/e-mail_white.png" alt="E-mail us" title="E-mail us" width="27" height="25" /></a> <a href="membership.htm"><img src="images/symbols/JOIN.png" alt="join the museum" title="join the museum" width="38" height="32" /></a> <a href="https://www.google.com/maps/preview#!q=5900+Bishop+Blvd.,+Dallas,+TX+75205&data=!1m4!1m3!1 d10476!2d-96.785088!3d32.837337!4m10!1m9!4m8!1m3!1d107264!2d-96.783199!3d32.845558!3m2!1i1 024!2i768!4f13.1"><img src="images/symbols/google-maps-iphone-icon.png" alt="Find us on Google maps" title="Find us on Google maps" width="24" height="24" /></a>
        </div>
    
    <div id="admissionhours">
    Hours: Tue-Sat 10:00 a.m. - 5:00 p.m.,
        Thu until 9:00 p.m.,
        Sun 1:00 - 5:00 p.m.
        Closed Monday.
        Admission: $10, adults, $8, seniors 65 & over, $4, non-SMU students. Free: Museum members, children under 12, SMU faculty/staff/students. Free Thu eve after 5:00 p.m. <br />
      </div>
    
      <div id="addresstel">
      Meadows Museum, 5900 Bishop Blvd., Dallas, TX 75205, <br />
        P.O. Box 750357, Dallas, TX 75275-0357 <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /> 214.768.2516<br />
        <a href="contacts.htm" class="white">e-mail</a> <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /><a href="site_map.htm" class="white"> Site map</a> <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /> Website by <a href="http://www.mypawprint.com" class="white">My Pawprint Productions</a><br />
        © 2015 Meadows Museum
        </div> 
    </div> 
</div> 
</body>
</html>
and here is the layout.css file:
@charset "utf-8";
    margin: 0px;
    padding: 0px;
a:link {color: #656252; text-decoration: underline; }
a:active {color: #656252; text-decoration: underline; }
a:visited {color: #656252; text-decoration: underline; }
a:hover {color: #656252; text-decoration: none;
a.white:link {color: #FFFFFF; text-decoration: underline; }
a.white:active {color: #FFFFFF; text-decoration: underline; }
a.white:visited {color: #FFFFFF; text-decoration: underline; }
a.white:hover {color: #FFFFFF; text-decoration: underline; }
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1100px) {
/* Styles */
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1100px)
and (orientation : landscape) {
/* Styles */
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
.hidden
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}
a img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
header {
    width: 1100px;
    background-repeat: no-repeat;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
header a {
    text-decoration: none;
    background-image: url(../images/index/orange_50th_2011_1100.png);
    background-repeat: no-repeat;
    background-position: right top;
    padding: 0;
    display: block;
    height: 130px;
    text-indent: -700px;
header a:focus {
    background-position: right top;
    padding: 0;
    height: 132px;
    text-decoration: none;
    display: block;
    background-image: url(../images/index/orange_50th_2011_1100.png);
    background-repeat: no-repeat;
    text-indent: 0px;
    text-decoration: underline;
    color: white;
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
header b {
    text-decoration: none;
h1 {
    height: 75px;
    width: 285px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 50px;
    font-weight: normal;
    color: #f1efe0;
    float: left;
    padding-left: 35px;
    padding-top: 75px;
h2 {
    height: 51px;
    width: 480px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: normal;
    font-style: italic;
    float: left;
    color: #f1efe0;
    padding-top: 99px;
h3 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #666;
    height: 25px;
    padding-left: 10px;
h4 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 25px;
    color: #666666;
#logo {
    background-color: #af4d33; /*change the color to match your orange*/
    display: block;
#navbackground {
    background-color: #776353; /*change the color to match your brown*/
    background-repeat: repeat;
#nav {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    width: 1100px;
.caption {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    margin: 25px;
p {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #414040;
    margin: 25px;
.caption {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    margin: 25px;
#wrapper {
    background-color: #e2dfcf;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 1100px;
    margin-right: auto;
    margin-left: auto;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #999999;
    border-left-color: #999999;
#wrapper #white {
    background-repeat: repeat;
    padding: 0;
    display: block;
    height: 10px;
    background-color: #FFF;
    width: 2500 px;
#wrapper #slideshow {
    height: 358px;
    background-repeat: no-repeat;
#wrapper #programseventstitle {
    width: 275px;
    height: 25px;
    float: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #414040;
    font-weight: normal;
    font-variant: normal;
    background-color: #e2dfcf;
    padding-top: 10px;
#wrapper #newstitle {
    width: 275px;
    height: 40px;
    float: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #414040;
    vertical-align: middle;
    font-weight: normal;
    margin: 0px;
    background-color: #f1efe0;
    padding-top: 10px;
#wrapper #multimediatitle {
    width: 275px;
    height: 40px;
    float: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #414040;
    font-weight: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #e2dfcf;
    padding-top: 10px;
#wrapper #supportustitle {
    width: 275px;
    height: 40px;
    float: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #414040;
    font-weight: normal;
    margin: 0px;
    background-color: #f1efe0;
    padding-top: 10px;
#wrapper #bodyArea #photoprogramsevents {
    float: left;
    background-color: #f1efe0;
    width: 275px;
    height: 143px;
#wrapper #bodyArea #photonews {
    float: left;
    background-color: #f1efe0;
    width: 275px;
    height: 143px;
#wrapper #bodyArea #photomultimedia {
    float: left;
    background-color: #f1efe0;
    width: 275px;
    height: 143px;
#wrapper #bodyArea #photosupport {
    float: left;
    background-color: #f1efe0;
    width: 275px;
    height: 143px;
#wrapper #bodyArea #programsevents {
    float: left;
    background-color: #e2dfcf;
    width: 275px;
    height: 350px;
#wrapper #bodyArea #news {
    float: left;
    background-color: #f1efe0;
    width: 275px;
    height: 350px;
#wrapper #bodyArea #multimedia {
    float: left;
    background-color: #e2dfcf;
    width: 275px;
    height: 350px;
#wrapper #bodyArea #supportus {
    float: left;
    background-color: #f1efe0;
    width: 275px;
    height: 350px;
#wrapper #bodyArea #footer {
    height: 100px;
    width: 1100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    background-color: #af4d33;
    padding: 0px;
    color: #FFFFFF;
    background-repeat: repeat;
    clear: both;
.footer, .push {
    clear: both;
#wrapper #bodyArea #footer #searchbar {
    height: 70px;
    width: 230px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #af4d33;
    padding: 15px;
    color: #FFFFFF;
    background-repeat: no-repeat;
    float: left;
    text-align: left;
    clear: none;
#wrapper #bodyArea #footer #admissionhours
    height: 70px;
    width: 415px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #af4d33;
    padding: 15px;
    color: #FFFFFF;
    background-repeat: no-repeat;
    float: left;
    text-align: left;
    clear: none;
#wrapper #bodyArea #footer #addresstel{
    height: 60px;
    width: 330px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #af4d33;
    color: #FFFFFF;
    background-repeat: no-repeat;
    float: right;
    text-align: right;
    padding-top: 22px;
    padding-right: 25px;
    padding-bottom: 0px;
    padding-left: 15px;
#google_translate_element{
    padding: 25px;
html {
overflow-y:scroll;
a img {border: none;

Horgykitkat wrote:
What I found after taking out the heights from the text areas is that I was left with uneven text column lengths (alternating beige areas). So I created a repeatable jpg with the same alternating beiges and put it as the background of the bodyArea tag. Again, if there is a better way, please let me know!
A repeating background image to 'fake' equal height columns is perfectly ok.
It won't work IF your page is responsive but it isn't so no problem. If it were responsive a better solution would be to take advantage of the css property display: table; and display: table-cell;
In reference to your footer background color not showing I would assume you have floated items within the footer container. If so then you need to clear those floated items which allows the footer container to wrap itself around the floated items inside it.
You would do this by using css - overflow: hidden; - on the parent container which has the floats inside it.

A a:link has background image

I have a bkg img in my nav and bottom nav. (navBkg.jpg) These navs are styled very specifically for the nav and bottom Nav in my css. However all the a links are displaying this background, rather than just the nav and bottom Nav. You can see it in the lower box (Eva prim's Snack of the Week Club) where it says "...read more."
http://carriecoren.com/test/Sept9
here's the css:
@charset "UTF-8";
#column3 img {
          margin-left: 10px;
@font-face
font-family: myFirstFont;
src: url(Gondola_SD.ttf);
          margin:0;
          padding:0;
a, a:link, a:hover {
                    background-image: url(../images/whtBkg.jpg);
body {
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          font-size: 14px;
          color: #222;
          line-height: 18px;
          margin-right: auto;
          margin-left: auto;
          text-align: left;
          background-image: url(../images/blue_bg_vert.jpg);
          background-repeat: repeat-x;
          background-color: #000;
#container {
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          margin-top: 0px;
          margin-bottom: 0px;
          text-align: left;
          background-color: #FFF;
          background-image: url(../images/containerBkg.jpg);
          background-repeat: repeat-y;
#content {
          width: 920px;
          padding-right: 20px;
          padding-left: 20px;
#header {
          background-image: url(../images/header.jpg);
          background-repeat: no-repeat;
          padding: 0px;
          height: 280px;
          width: 960px;
          text-indent: -9999px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
/* column 1 */
#column1 {
          width: 590px;
          margin-top: 30px;
          margin-right: 0px;
          margin-bottom: 20px;
          margin-left: 10px;
          border: medium solid #888;
          background-image: url(../images/column1art.jpg);
          padding-bottom:50px;
          float: left;
#column1 p{
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          font-size: 14px;
          color: #222;
          line-height: 22px;
          padding-left: 253px;
          padding-right:10px;
          padding-bottom:10px;
#column1 h1{
          font-weight:normal
          font-family: Gondola_SD.ttf;
          font-family: "Gondola SD", "Gondola SD - Swash";
          padding-top: 20px;
          padding-left: 240px;
          padding-bottom:10px;
          font-size: 20px;
          word-spacing: 95%;
          text-transform: uppercase;
          line-height: 30px;
          text-align: center;
/* column 2 */
#column2 {
          background-color: #FFF;
          padding: 0px;
          width: 250px;
          margin-top:30px;
          margin-right: 20px;
          margin-bottom: 0px;
          margin-left: 10px;
          float: right;
          padding: 0px;
#column2 li {
          list-style-type: none;
          display: inline;
          padding: 0px;
          margin-top: 0px;
          margin-right: 8px;
          margin-bottom: 0px;
          margin-left: 0px;
#column2 a, a:link {
          margin-top: 0;
          margin-right: 0px;
          margin-bottom: 0;
          margin-left: 0;
          padding-top: 0;
          padding-right: 0;
          padding-bottom: 0;
          padding-left: 0;
/* column 3 */
#column3 {
          width: 550px;
          margin-right: 0px;
          margin-bottom: 20px;
          margin-left: 10px;
          border: medium solid #888;
          padding: 20px;
          float: left;
          height: px;
          background-color: #FFF;
#column3 p{
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          font-size: 14px;
          color: #222;
          line-height: 22px;
#column3 h2{
          font-weight:normal
          font-family: Gondola_SD.ttf;
          font-family: "Gondola SD", "Gondola SD - Swash";
          padding-bottom:10px;
          font-size: 16px;
          word-spacing: 95%;
          text-transform: uppercase;
          line-height: 30px;
          text-align: left;
#column3 a, a:link{
          color: #33C;
          background-color: #FFF;
          background-repeat: no-repeat;
#column3 a:hover{
          color: #33C;
          font-weight: bold;
h1{
          padding-bottom:10px;
          font-weight:normal
          font-family: Gondola_SD.ttf;
          font-family: "Gondola SD", "Gondola SD - Swash";
          padding-top: 20px;
          font-size: 20px;
          word-spacing: 95%;
          text-transform: uppercase;
          line-height: 30px;
          text-align: center;
/* the main nav */
#nav {
          width: 960px;
          height: 35px;
          margin-bottom: 10px;
          padding-top: 5px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
          text-align: center;
          font-size: 14px;
          line-height: 30px;
          font-family: "Gondola SD", "Gondola SD - Swash";
          border-top-width:thin;
          border-color:#000;
          background-image: url(../images/navBkg.jpg);
          background-repeat: repeat;
#nav ul { /* this is the main nav list */
          list-style:none;
          margin-bottom:0px;
          width:100%;
          margin-top: 0px;
#nav li {
          display: inline;
          background-image: url(../images/navBkg.jpg);
          background-repeat: repeat-x;
#nav li a, a:link {
          padding-right:25px;
          padding-left:15px;
          text-decoration:none;
          background-image: url(../images/navBkg.jpg);
          background-repeat: repeat-x;
          vertical-align: bottom;
          width: 100%;
          padding-top: 0px;
          padding-bottom: 0px;
          margin-top: 0px;
#nav li a:hover{
          background-image: url(../images/navBkgHover.png);
          background-repeat: repeat-x;
          padding-top: 6px;
          margin-top: 0px;
          width: 100%;
/* bottom nav */
#bottomNav {
          width: 960px;
          background-color: #003399;
          margin: 0px;
          padding-top: 0px;
          padding-bottom: 0px;
          border-top-width: 9px;
          border-top-style: solid;
          border-top-color: #000;
          text-align: center;
          background-image: url(../images/navBkg.jpg);
          background-repeat: repeat-x;
          float: left;
          height: 25px;
#bottomNav ul {
          list-style:none;
          font-weight:bold;
          margin-bottom:0px;
          margin-top: 0px;
          padding-top: 0px;
          padding-bottom: 0px;
#bottomNav li {
          margin-right:0px;
          position:relative;
          padding-right: 10px;
          padding-left: 10px;
          padding-top: 0px;
          padding-bottom: 0px;
          display: inline;
#bottomNav a, a:link {
          margin-right:0px;
          padding-right: 10px;
          padding-left: 10px;
          padding-top: 7px;
          padding-bottom: 7px;
          display: inline;
          margin-top: 10px;
          margin-bottom: 0px;
          color: #DDD;
#bottomNav a:hover {
          color:#DDD;
          background:#660000;
#pinterest {
          width: 250px;
          margin-right: 0px;
          margin-bottom: 20px;
          margin-left: 0px;
#twitter {
          background-color: #FFF;
          width: 250px;
          margin-right: 0px;
          margin-bottom: 20px;
          margin-left: 0px;
          height: 100%;
          margin-top: 15px;
#social {
          width: 250px;
          height: 58px;
          background-color: #FFF;
#copyright {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9px;
          line-height: 20px;
          color: #222;
          text-align: center;
          width: 100%;
          float: left;
#contact {
          margin: 0px;
          height: 140px;
          width: 50px;
          padding-right: 10px;
          padding-left: 20px;
          border: thin solid #222;
          padding-top: 40px;
.clear {
          width: 900px;
          color: #EEE;
          margin-top: 100px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          clear: both;
#container #content #clear {
          width: 700px;

OK, you didn't need to post your CSS here, it's available on the page.
But I am confused. Perhaps I am misreading you here.
You have your bottom nav and your top nav. Then you have your "read more" which is not nav-it's just a link. Doesn't have your nav background.
When you set the rules for links for Column 3, you set the way the "read more" would work:
#column3 a, a:link{
          color: #33C;
          background-color: #FFF;
          background-repeat: no-repeat;
#column3 a:hover{
          color: #33C;
          font-weight: bold;
So when you hover, it turns bold and maintains the same color. And the background for links in Column 3 is white, which is the background for column 3. Really not needed.
Additionally, the W3C Validator is finding problems with your page. Please fix those, then get back to us.

How can i make a background color linear?

i want to put a background color have a linear effect, but im not sure how to do that. i want it so that it will fit the entire browser screen. i dont know a lot about backgrounds, i know that i can make a background color fill the entire browser and make a image repeat itself to fit the browser, but thats all i know.

WOW...this is exactly what i have been searching for over tha last 2 weeks but i finally found out how to do it perfectly.
I found the solution after analyzing a site i visited that had the effect i wanted.
Herez a sample of the page i created with the effect...exactly as you drew it....but with diferent colours,lol.
http://edutchz.freehostia.com/sample/
I have also attached bg.jpg with this post as well as the CSS i used; but to see them in action use the above link
Now all u need to do is create a sinlge strip of image....say 1000px wide by 10px high. On both exterior sides of this image place your linear colurs from outside inwards to cover say 100 or 150px....now do this exactly on the other side.....this will leave a central region with white colour.
Now name it bg,jpg.....use CSS to place it on your page....in my case;
body { margin : 0px;
background-color: #eeeeee;
background-image:
url(bg.jpg);
background-position: top center;
background-repeat: repeat-y
also change the background-color to one that nearly matches your linear img color.
Hope this helpd

Linked jpg background color?

Similar Messages

Maybe you are looking for