Embedding WellRoundeds

In this tutorial we are going to embed WellRounded rects into other WellRounded rects. We'll also look at an alternate method for adding a sidebar column to a liquid layout.

sampleoneWe are going to essentially rebuild the design of this sample file.

This tutorial uses all the skills we've learned in the previous ones. You should know how to use WellRounded, how to lose absolute positioning, and what floats mean. We'll walk you through every step, but without those other tutorials under your belt it may not make any sense.

A Trick With Margins

We won't be getting to this until the end of the tutorial, but the sidebar layout we'll be showing turns on a particular interaction (or lack thereof) between margins and absolute positioning. Our main content is going to be 100% wide and flowing, but we will shove it over to the left away from the right edge by adding a big fat right margin to the document. Then we will place an absolutely positioned WellRounded rectangle in the margin. That may seem strange to you, if you are used to margins being unreachable terrain.

The Beginning

  1. Make a new empty document in DreamWeaver. Save it someplace.
  2. If you desire, set the document background color before proceeding.
  3. Since we will be placing round cornered rects inside other round cornered rects, give some thought to a color scheme. Or borrow ours.

The First Base

  1. Make a new WellRounded rect. You can use any settings you want, but be sure to use Fit To Content for the Height. You can ignore the width - it is unimportant. Be sure to make note of the foreground color you use for the rounded rect! You can use any class name or div names you desire, but if you want to keep in synch with these examples, name the div firstbase. We are naming our class low.
  2. Find the CSS for the div of the new rect. It should look like so:

    #firstbase {
    position: absolute;
    left: 64px;
    top: 64px;
    width: 300px;/* -- edit width here! -- */
    padding: 0;
    margin: 0;
    }
  3. Comment out the position, left, top settings. We comment things in CSS by surrounding them with /* and */. Note: do not include the 'edit width here' in your comment. It should now look like so:

    #firstbase {
    /*position: absolute;
    left: 64px;
    top: 64px; */
    width: 300px;/* -- edit width here! -- */
    padding: 0;
    margin: 0;
    }
  4. Change the width attribute from 300px to 100% (width: 100%; )
  5. Look at your rect in the design view. It should be at the top of the document, spanning the entire document. You can see ours here: embedded_01.html

Embedding - 1

  1. DreamWeaver has probably inserted the HTML for the round rect on just one or two lines. Let's sort that out. From the code view, add a few extra lines to right before and after the content, in the middle of the nested divs.
    lines of html
  2. From either the Code View or Design View in DreamWeaver select the first half of the content and open the dialog for a new WellRounded rect. Choose 'New Round Rect Class'
  3. From the Class Dialog, change the background color to the foreground color of the firstbase WellRounded rect. You did make note of it in step #4, right?
  4. You can use any other settings you want. We are giving our new class the name high. From DIV Dialog give this new WellRounded rect the id of embeddedone.
  5. Apply steps 5, 6, and 7 above to the emeddedone div. When you are finished, you should have something like this: embedded_02.html

Embedding - 2

  1. Like last time, you might consider organizing the HTML a bit, to make it more readable.
  2. Can you find the second half of the content, that you did not select last time? Find it and select it.
  3. Open WellRounded. This time, do not create a new class, but choose the class you made in the previous step (ours was named high)
  4. Give the DIV an id of embeddedtwo.
  5. Once again, apply steps 5, 6, and 7 above to the embeddedtwo div. When you are finished you should have something like this: embedded_03.html

Second Base

  1. Place your cursor outside and after the firstbase div and before the </body> end tag. If DreamWeaver is finicky, you may need to go to Code View to do this.
  2. Open WellRounded again. Choose the first class you made (low) and give the div the id secondbase.
  3. Follow the Embedding - 1 and Embedding - 2 instructions again, this time applying the new divs to the content of secondbase. Give the new divs the ids of embeddedthree and embeddedfour. When you are finished you should have something like this: embedded_04.html
  4. Change width: 100%; to width: 49%; for both embeddedthree and embeddedfour.
  5. Add float: right; to embeddedthree.
  6. The columns should now be floating next to another another, much like this: embedded_05.html
  7. You may notice a few things.
    • The column order has changed - embeddedthree is now on the right.Why didn't we use float: left; for the two columns? Because if put floats on both columns then they won't grow the size of the containing rounded rect (they are floating letting the other content run past them, except there is no other content). And when floating just one embedded div column, float:right seems to work better in all browsers.
    • DreamWeaver may not be rendering this at its very best.
    • Internet Explorer may be 'breaking' the rounded rects on the right side, near the bottom. This is a known IE thing, the most reliable workaround is to make the two columns the same vertical size (see next point).
  8. The main content portion of this tutorial is now complete. If you want to even the two columns to make them the same height, check out the Floating Columns and WellRounded Rectangles tutorial which has a very good solution for this. We've made a sample of that here, but it is not required to continue. For the short term solution, just make the content of the two columns be identical.

The Sidebar

Ok, now the fun part.

  1. If you set the document background you probably have a body entry in your CSS. Find it, and let's add a big fat right margin:
    #body {
    margin-right: 180px;
  2. Then, let make our sidebar. Add a new WellRounded rect. You can re-use the low class if you wish, or define a new one. In the DIV Dialog, give the DIV the id of sidebar and make the width be 150. You can choose to make this sidebar have an Absolute height, or be Size To Content - it's your choice.
  3. Almost there - find the DIV CSS for sidebar. Change left: 64px; to right: 20px; by using right, instead of left, we tell the browser to position this div 20 pixels from the right hand edge of the window.
  4. Optionally, change the top attribute to something like 20px.
  5. That's it, we are done! The sidebar DIV CSS should look something like this:
    #sidebar {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 150px;/* -- edit width here! -- */
    padding: 0;
    margin: 0;
    }
    You can see our final sample here: embedded_06.html

Experiment

  • This design, as it exists now, is pretty crowded. Consider adding some other margins to the document, as well as in between items. If you add space between the two vertical columns, try using percentage based margins and reducing the percentages of the column widths.
  • This same margin reserving technique can be used to add a left column. Try it yourself.