|
User Details |
message
|
|
David Stoltz
post date:
2010-09-13 14:00:22
|
Since there doesn't seem to be a way to add a "floating" absolute postioned DIV with flexiCSS, I do the main layout with flexiCSS, then use DW CS5 to add a floating div...
Problem is, the floating div doesn't appear in the correct spot in the browser. I get it to look correct in the DW design window, but all browsers seem to position it a little differently.
What is the right way to do this, so it's positioned correctly in all the latest browsers???
Thanks in advance.
|
|
|
David Stoltz
post date:
2010-09-13 14:18:26
|
Ok, perhaps this was caused by my page being centered. I changed it to left justified....it still was happening....so I edited the CSS (alignment of my floater) with Stylizer 5, and this seemed to fix it in all browsers.
Not sure why DW didn't work well positioning it?
Any ideas for best practice?
|
|
|
Alin Purcaru [Extend Studio]
post date:
2010-09-14 05:37:27
|
Hello David,
First of all we should clarify what "floating" and "absolute positioning" mean. A floating box (DIV) is an HTML element that is pushed to the left or right side (depending on the value of the float property) of its parent box. An absolute positioned box is one that will be rendered by the browser by using the position explicitly supplied by the user with the top, bottom, left, right CSS properties. Note that the absolute positioned DIV will have its offsets computed from the containing block, which is not necessarily the parent (most often it isn't). See http://www.w3.org/TR/CSS2/visuren.htm for more details.
Let us discuss some possible scenarios:
A. You want to add an absolute positioned DIV. If you have a Flexi CSS Page Layout in your page then any box with "position: absolute" will be rendered relative to the BODY element because the Layout does not establish any other containing blocks (see the link above for details). To supply the positioning you must fill the top/bottom and left/right (only one of each pair) CSS properties with values in px, em, % or other unit.
B. Sometimes the term "floating" is used to denote an element that will stay in the same position on the screen regardless of the page scroll. That element has fixed positioning ("position: fixed"). The difference from the absolute scenario is that your DIV will be rendered relative to the browser "screen" (viewport) and not to an HTML element, that means that if, for example, you have "position:fixed;top:0;right:0;" your box will always be in the top right corner of the browser, even when you scroll to the bottom of the page.
C. You want to float your DIV to the left of its parent, and allow content to flow to its right. In this case you use "float:left" (similar for "float: right"). If you want to go even further you can have your floated DIV, or any ordinary div that has no positioning defined, moved (offset-ed) from its natural position. To do this you use "position: relative" and supply the left, right, top or bottom CSS properties just like in the two scenarios above.
Keywords: float, position, absolute, fixed, relative, containing block, viewport.
If you do not fall in any of this scenarios, or if, for any reason, the instructions above do not work for you please follow-up at support at extendstudio dot com with more details, live links or file samples and we will be happy to help you.
Best Regards,
Alin Purcaru
|
|
|
David Stoltz
post date:
2010-09-14 07:02:03
|
Thanks for the great explanation - I get all that, my question was poorly formed...
The real problem, as I've come to realize, is the way Dreamweaver renders CSS in design view....it stinks.
I guess my question was if FlexiCSS allows you to add an absolute positioned div. Since I couldn't find a way, I was adding it manually.
Thanks!
|
|
|
Alin Purcaru [Extend Studio]
post date:
2010-09-14 07:36:28
|
Hello,
Flexi CSS Layouts, at least for now, does not add absolutely positioned boxes because when setting position: absolute/relative/fixed you establish a containing block and that may interact with other page content (a dynamic menu for example). Also by setting position: absolute on one of the boxes of the Flexi CSS Layout you would break the structure.
Regarding Dreamweaver: Yes, its design view, being based on IE4's layout engine, has some limitations especially when dealing with floats and positioning. We dealt with some of them so that the users of our product will have a better work experience, but not all issues were solvable.
Tip: When possible you should check your page in the Live View mode (in CS4 and CS5) to get a good rendering. Unlike the Design View, the Live View is based on the WebKit layout engine and is equivalent to a modern HTML browser (Safari or Chrome to be more accurate).
Best Regards,
Alin Purcaru
|
|
