CSS Absolute Positioning and Relative Positioning
Layering Text and Images
|
Cascading Stylesheets Tutorial #10 CSS Absolute Positioning and Relative Positioning Layering Text and Images |
|
Handy
Tip:Overlapping
text or images with CSS is great. The advantage being, your eliminating
those bulky graphics and faster loading pages.
Cascading Stylesheets Tutorial # 10 Absolute Positioning, Relative PositioningAbsolute PositionExample code ....<STYLE TYPE="text/css"> <!-- P { position: absolute; left: 50pt; Top: 30pt } --> </STYLE> The example code above tells the browser to position the paragraph exactly 50 points from the left edge of the browser window and exactly 30 points down from the top. As the left and top edges have only been specified , the text will flow normally to the right edge and down the page. All the normal length units, points, pixels, etc, apply and you can position text, paragraphs, images, movies, etc. An element positioned absolutely is positioned independent of any other object on the page. Relative PositioningExample code ....<STYLE TYPE="text/css"> <!-- B { position: relative; left: 60pt; top: 30pt } --> </STYLE> Relative positioning means an element is relative to its natural position in the document's flow. When you use relative positioning, an element is positioned relative to where it would regularly be. Controlling Positioned Elements.Example code ....<STYLE TYPE="text/css"> <!-- DIV { position: absolute; left: 200pt; top: 40pt; width: 150pt } --> </STYLE> ( The following width and height values only work on absolutly positioned elements.) When controlling where the upper-left corner of an element is positioned, you can also control the width and height of the element. Using the width property, you can control how far the text flows. When the browser sees this rule, it will position the text as expected, but it will also limit the maximum horizontal size of the paragraph to 150 points. You can use any length unit and percentage values, which refer to the parent element's width. You can resize a graphic by setting width & height. The height attribute works just like width, only in the vertical direction: Example code .... DIV { position: absolute; left: 200px; top: 40px; height: 150px } overflow ........ (Supported by Netscape later versions) Example code .... <STYLE TYPE="text/css"> <!-- blockquote { width: 250px; height: 150px; overflow: scroll } --> </STYLE> If your content within the block-level tag is larger than the height or width that you set for it, you can control how you want it to look by using the overflow property. This works on block-level elements, whether or not they are positioned. Values you can choose are; visible - all content will be displayed, even if it goes outside the declared boundaries of the box. hidden - the browser won't display part of the content that is over the boundries. auto - the browser will display a scrollbar if needed, so the viewer can see the rest of the content. scroll - the browser will always display a scrollbar, even if it's not required. Here's an example applied to this paragraph below. If your content within the block-level tag is bigger than the height and/or width you've defined for it, you can decide how you want it to display by using the overflow property. This works on block-level elements, whether or not they are positioned.
|
Custom Search
|