Div / Region Nesting Question

CM1
1

having some div / content nesting issues…

I have a column div, that will ultimately contain three other structural divs stacked vertically, and at the very top of these three is a button image wrapped in an anchor. All the same width, all in a single column.

I see that there is a “rule” against how I would normally achieve this. So I am hoping someone can help me out as to how this should be accomplished while abiding the CM1 “rules”

Finished page is here: http://discover.csmd.edu and I’m talking about the right column in the main content area that contains the large “Request Info” button with the Magazine, Flickr and youTube regions below it.

2

Hi Tom,
One way to accomplish this would be to add an extra region above the three divs, with a html or rich-text widget to contain the image and associated code.

3

Jon,

I figured that would be the solution, it just seems like adding code for code’s sake, which I’m not a fan of.

4

Tom,

I see the column and the Request Info box at the top of the other three boxes. Can you help me understand a little better as to what you are having difficulty with?

5

Tom,

Upon looking at your page further, I can see what you are referring to. If you set up your CSS for the mag, flickr, and youtube blocks, you can simplify the layout by making the #rightcol div a Region and the child blocks Rich Text widgets.

You can specify a root class on a widget by configuring the widget style properties on the Style tab. After that, I would just place the contents of each one into a rich text widget, or create them as assets. Your top Request Info box would live in a top Rich Text with the ones below it having a mag, flickr, and youtube root class instead of an ID on a region.

6

Daved,

I think the issue has to do with Rule 3 on this page…

Stating that a Widget (in my case, Rich Text) cannot be at the same level as a Region. To me it would make sense to be able to have a Rich Text Widget stacked on top of three Regions…

Rich Text Widget
Region
Region
Region

but according to Rule 3, it would have to be as so…

Region
–Rich Text Widget
Region
Region
Region

To me, having that extra Region encasing the Rich Text Widget, is superfluous, and I try to avoid extra divs whenever possible.

7

interesting solution, I’ll try that out.

8

Screenshot of the template

Here is a quick video to show what I did as well: http://screencast.com/t/7LbKXdkz

9

Daved,

thanks for the suggestion, we ended up using four seperate HTML widgets, inside a Region (for the column), and this worked out great. I used the HTML widget because these are sections that a user would never edit.

Also, I noticed that copying and pasting HTML into the “source mode” of a Rich Text widget, sometimes wrapped the inserted code in unnecessary tags. We were able to remove them when it happened, but definitely something to watch out for.

10

Glad you were able to get that working, Tom. Yes, the Rich Text widget follows a set of auto formatting rules for the HTML it generates, making the “source mode” better suited for small HTML tweaks rather than for pasting blocks of code. The HTML widget is best for that type of application because it doesn’t format your code. But you’re right; in cases where pasting code into a Rich Text widget is preferable, it is a good reminder to double-check the “source mode” to make sure everything went in cleanly.

11

As an ad-on to this: If you use a Rich Text widget, and hyperlink to a page or asset living in CM1, the link will be managed by CM1. If you move the item or change the file being linked to, CM1 will keep the link updated in any Rich Text so they don’t break.

In a HTML widget, these links will not be managed because HTML is not managed or handled in CM1. HTML content is allowed to be free-form, requiring an extra hand or step to update any links that change.

12