Jump to content

Opacity in Dreamweaver


Recommended Posts

Im trying to add a text field to my website. I wanted to give a gray color but I wanted to faded 50%. I went to the tutorial on this site my only question is where do I insert the code??Here is the code I dound on this site:<html><head><style type="text/css">div.background{width:500px;height:250px;background:url(klematis.jpg) repeat;border:2px solid black;}div.transbox{width:400px;height:180px;margin:30px 50px;background-color:#ffffff;border:1px solid black;/* for IE */filter:alpha(opacity=60);/* CSS3 standard */opacity:0.6;}div.transbox p{margin:30px 40px;font-weight:bold;color:#000000;}</style></head><body><div class="background"><div class="transbox"><p>This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.</p></div></div></body></html>Here is my code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- TemplateBeginEditable name="doctitle" --><title>Untitled Document</title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><style type="text/css"><!--#apDiv1 {position:absolute;width:200px;height:115px;z-index:1;overflow: auto;background-image: url(../images/about.index_03.jpg);}#apDiv2 {position:absolute;width:178px;height:135px;z-index:1;left: 294px;top: 217px;background-image: url(../revilbutton.jpg);background-repeat: no-repeat;background-attachment: fixed;}#apDiv3 {position:absolute;width:92px;height:58px;z-index:1;background-image: url(../home.jpg);left: 110px;top: 205px;}#apDiv4 {position:absolute;width:92px;height:58px;z-index:2;left: 110px;top: 273px;background-image: url(../aboutus.jpg);}#apDiv5 {position:absolute;width:87px;height:53px;z-index:3;left: 114px;top: 308px;}#apDiv6 {position:absolute;width:85px;height:52px;z-index:4;left: 112px;top: 366px;}#apDiv7 {position:absolute;width:82px;height:52px;z-index:1;top: 52px;left: 177px;}#apDiv8 {position:absolute;width:92px;height:58px;z-index:5;left: 111px;top: 545px;}#apDiv9 {position:absolute;width:92px;height:58px;z-index:6;left: 112px;top: 612px;}#apDiv10 {position:absolute;width:92px;height:58px;z-index:7;left: 120px;top: 516px;background-image: url(../revilayounew1.jpg);}#apDiv11 {position:absolute;width:92px;height:47px;z-index:8;left: 92px;top: 235px;}body {background-color: #000;}#apDiv12 {position:absolute;width:88px;height:53px;z-index:9;left: 328px;top: 243px;}#apDiv13 {position:absolute;width:86px;height:54px;z-index:1;left: 7px;top: 97px;}#apDiv14 {position:absolute;width:80px;height:50px;z-index:1;left: 87px;top: 221px;}#apDiv15 {position:absolute;width:80px;height:50px;z-index:2;left: 87px;top: 277px;}#apDiv16 {position:absolute;width:80px;height:50px;z-index:3;left: 87px;top: 333px;}#apDiv17 {position:absolute;width:84px;height:53px;z-index:4;left: 87px;top: 389px;}#apDiv18 {position:absolute;width:86px;height:52px;z-index:5;left: 87px;top: 446px;}#apDiv19 {position:absolute;width:86px;height:53px;z-index:6;left: 87px;top: 503px;}#apDiv20 {position:absolute;width:85px;height:52px;z-index:7;left: 87px;top: 561px;}#apDiv21 {position:absolute;width:4px;height:52px;z-index:1;left: 0px;top: 397px;}#apDiv22 {position:absolute;width:85px;height:52px;z-index:2;left: 0px;top: 456px;}#textback {position:absolute;width:758px;height:479px;z-index:8;left: 285px;top: 228px;background-image: url(../textback.jpg);}#textback {font-family: Times New Roman, Times, serif;}body,td,th {font-size: 75px;}--></style><script src="../SpryAssets/SpryEffects.js" type="text/javascript"></script><script type="text/javascript"><!--function MM_effectAppearFade(targetElement, duration, from, to, toggle){Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});}//--></script></head><body><table width="1080" height="874" border="0" align="center"><tr align="center" valign="top"><td scope="row"><div id="apDiv20"><img src="../equipment.jpg" width="85" height="52" align="left" /></div><div id="apDiv19"><img src="../photo.jpg" width="85" height="52" align="left" /></div><div id="apDiv18"><img src="../videos.jpg" width="85" height="52" align="left" /></div><div id="apDiv17"><img src="../packages.jpg" width="85" height="52" align="left" /></div><div id="apDiv16"><img src="../production.jpg" width="85" height="52" align="left" /></div><img src="../revilayounew1.jpg" width="1140" height="826" /><div id="textback"></div></td></tr><img src="textback.jpg" width="150" height="113" alt="textback"style="opacity:0.4;filter:alpha(opacity=40)" /></table><div id="apDiv14"><img src="../home.jpg" width="85" height="52" align="left" /><div id="apDiv21"><img src="../directors.jpg" width="85" height="52" align="left" /></div><div id="apDiv22"><img src="../contact.jpg" width="85" height="52" align="left" /></div></div><div id="apDiv15"><img src="../aboutus.jpg" width="85" height="52" align="left" /></div></body></html>

Link to post
Share on other sites

take this

div.transbox{width:400px;height:180px;margin:30px 50px;background-color:#ffffff;border:1px solid black;/* for IE */filter:alpha(opacity=60);/* CSS3 standard */opacity:0.6;}

and change it to something like this

.transbox{background-color:#ffffff;/* for IE */filter:alpha(opacity=60);/* CSS3 standard */opacity:0.6;}

change the background color to the grey color you want, and then on the element(s) that you want to have the grey opacity, add this to their tag:

class="transbox"

for future reference:http://www.w3schools.com/Css/css_image_transparency.asp

Edited by thescientist
Link to post
Share on other sites

Thanks I will try it out

take this
div.transbox{width:400px;height:180px;margin:30px 50px;background-color:#ffffff;border:1px solid black;/* for IE */filter:alpha(opacity=60);/* CSS3 standard */opacity:0.6;}

and change it to something like this

.transbox{background-color:#ffffff;/* for IE */filter:alpha(opacity=60);/* CSS3 standard */opacity:0.6;}

change the background color to the grey color you want, and then on the element(s) that you want to have the grey opacity, add this to their tag:

class="transbox"

for future reference:http://www.w3schools.com/Css/css_image_transparency.asp

Link to post
Share on other sites

A 50% opacity will simply result in a lighter shade of grey (on a white background) or some sum of the background colour and grey (in hex). Why not just set the colour to the lighter shade to start with? If the background colour is liable to change, opacity is the way to go, though.

Link to post
Share on other sites

well, if you follow my post, it should work. The CSS goes in your stylesheet, and you add a class with the corresponding name to any element which you would like to take on the properties of that class (as you would any other class declaration).just for sake of argument, try making the background a color that itself isn't already light and faded to begin with. Try it with a dark blue or green background color.

Edited by thescientist
Link to post
Share on other sites

If all fails depending on the version of dreamweaver you use opacity may not work in the preview if I am relevant to your question in any way.

Link to post
Share on other sites
If all fails depending on the version of dreamweaver you use opacity may not work in the preview if I am relevant to your question in any way.
good point to bring up. If one is going to use Dreamweaver, at the very least they should still preview their page(s) in a normal standards compliant browser like FF, and then IE for good measure.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...