Highlighted

Add Element Icon (+)

Community Beginner ,
Nov 17, 2020

Copy link to clipboard

Copied

I am trying to add the "class .wrapper" to three elements in the DOM Panel.  When I select the first element the Add Element Icon (+) appears on the left side, as it should.  But when I select more than one item using the "shift key"  the Add Element Icon (+) disappears on the left side.  So I am at a loss on how to proceed.  The exercise that I am using is in Chapter 7 (Working With Templates) under the (Inserting an editabele region) section in Adobe Dreamweaver 2020 release Classroom In A Book. 

So far, this book has been absolutely great, and this is the first glitch that I've encountered.

Thanks for your time and consideration!

Views

48

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Add Element Icon (+)

Community Beginner ,
Nov 17, 2020

Copy link to clipboard

Copied

I am trying to add the "class .wrapper" to three elements in the DOM Panel.  When I select the first element the Add Element Icon (+) appears on the left side, as it should.  But when I select more than one item using the "shift key"  the Add Element Icon (+) disappears on the left side.  So I am at a loss on how to proceed.  The exercise that I am using is in Chapter 7 (Working With Templates) under the (Inserting an editabele region) section in Adobe Dreamweaver 2020 release Classroom In A Book. 

So far, this book has been absolutely great, and this is the first glitch that I've encountered.

Thanks for your time and consideration!

Views

49

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 17, 2020 0
Adobe Community Professional ,
Nov 17, 2020

Copy link to clipboard

Copied

Hi@frontier logic,

Disclaimer: I have not opened a CIAB in decades.  So no idea what lessons they contain.

 

But as longtime DW user, that's NOT how one would normally add classes to tags.  Working that way would add more tags to existing tags which leads to unwanted code bloat.  Or it wraps three tags inside yet another tag which is also not too beneficial in the real world.  To add an existing wrapper class to your element, see screenshots below.

 

1. Open your template.dwt file.

2. Switch to Code| Split | Design in your Document Toolbar. 

3. In code panel or DOM panel, select your target <div> tag. 

4. Assuming the CSS class is already defined in your stylesheet, the quickest way is with code hints and auto-code completion which pops up while you type. 

 

Fig 1.Fig 1.

 

5. Another option is to add the wrapper class from your HTML Properties Panel (Ctrl + F3).

 

Fig 2.Fig 2.

 

Working directly with code is essential when you start working with multiple classes on single elements. Panels can't help you with that.

 

Post back if you have any questions.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2020 1
Community Beginner ,
Nov 19, 2020

Copy link to clipboard

Copied

Nancy,

 

     Thanks for your detailed reply!

     I'm going to pay more attention to the coding section from now on..

 

Best Regards,

Jack Everetts

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
Adobe Community Professional ,
Nov 18, 2020

Copy link to clipboard

Copied

Are you sure you're working with 100% clean and valid code and that the code is properly nested?

Errors in your html, especially missing start/end tags will make the DOM panel stop working correctly. Make sure to run the validation tool under Window > Results > Validation or go to http://validator.w3.org/nu to get a listing and clean up any errors it finds. 

Also, be sure your elements are correctly positioned as siblings, not parent/child elements, within your HTML. The DOM Panel won't let you select and wrap multiple elements that aren't on the same level (siblings), if you see something like this...

 

Correct.jpg

You should have no issue selecting both DIV tags and getting the option to wrap them, but if you see something like...

incorrect.jpg


Where the second DIV is a child of the first, you won't be able to select and wrap both DIV tags. If your HTML were set up that way, you would only need to select the parent DIV to wrap everything in a new element.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 18, 2020 1
Community Beginner ,
Nov 19, 2020

Copy link to clipboard

Copied

Jon,

 

     Thanks for pointing out these items! 

     I've decided to start this particular chapter's exercises over again, and I will pay close attention to your counsel.

 

Best Regards,

Jack Everetts

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0