|
You don't need a Crystal Ball |
![]() |
|
to Search for Files |
| SearchWin Home |
| Article Home |
| Web Forms |
| Borderless Windows |
| Cookies-Part One |
| Cookies-Part Two |
| About Span and Div. |
| Using CSS-Part 1 |
| Using CSS-Part 2 |
| Using CSS-Part 3 |
| About DOCTYPE |
| Tables With XML |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Cascading Style Sheets - More About Pages with Style In last month's column, I introduced CSS and reviewed the basic syntax. This month I am going to go into a little more detail and discuss some ways to use CSS. Positioning and Spacing In theory, CCS provides web authors fantastic control over the spacing and positioning of elements on a web page. The caveat, as always, is the browser. If you target IE5 and Netscape 6 (or equivalent) users, you can use a lot of CCS2's features. IF you want to accommodate earlier browsers, you need to be a lot more conservative. Generally, positioning should be done with block elements, such as <P> and <DIV>. With that in mind.... There are 4 types of position defined in CSS2: static, fixed, absolute and relative. Static - how pages are already laid out by a web browser. Fixed - position elements with respect to the top of the window, so that regardless of how the page is scrolled, the element remains fixed. Absolute - position with respect to the position of the parent element. Relative - positioning places an element with respect to where it would statically be positioned. All positions can specify 'top' and 'left'. If none is specified, the default value is Auto (i.e., where the browser normally places it). Top and Left accept values as: - a percentage ( % or relative to font size (em)* ) - a unit value ( points (pt), inches (in), centimeters (cm), pixels (px) ) - auto If an element is a block elements, replaced elements (elements like IMGs) and any element with a position of absolute or fixed, you can also specify height & width. Height & width accept values as: - a percentage ( % or relative to font size (em)* ) - a unit value ( points (pt), inches (in), centimeters (cm), pixels (px) ) - auto * em - relative to font size. em=1 means equal to font size, em=.5 means 1/2 the font size, em=1.5 means 150% of the font size. Elements that have a height & width can also include "overflow" to tell the browser how to handle content that does not fit in the defined space. Overflow accepts values of: - visible (Specifies that the width and or height of an element should be adjusted to accommodate the contents that don't fit into the original area of the element.) - hidden (Specifies that the contents should be 'clipped' to the height and width of the element.) - scroll (Specifies that scroll bars should always appear on the element, regardless of whether they are necessary.) - auto (Specifies that scroll bars should be drawn only when scrolling is necessary to accommodate the content that does not fit into the dimensions of the element.) - default value is visible. Now that elements can be laid anywhere on a page, what happens when they overlap? The z-index is used to tell the browser how to handle that. z-index accepts values of: integer value or "auto". The higher the integer, the closer to the front of the page. That's the theory. In practice, I find the use of position counter-intuitive and spend a fair amount of time fooling with it. I need to take my suggestion of learning the document object model more seriously! Time for a couple examples! 1) A paragraph with text having a drop shadow. The parent container will be the document body and we will position it at the very beginning of the document. Since we are positioning relative to the document body, we use a position type of absolute. This e.g. works in IE4+ & Netscape 4+. Our style sheet is: p.text2 { font-size: xx-large; font-weight: bold; position: absolute; left: 1px; top: 1px; z-index: 2 } p.shadow2 { font-size: xx-large; font-weight: bold; color: gray; position: absolute; left: 3px; top: 3px; z-index: 1 } The html to display it: <p class="text2">This is an example of a drop shadow</p> <p class="shadow2">This is an example of a drop shadow</p> It doesn't matter where in you html document you place this code, it displays starting at the first pixel of the web page. 2) Another drop shadow using relative positioning and relative sizing. We again define 2 "P" classes, but our shadows position will be relative. Rather than off set the shadow by pixels, it will be offset as a % of the font size. Because we are using relative positioning, both of these paragraphs must be contained in a common container and the shadow must be in the main text's container. This e.g. only works in CSS2 compliant browsers. The style sheet: p.text3 { font-size: xx-large; font-weight: bold; position: absolute; * we want this positioned based on it's parent container * z-index: 2; } p.shadow3 { font-size: xx-large; font-weight: bold; color: gray; position: relative; * position normal location - i.e., exactly where p.text3 is * left: .05em; * but off set by 2% of the font size * top: .05em; z-index: 1; } The html to display it: <p> <p class="text3">This is an example of a drop shadow * no p end tag here! * <p class="shadow3">This is an example of a drop shadow </p> </p> </p> This displays the drop shadow text where ever the first "p" would display on the page, so can be reused to display several drop shadow text paragraphs on a page. Spacing in CSS CSS allows us to specify margins and padding for containers. Most block level elements are described by a "box". The components making up a container's box are depicted below: (See http://www.w3.org/TR/REC-CSS1#formatting-model for the formal definition.)
|