On 7/10/06, Emily Ellis <[EMAIL PROTECTED]> wrote: > Hello Everyone, > > > I have used style sheets for a while for formatting text and that sort of > thing. I am now experimenting with using it for positioning. I'm not > getting how to do this without spending a lot of time in trial and > error—shifting a few pixels this way and that. Is it possible to design a > site on paper and then type in the positions and its there? Or is this > trial and error necessary? My question is about procedure. What process do I > use to integrate this into Web site development?
Hi, Emily, Perhaps one of the biggest challenges with CSS is not just how to position stuff, but also what techniques to use for positioning. There are three basic ways to position stuff -- using the "position" property, using the "float" property, or using neither (that is, letting content flow on its own).[1] I mention the last one because many times people forget that sometimes the browser positions stuff just fine on its own. :-) Most web sites use a combination of the three methods. Using the "position" property is best suited to pieces of content or graphics that are supposed to stand on its own, and nothing else should be impacted by its presence. Positioning something absolutely is typically reserved for small bits of navigation -- like a two- or three-line left navigation, or a branding icon in a page header -- or for drop-down menus.[2] Relative positioning is typically only used to identify how an absolutely positioned child should sit,[3] although it can also be used for special circumstances (bug fixes in IE, changing whether it should paint on top of other content, etc.). Absolute positioning is not a good idea for displaying long pieces of content, because that content will no longer impact any other content around it. It is "out of the flow". Since absolutely positioned content no longer acts like its part of the rest of the document, anything defined after it will suck up underneath it as if it doesn't exist. This could be a problem for things like page footers. Instead, when things need to move around but still take up space (such as the case of columns, left navigation, etc.), "float" is the preferred property.[4] Floated elements shift over to the left or right, but future content can always go underneath the float regardless of how long the float is, by clearing it.[5] This is good news for things like page footers, which can be set to always be below the floated content with the "clear" property. Multi-column layouts use float extensively. You can look at several examples of float-based layouts in the Wiki[6]. One of the big reasons I stress the importance of "normal" flow is that a lot of designs rely upon using width, padding and margin properties. These properties can move around a block of content, regardless of how it is otherwise positioned. Most layouts use a combination of floating and margins (especially negative margins) to get themselves together. If you are looking for a quick layout, the Wiki is probably the place to go. I'd also recommend pulling those designs apart, reading the CSS and spending some time looking at exactly what each margin/padding/float/width property is doing. I'm not about to say that it's easy, and it's probably not going to fall into place in one night, but to really get a sense of what's going on, it may be worthwhile to spend the time. HTH, Michael [1] http://www.w3.org/TR/CSS21/visuren.html#comparison [2] http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning [3] http://www.w3.org/TR/CSS21/visudet.html#containing-block-details, list item #4 [4] http://www.w3.org/TR/CSS21/visuren.html#floats [5] http://www.w3.org/TR/CSS21/visuren.html#propdef-clear [6] http://css-discuss.incutio.com/?page=FloatLayouts -- items marked with the note number 9 are all-float techniques. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
