Dreamweaver: How to take opacity out of text?

[FrontPage97]

Newbie CS6 question here... I figured out how to draw an AP DIV and turn down it's opacity, but now the opacity of the text inside the AP DIV is also turned down. How do I keep the opacity of the text at 100%?

 

[ronaldroe]

You can't. The div and everything in it will be partially transparent. Another option would be to use a partially transparent background color. You'd do this with rgba(), but that'll require you to do some actual CSS coding (though it may be entirely possible with DW, I have no idea, since I refuse to use it).

 

[Phreaddee]

yes you can code css in DW.

and rgba is the way to get the background transparent/opaque and keep the text as intended.

all children of a div with opacity will take on the opacity as well.

 

[FrontPage97]

I'm a newbie.
So I looked here...
div #apDIV 1 properties > bg color > Color format >
But rgba() is greyed out

 

[Phreaddee]

click the "code view" button.
dont use the properties panel...

 

[FrontPage97]

Changed the AP div background color to rgba in code view. Unfortunately the same result. You might be right ronaldroe.

 

[Edge]

You can get opacity on background only - Look here. Up to you how you get DW to create that code.

 

[FrontPage97]

OK. For some reason this didn't work the first time I tried it, but what I did was simply create a second AP div for just my text. I placed the AP div in another relative div. I may have placed the text in the AP div with the opacity the first time. Not really sure but it's working now.

 

[Edge]

As has been mentioned on another thread DW can encourage you to use absolutely positioned divs. You should be aware though that it is encouraging a bad practice. As part of your learning experience though it may be a good thing you try it out so you can see ultimately what happens and why it has limitations.

Absolute positioning should be used sparingly (or avoided) as it takes stuff out of the flow.

 

[chrishirst]

OK. For some reason this didn't work the first time I tried it, but what I did was simply create a second AP div for just my text. I placed the AP div in another relative div. I may have placed the text in the AP div with the opacity the first time. Not really sure but it's working now.

You can do exactly the same with relative positioning, then use a negative bottom margin on the positioned element to restore the normal flow.

http://examples.webmaster-talk.eu/chris-hirst/css/positioning/relative/