Robert Nagle wrote: > Hi, there, > I am getting started on a long overdue overhaul of a static content > site I've been maintaining for the last 7 years. The css is pretty > crufty (I don't think I've changed it in the last 3 or 4 years). > > Fortunately, the static html pages were made with reasonably clean > code, , so I should be able to use css to change the global look and > feel > > But I encountered a problem. > > I have div.columnA and divcolumnB which is my main layout. > > In div.columnB I have an img element inside. > > However, I'm not quite sure I want this div.columnB. img actually to > be located inside div.columnB. > > Maybe I want to put the image above both columnA and columnB. Maybe I > want to put the image inside columnA instead of columnB. > > Is there any positioning css you can do to jam the columnB image > inside of div.columnA. (Like setting a positioning value to > negative?) I'm calling this "negative positioning" for lack of a > better term. (Actually what is the phrase for what I am describing?) > > Also, are there big differences between how IE 8 and IE 7 handle these > negative positioning tricks? (I upgraded to IE 7 and have no way to > test IE 7 anymore). > > One thing I'm dealing with is that sometimes images are columnA; at > other times they are in columnB. I want to be more consistent. > > Thanks for your help. > >
Elements in the page normally flow in the order they appear. One way to to take an element out of the "normal flow," is to use position: absolute [1]; -- by specifying their exact position with respect to their parent element, as in top, right, bottom, left;. Also, an element can be taken out of the "normal flow" using a negative (minus)-margin positioning tactic. Either way, exercise due caution. Layouts in which elements are taken out of the normal flow tend to be brittle (easily broken, as for example, depending on user discretion to scale fonts). The lower IE's [2] usually need position: relative; set on the parent element when using position: absolute; And, sometimes, stacking context (z-index) [2] is involved. If the element is sometimes in columnA, and other times in columnB, you might consider using a unique body id [4] on each of those pages in order to target them with their respective CSS. [1] Positioning Schemes <http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme> On having layout [2] <http://www.satzansatz.de/cssd/onhavinglayout.html> [3] Stacking Context <http://www.w3.org/TR/CSS2/zindex.html> [4] <http://www.maxdesign.com.au/presentation/page-id/> ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
