Css gradient

Hi guys just a quick question
does IE8 or above recognise css gradients?
the following page uses a grad behind the images in an article div by setting the background-image/linear-gradient option in css but it does not show in IE8...
firefox27 etc is fine.

There's an issue with IE7/8 that they don't set the gradient background if the element doesn't have height defined (hasLayout).
Try adding zoom: 1. If it doesn't work, you'll probably have to set a height, so try height: 100%.

Similar Messages

BUG? Fireworks to DW CSS gradients not consistent across browsers...?

Greetings -
I don't know if this is a bug or what, but after watching one of the Adobe TV roadshow videos I generated CSS gradients in Fireworks, selected ALL the browser compatible translations Fireworks provides and then copied/pasted the CSS into my web page in Dreamweaver. Looks good in DW - all seems well...until I view it with Firefox...
I'm not a Rocket Scientist, but also not a newbie.
Basically, IE, etc. all work fine EXCEPT Firefox! Firefox maintains the color, but distorts the gradient percentage and reverses the angle of gradient. E.g. if my gradient is going from dark on top to white on the bottom of a box, it all displays fine in the other browsers, but in Firefox the gradient goes left to right, dark to light...
And yes, I promise I made sure I have the Firefox CSS in addition to the IE, etc. before bothering you all.
OH! AND I am using the Fluid Grid set up in Dreamweaver...just FYI.
Am I missing something?
Do I have to manually update? (i.e., tie a rope around my waist and head on in to the looking glass - code land that is CSS gradients?
Is there something in DW that needs to be altered after the CSS from FW is added?
Many thanks for all your help and advice!
JL

JLSF45 wrote:
I don't know if this is a bug or what,
Yes, it's a bug in the code that Fireworks generates, not in the way that Firefox handles CSS gradients.
The reason for the problem is that browsers started implementing CSS gradients on an experimental basis long before the W3C standardization process got under way. For some reason, all browsers decided to calculate angles using the polar coordinate system, in which 0 degrees points right and the angles increase counterclockwise. This way of measuring angles appears to be common in geometry, but it's not the way that most people think of them.
The most common way of measuring angles is to use the compass system: 0 degrees points straight up, and angles increase in a clockwise direction. That's the way the W3C decided angles should be measured in CSS. Because 0 degrees in the polar coordinate system is 90 degrees in the standard CSS syntax, and angles increase in the opposite direction, the only angle that's the same in both systems is 45 degrees.
Unfortunately, whoever coded the Fireworks panel didn't realize that the standard syntax uses different angles, and nobody picked it up in beta testing. The problem has been reported to Adobe, and I'm told it will be fixed, but I don't know when.
Until it's fixed, you need to convert the angle in the unprefixed version of linear-gradient().
Subtract the angle generated by Fireworks from 360.
Add 90
For example, if the angle generated by Fireworks is 315deg, 360-315 = 45. 45 + 90 = 135. So change the angle in the unprefixed version to 135deg.
IE 10 also uses the standard syntax, so the conversion is necessary not only for Firefox, but it will be needed by all browsers.
This is a rare case of the value for browser-specific prefixes being completely different from the standard syntax.

Css Background Gradient

i have a css background gradient... but when i scroll, the gradient stick in the loading height.
what can i do to have the gradient correct always?
html {
    height:100%;
body {
    height:100%;
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: -moz-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(84,84,84,0.9)), color-stop(100%, rgba(0,0,0,0.9)));
    background: -webkit-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background: -o-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background: linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6545454', endColorstr='#e6000000', GradientType=0 );
    margin: 0;
    padding: 0;
    color: #000;

Don't know about the Javascript - you basically would need to create a listener that would detect when the window size changed and the reapply the CSS gradients. One issue with that approach is that it can become a bit of a resource hog.
For approach #2 check out: http://www.designbyfire.com/ - scroll and look at the bottom of his text content - he's using a transparent png graphic to create a kind of fade gradient effect (it's very subtle). Take a look at the source to see how he did it. Also this might be helpful:
http://www.1stwebdesigner.com/inspiration/beautiful-gradient-effects-on-web-design-researc h-part-2/ - a bunch of sites that use this technique for background gradients.
But basically create a gradient graphic in Photoshop (you only need a small sliver graphic as we can repeat it across the x-axis). Then in your CSS do something like this:
body{
background:#ccc url("path/to/gradientImage.jpg") bottom repeat-x;
Change the background color (#ccc) to match the top of your gradient image color. "bottom" tells the browser to attatch the graphic to the bottom of the body tag, "repeat-x" tells the browser to repeat it across the x-axis (horizontal). If you've done it right, your background image will blend into the background color creating a nice gradient effect.

Is it possible to add a gradient to text in adobe edge animate?

i'm wondering if it's possible to add a gradient to text in adobe edge. I come from the flash world and new to edge. I'm trying to eliminate importing a series of text blocks as art. Can anyone add some insight please?
thanks in advance!

Check this out :http://css-tricks.com/snippets/css/gradient-text/
Sent from Mailbox
On Mon, Jun 16, 2014 at 4:52 PM, Marie Goodwyn <[email protected]>

How to edit PS Extension CSS;

I am trying to edit the BG of the CC libraries extension assets (it's a simple CSS gradient) but saving the file will not let me use the extension anymore saying it has not been signed properly. Any ideas on how to edit this, or any extension?
Imagine the possibilities.
The default PS extensions are located in Photoshop/Contents/CEP/extensions/(com.adobe.DesignLibraryPanel.html)
Thanks.

Hi,
I do not recommend you change Apex css files.
Create your own theme and change css file on that.
Or add your application page template header style that overwrite font size like
<style>*{font-size:40px!important}</style>When you try login to xdb where is all images,css and js files use SYSTEM user.
http://daust.blogspot.com/2006/03/where-are-images-of-application.html
And Apex related question you should post to Application Express Forum
Oracle Application Express (APEX)
Regards,
Jari

Is it possible to apply a PNG image *and* a gradient to a single div background?

I am looking to create a div that will have a css gradient as a background, but also a PNG image to go on top of that gradient. This div will also contain text.
So the desired stacking order is :
Top : Live Text
Middle : PNG image
Bottom : CSS Gradient
Question : Can this be done with only 1 div?
I know that if you specify a background image AND a background color on the same div, you will get both, and it works quite well. But it seems much more complex to do it with a gradient instead of a flat bg color.
If it's do-able, what would the syntax be?
Thanks!

Hi
You could also use multiple background images, though this will not work in IE8 or below, (use Nancys 'stacking order' as a fallback but specify these first).
#multipleBackgroundImages {
background-image: url(gradient.svg),
url(your_image.jpg);
background-position: top left, bottom right;
background-repeat: no-repeat;
see also - http://www.css3.info/preview/multiple-backgrounds/
I specify an svg as the first image as this will work across all modern browsers.
For IE8 or below -
You could use an IEFilter for the gradient and an image over that, providing your image is not too large, or use the IEFilter 'alphaImageLoadeer' to place the image in the top r/h corner of the div, with the gradient below.
PZ

Background gradient only extends partway down the page

Trying to create a CSS gradient for the background of the body tag but I find that it only extends as far down the page as the content goes. So I tried to continue the bottom color by specifying it as a body background color, but it won't display.
Any ideas?

Terrific! Actually it was that last line that did it on my page as I don't have a background image
Dreamweaver CC created a background for me which consists of 4 lines, one for each type of browser. Below that I added your 'background-attachment:fixed; line and it worked!
Thanks agian.

Banding on gradient

I have been trying to reduce the amount of banding on the long background image on our site.
http://stitch-technologies.com/
Seems that when I use a 1 pixel strip and repeat horizontally there is a slight amount of banding visible. Is there any good ways in Photoshop to reduce this? Has anyone here attempted using HTML5 gradient instead and seen if it causes less of an issue?

Simple computer math - any 8bit gradient will eventually show banding. even if you used CSS gradients they would band, if the distance to cover exceeds the available levels of gradation. realyl not much you can do than to rethink your design approach.
Mylenium

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.

My page online is not matching what I Have in DW

Hello,
The following is my first real effort at a website: http://wisercharitable.org/vr_index.html
For the past few months it has looked just fine, but I have added a page here and there in the past week or two and something went wrong. It has something to do with the font size because when I go online, it is huge compared to what it looks like in DW. In fact, it doesn't even fit properly on the page. Also, it appears to have impacted every page, leading me to believe the problem is on the styles sheet. I'm sure it happened as a result of a change I made recently, but I can't figure out what that would be and why the pages all look fine in DW. Any thoughts would be appreciated as I am learning as I go.
Here is my styles sheet code as well:
@charset "utf-8";
/* CSS Document */
body {
                background-color: #000;
#container {
                height: 1200px;
                width: 900px;
                left: auto;
                right: auto;
                background-image: url(Images/vr_grad.jpg);
                margin: 0 auto;
#header {
                width: 878px;
                height: 130px;
                background: #FFFFFF;
                background-image: url(Images/vr_header.jpg);
                border: 1px solid #000000;
                padding: 10px 10px 10px 10px;
#date {
                width: 880px;
                height: 20px;
                background-image: url(Images/vr_redgrad2.jpg);
                border: 1px solid #000000;
                padding: 10px 10px 10px 10px;
                text-align: center;
                font-family: Georgia, "Times New Roman", Times, serif;
                font-size: 20px;
                font-weight: bold;
#left_column {
                width: 150px;
                height: 864px;
                float: left;
                margin: 5px 5px 0 0;
                border: 1px solid #000000;
                padding: 10px 10px 10px 10px;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                background-image: url(Images/vr_yellowgrad.jpg);
#center_column {
                width: 890px;
                height: 936px;
                margin: 5px 5px 5px 0;
                padding-right: 10px;
                font-size: 18px;
                font-weight: bold;
#center_column h2 {
                font-size: 36px;
                font-style: italic;
p {
                margin: 0;
                font-weight: bold;
                color: #000;
#footer {
                width: 880px;
                height: 80px;
                border: 1px solid #000000;
                padding: 10px 10px 10px 10px;
                background-image: url(Images/vr_grad.jpg);
                font-size: 14px;
                font-family: Georgia, "Times New Roman", Times, serif;
                text-align: center;
                font-weight: 100;
.links {
                font-size: 24px;
.events {
                font-size: 24px;
.floatright {
                float: right;
                margin-left: 5px;
                margin-top: 10px;
.floatleft {
                float: left;
                margin-right: 5px;
                margin-bottom: 5px;
.gfr {
                font-size: 20px;
                color: #CC9900;
.gfr {
                color: #000;
                font-size: 18px;
.gfr {
                font-size: 18px;
#container #center_column .ms_title {
                font-weight: normal;
                font-size: 18px;
.Sharp {
                font-weight: bold;
.bold {
                font-size: 18px;
                font-weight: bolder;
.spon {
                font-weight: bold;
Thanks for any help you all can offer.
Chris

Two things I see...
You are setting the height of your green gradient <div> in the css. Height should be determined by content specifically for the reason you are seeing on your site. The height of that <div> is too small for all of the content within it so you have overflow issues.
Once you fix that by removing the height:936px setting, the other problem occurs. Your background gradient image isn't large enough to fill the correct height of your <div> so when the <div> expands, the black text falls over the black background.
You can increase the size of the vr_grad.jpg, or look into using css gradients (a google search will give you a bunch of sites). I know there are a few here who use: http://www.colorzilla.com/gradient-editor/ to generate the code.

What replaces the CS6 spry menu bar in dreamweaver creative cloud 2014?

Hi,
Previously I used Dreamweaver CS6 and the spry menu bar widget (horizontal). I do not see this in Dreamweaver CC 2014. I am looking around in the Insert Panel (jQuery UI) but don't think a spry menu bar equivalent is listed.
Is there such an equivalent built into Dreamweaver CC 2014?

Basic CSS drop-menu
CSS Menu - JSFiddle
Advanced drop-menu with CSS gradients & transitions
CSS Horizontal Drop-Menu - JSFiddle
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
Responsive Iconic
http://www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu/
Responsive Hybrid
http://www.dynamicdrive.com/dynamicindex1/responsivehybridmenu/index.html
Nancy O.

Is there any way to convert psd to html through dreamweaver

I am very new in websites and i want to know if is there any way to create themes for wordpres or convert psd to html with adobe dreamweaver?
i have this website but i would like to create a new one.
lajme

With all the folks using mobile devices on the web now, the web trend has shifted significantly from heavy use of graphics to the power of CSS3 rgba, linear-gradients, border-radius, box- / text-shadows, transitions, and SVG graphics.
CSS3 Generator
http://css3generator.com/
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/
The upshot to all this is faster page loads with less bandwidth. Of course, you must build to your target audience. If that includes older, inferior browsers like IE8, then images might be a better choice for you.
PSD to WordPress? I'm not aware of any software that can do this for you. It requires good coding skills and experience with WordPress Theme Development.
http://codex.wordpress.org/Theme_Development
Nancy O.

Why is the background of my site not wide enough on a tablet?

I am testing the website I made on this url: http://www.beautysalon-piurity.nl/test/index3.html
unfortunately when I view it on a tablet the background (which is a gradient white to green from top to bottom) stops to soon at the right side, you can see this at the bottom
I wonder why this happens?

Your code is not correctly expressed. CSS gradients are not background-image. They are simply background:
http://www.colorzilla.com/gradient-editor/
Nancy O.

How do I set my background for a website banner in these colours?

Hi guys, I am a complete beginner when it comes to Photoshop and I have just downloaded Adobe Photoshop CC 2014.
If you please refer to the picture I have uploaded, I want my website banner to be these shades of green. I do not want the white writing in it. So how would I create a website banner with the background as these shades of green without the writing?
PS I did not choose pick these colours, it was mum who want's the website created

You're looking for a Gradient
Photoshop Help | Gradients
Honestly, I would use a CSS Gradient instead of an actual image. Why? Because a CSS Gradient is Responsive (scalable) in % width layouts. And the code takes up very little bandwidth which is kinder & gentler to mobile data plans.
Your HTML & CSS code would look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Your Site Name</title>
<style>
header {
    margin: 0;
    padding: 0;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-size: 32px;
    min-height: 150px;
    text-align: center;
    color: #FFF;
    text-shadow: 4px 3px 3px #666;
/**CSS Gradient**/
    background-color: #00a855;
    background: -moz-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #00a855), color- stop(100%, #bcd800));
    background: -webkit-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -o-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -ms-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: linear-gradient(135deg, #00a855 0%, #bcd800 100%);
</style>
</head>
<body>
<header>
<h1>Your Awesome Headline</h1>
</header>
</body>
</html>
Nancy O.

Fluid Layout - Background Image

Hello All,
First I'll explain what I did and what I'm hoping to see. I created a fluid grid layout. Below the fluid grid layout, added a div that extends 100% width that's not part of the fluid grid. So I inserted an image by going to the Commons tab and selected image, I was then able to browse for the image I wanted and then inserted it. once inserted I see it scales correctly on all 3 devices. Now I would like to add text over this image but I can not do that. I can only put text either above or below the inserted image. So I deleted the image, selected the div and inserted the image by going into my Properties panel and imported it as a background image. But as you guys may know, I had to set a specific height, for the image to be view and it doesn't even scale correctly on all device outputs. But that was the only way I could insert text over the image.
What am I doing wrong? All I want is to have a background that's scaleable on all viewports with the text on top of the image. Maybe there's a tutorial that can help me out with this.
HELP!
Thanks in advance.
P.S. Here's the simple code that I have.
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for mhvkhhadditional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
</div>
<div>This is the content for Layout Div Tag</div>

You really must use a Background in the CSS. You cannot position image & overlay elements in Responsive Web Designs. It simply won't work well.
Resizable Full Page Background Image
I prefer to use CSS Gradients or solid background colors which is much less bandwidth for mobile data plans to absorb.
Ultimate CSS Gradient Generator - ColorZilla.com
Nancy O.

Css gradient

Similar Messages

Maybe you are looking for