Adobe Community: Can I highlight on the Design View or to show in a panel elements that receive a CSS rule ?

Currently Being Moderated

1. Ken Binney,

Jul 25, 2011 9:22 AM in reply to Yuri Câmara

Report

If you keep a Firefox window (with the Web Developer Toolbar installed) open while you work,

you can use its "Inspect Element" feature to highlight anything in the code and display all

relevant CSS styles affecting it.

|

Mark as:

Currently Being Moderated

2. MurraySummers,

Jul 25, 2011 2:35 PM in reply to Yuri Câmara

Report

Set your CSS panel to CURRENT. Click on the stairstep icon without the red blotch at the bottom. When you select an item the rules pane will show you what rules apply to that item.

|

Mark as:

Currently Being Moderated

3. Yuri Câmara,

Jul 25, 2011 3:20 PM in reply to Ken Binney

Report

Hi Binney,

I think you meant Firebug, don´t you? Well, I did not find the "Inspect Element" feature on Web Developer Toolbar.

Thank you in advance.

|

Mark as:

Currently Being Moderated

4. Yuri Câmara,

Jul 25, 2011 3:34 PM in reply to MurraySummers

Report

Hi Murray,

I would like to do the inverse process. For example, I have a CSS rule in a external file with the selectors #main e #tagline. Then, I want to discover, with Dreamweaver, all the elements that receive that rule. But, when I click on the rule nothing is highlighted in the Design View and I did not find another way to show that.

Thank you in advance.

|

Mark as:

Currently Being Moderated

5. MurraySummers,

Jul 25, 2011 3:44 PM in reply to Yuri Câmara

Report

with the selectors #main e #tagline

Only two elements will receive those rules -

Do a find and replace to find the two elements on the page that have those ID values. The rule's styles will cascade into those two containers so all applicable inner descendent containers will also be affected.

As I said, find those two containers, and begin to select elements within them - look at the CSS panel to see when those selectors show up.

|

Mark as:

Currently Being Moderated

6. Yuri Câmara,

Jul 25, 2011 4:01 PM in reply to MurraySummers

Report

Ok. I understood it. I was wondering if there was a way to find the elements that receive the rules from inside a CSS file without looking for the selectors in the page as you explained. Well, maybe it is not possible to do what I want.

Thanks!

|

Mark as:

Currently Being Moderated

7. John Waller,

Jul 25, 2011 5:23 PM in reply to Yuri Câmara

Report

CS5 and CS5.5 have CSS Inspect.

http://help.adobe.com/en_US/dreamweaver/cs/using/WSbb8fae38174aec9d-49 0f8148126e2bcfbe5-8000.html

http://www.adobe.com/go/dwcs5inspect_en

http://layersmagazine.com/dreamweaver-cs5-css-inspect.html

Is that what you have in mind?

|

Mark as:

Currently Being Moderated

8. mytaxsite.co.uk,

Jul 25, 2011 5:38 PM in reply to Yuri Câmara

Report

For example, I have a CSS rule in a external file with the selectors #main e #tagline.

One thing you have to understand is that anything with the pound sign [ # ] indicates that it is an ID. This being the case then I can bet on it that you are not likely to find more than one item using that css rule. IDs can be used only once on a pge.

You also say you have [ e ]. I don't know what this is unless it is a typo.

If you have a class rule (i.e. something like .myclass) then you can search for that name on the page to see where that rule affected.

This is the best I can suggest here for now.

hth

|

Mark as:

Currently Being Moderated

9. MurraySummers,

Jul 25, 2011 6:22 PM in reply to mytaxsite.co.uk

Report

Rules that apply to a an id-selector can cascade into descendent containers.

#foo { color:red; }

for example....

And the "e" is used as an "and" in that sentence. The speaker's native tongue does not appear to be English....

|

Mark as:

Currently Being Moderated

10. mytaxsite.co.uk,

Jul 25, 2011 6:34 PM in reply to MurraySummers

Report

Murray *ACP* wrote:

Rules that apply to a an id-selector can cascade into descendent containers.

#foo { color:red; }

for example....

And the "e" is used as an "and" in that sentence. The speaker's native tongue does not appear to be English....

That is true but the chances of findling this is very high if the OP can search for the ID name and then click on that tag to highlight the entire block within that ID. DW has this facility and I can post a print-scrn of it if necessary.

|

Mark as:

Currently Being Moderated

11. Yuri Câmara,

Jul 26, 2011 7:16 AM in reply to John Waller

Report

Not exactly, but it was helpful. Thanks!

|

Mark as:

Currently Being Moderated

12. Yuri Câmara,

Jul 26, 2011 7:25 AM in reply to mytaxsite.co.uk

Report

One thing you have to understand is that anything with the pound sign [ # ] indicates that it is an ID. This being the case then I can bet on it that you are not likely to find more than one item using that css rule. IDs can be used only once on a pge.

Yes, I know that. It was only an example. It could be #main .tagline. Whatever!

You also say you have [ e ]. I don't know what this is unless it is a typo.

That is a typing mistake I committed. Sorry!

Thank you very much!

|

Mark as:

Currently Being Moderated

13. Yuri Câmara,

Jul 26, 2011 7:35 AM in reply to mytaxsite.co.uk

Report

That is true but the chances of findling this is very high if the OP can search for the ID name and then click on that tag to highlight the entire block within that ID. DW has this facility and I can post a print-scrn of it if necessary.

I know that technique. Thank you for your interest in helping me.

|

Mark as:

Currently Being Moderated

14. Yuri Câmara,

Jul 26, 2011 7:37 AM in reply to Yuri Câmara

Report

Guys,

I will try to do a "tutorial" video to show what I would exactly like to do on Dreamweaver. If Dreamweaver does not have that feature, it will be my suggestion for a new version. ok?

|

Mark as:

Currently Being Moderated

15. MurraySummers,

Jul 26, 2011 7:56 AM in reply to Yuri Câmara

Report

I will try to do a "tutorial" video to show what I would exactly like to do on Dreamweaver.

I think we get it. No need to do the video.

it will be my suggestion for a new version. ok?

What would you like us to do with it? You are not talking to Adobe here - we are all just users. If you want to suggest a feature for future versions, please go here -

http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

|

Mark as:

Currently Being Moderated

16. Yuri Câmara,

Jul 26, 2011 8:55 AM in reply to MurraySummers

Report

You are not talking to Adobe here - we are all just users. If you want to suggest a feature for future versions, please go here -

http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

Ah, ok! Thanks!

|

Mark as:

Dreamweaver

Can I highlight on the Design View or to show in a panel elements that receive a CSS rule ?

Jul 25, 2011 8:57 AM

More Like This

Bookmarked By (0)

Answers + Points = Status