Collected by Elizabeth Janson Home Page |
|
I would like to know if there is a way to use CSS and the 'position:absolute;" command to place tables on pages, but still have them scalable, say if someone resized a browser.
Yes, just put it in <div class="positionedsomewhere" > OR even easier just add <table class="positionedsomewhere"...
And then (preferably in a linked CSS =) Positioning schemesIn CSS2, a box may be laid out according to three positioning schemes:
Note. CSS2's positioning schemes help
authors make their documents more accessible by allowing them to avoid mark-up
tricks (e.g., invisible images) used for layout effects.
Choosing a positioning scheme:'position' may have the properties 'static', as shown above where the normal flow of the text is maintained. Box offsets: 'top', 'right', 'bottom', 'left'An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties:top specifies how far a box's top content edge is offset below the top edge of the box's containing block. right specifies how far a box's right content edge is offset to the left of the right edge of the box's containing block. bottom specifies how far a box's bottom content edge is offset above the bottom of the box's containing block. left specifies how far a box's left content edge is offset to the right of the left edge of the box's containing block. Compact boxesA compact box behaves as follows:
The compact box is given a position in the margin as follows: it is outside (to the left or right) of the first line box of the block, but it affects the calculation of that line box's height. The 'vertical-align' property of the compact box determines the vertical position of the compact box relative to that line box. The horizontal position of the compact box is always in the margin of the block box. An element that cannot be formatted on one line cannot be placed in the margin of the following block. For example, a 'compact' element in HTML that contains a BR element will always be formatted as a block box (assuming the default style for BR, which inserts a newline). For placing multi-line texts in the margin, the 'float' property is often more appropriate. The following example illustrates a compact box. <STYLE type="text/css"> DT { display: compact; background-color:paleturquoise } DD { margin-left: 4em; background-color:mistyrose} <DL> <DT>Short <DD>Description goes here. <DT>Small <DD>Description goes here. </DL>
list-style: outside; background-color:paleturquoise
Relative and absolute positioning may be used to implement change bars, as shown in the following example. <P style="position: relative; margin-right: 20px; left: 50px;"> I used the red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS <SPAN style="position: absolute; top: auto; left: -2em; color: red; font: bolder 150%;">----</SPAN> word.</P> I used the red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS ---- word. |
Email CSS begins here |
|
This page is part of Elizabeth Janson's web site
http://www.oocities.org/elizatk/index.html
Tetbury residents in the Eighteenth Century my Australian Family History and Barrie, our Family Poet. |