|
TINY TABLE TIDBITS
Written by FLO |
|---|
|
| |
USING CSS IN TABLE ART
This is the way I prefer to do this, but there are other ways, too. Below in text boxes are codes to copy. The first set of tags goes in the head of your page:
This next set of codes goes in the body of the page. Each numbered tag (above in the head) requires its own <div id="1"> contents </div> numbered tag. The contents of each division can be a table or set of tables that all work together, a scope or set of scopes, images, etc.
IN THE HEAD: all measuring and placement is for
the UPPER LEFT corner of the item:
left: 10px; This means that the 1st item you're placing is to go 10 pixels in from the left side of the page.
top: 40px; This means that the 1st item also goes down 40 pixels from the top.
z-index: 0; - this is the first layer. It usually starts with zero. Each layer on top of this botton layer is numbered z-index: 1 - and so on. This is the 2nd layer and would appear on top/over part of item 1, if they overlap. (You can name your items anything, using numbers, letters, or names. Make each div name in the body agree with the item name in the head.)
IN THE BODY: the 1st item is identfied as <div id="1"> and the 2nd item is IDed as <div id="2"> and so on.
Suppose you have an image of a donkey. Put that image tag in <div id="1">donkey image</div> - Then make a tail with scopes, or gradtables. This will be item 2. <div id="2">tail scopes</div> - Then it's up to you to adjust those numbers so the tail goes on the rear end instead of on the nose!
CHALLENGE: How do we figure out the numbers to use to get the following?
Table #a - size 100x100; 10 pixels down from the top and centered.
Table #b - size 100x100; 20 pixels below #a and offset by 30 pixels from the left of #a. (These will overlap.)
DOING THE MATH:
Useable space for a MSNTV screen: 544 pixels wide by 372 pixels high.
Measure OVER from the LEFT (x axis) and DOWN from the TOP (y axis).
z-index represents the layer (you can stick stuff on top of or overlap other stuff.)
SCREEN CENTER from left: 544 divided by 2 equals 272.
FOR #a: left: ??px; - Subtract half the image width: 100 ÷ 2 = 50.
272 minus 50 pixels equals 222.
Code - left: 222px;
Code - top: 10px;
FOR #b: left: ??px; - 222 (#a from left) plus 30 (#b offset from left of #a) = 252.
top: ??px; - 10 (#a down from top) plus 20 below #a = 30.
Code - left: 252px;
Code - top: 30px;
Okay! Click on the example to see our challenge in action. The table backgrounds use the transparency attribute (60%) so you can see an indication of what we can do with colors by using CSS for placement and layering.
ALL-IN-ONE-TAG: We can also put all the CSS information into one tag that goes in the body, instead of splitting the info between head and body. These divisions do not need to be numbered. Here's an example:
Links to other pages that use CSS for placement and layering:
First of all, a very funny CSS tutorial:
Glue a Gnu by Sally -
Two more from Sally, CSS exercises with testbeds:
http://www.simplysally.com/tut/TESTAB/CSS1.html
http://www.simplysally.com/tut/TESTAB/CSS1.html
Paulie -
made these two pages especially for us:
Paulie's Fish 1 uses only 3 divisions
and 3 different images.
Paulie's Fish 2 uses 6 divisions,
but only one image.
Candlelabra by Angelgirl -
Uses 5 divisions of the "All-in-one" tag type.
Kaleidoscopes by Flo -
This page uses 8 divisions,
but each division is made of
complicated tables containng scopes.
Big City by Flo - Uses 11 divisions
each a table or a scope.
Jumble Scopes by Flo - Uses 32 divisions of
the "All-in-one" tag type.
Counted
2901
|
| |
