You can mix and match positioned and relative elements together in the same layout. So in this case, you could construct the outer image box as an inline element, and then position the orange banner absolutely within that image element. To get this effect, use Insert / Graphic Item to insert the image box inline, then click once on the image box so its handles show and choose the HTML Item tool from the toolbar and draw your orange box directly over the image. Make sure that you (initially) only begin and end the box drawing over the top of the image, so the HTML box becomes a positioned child of the image. Once you have finished drawing it, you can use the Inspector to change its dimensions without altering its position in the page hierarchy. By making the element too large for its parent, you can have it peek out of the right side of the box without losing the fact that it is nested into the image. Then when the page reflows, the two elements will move together.
I’m sure there are many ways to get the same result.
My method is using padding on the page and wrapper to make room for the orange bar to hang over the content
I have aded the banner image as a background-image in the html box and then did the same with the little shadow.png under the orange bar.
The orange bar floats right within the html item that is holding big image
Aha. I missed the little folded-corner effect. I’ve updated my original example to include that, using a different CSS trick to put it into place. The :after “pseudo-selector” in CSS lets you generate elements like this without any images or additional markup in the layout.
I’m sure there are many ways to get the same result.
My method is using padding on the page and wrapper to make room for the orange bar to hang over the content
I have aded the banner image as a background-image in the html box and then did the same with the little shadow.png under the orange bar.
The orange bar floats right within the html item that is holding big image
I prefer the CSS method as well - I left it out as it may add another layer of complexity, especially taking FW’s convoluted multi step process of adding CSS
You don’t apply them, you just create them and the browser applies them. You very specifically never click on something and apply the style to it in Freeway.
