Jump to content

Opacity in Dreamweaver

Agraphicmind

By Agraphicmind
in General

Recommended Posts

Agraphicmind Newbie

Agraphicmind

Posted
Posted

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 comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

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 comment
Share on other sites
Agraphicmind Newbie

Agraphicmind

Posted
  • Author
Posted

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 comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

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 comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

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.

Link to comment
Share on other sites
trinistorm Member

trinistorm

Posted
Posted

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 comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
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 comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...