Alignment of scrapbook images
(not using urls) |
(Webpage position---Item 1)
This page deals with the alignment of scrapbook images that are added directly to a webtv page (using "add an item" -- "picture" -- "scrapbook") and not using their urls.
The "page style" chosen determines the alignment of images added directly from the scrapbook when you use the method of "add an item" -- "picture" -- "scrapbook".
Some "page styles" align the images centered on the page; some alternate the alignment from the left side and right side of the page; and one, aligns all the images only on the left side.
Here is a list of "page style" alignments.
When adding a series of images directly to your webpage from the scrapbook (using "add an item" -- "picture" -- "scrapbook" ), if the "page style" is one that alternates the alignment of the images from left to right, webtv uses the codes below for the alignment:
<<>H3 align="right">title of image<<>/H3>
<<>img src="url" align="right">
and
<<>H3 align="left">title of image<<>/H3>
<<>img src="url" align="left">
Other ways to alter the alignments of the images from the scrapbook is to obtain their urls and then add the html codes to either an "add an item" -- "text" area or "heading" area:
The "add an item"--"text" area method
The "add an item"--"heading" area method
or
A second page for the "add an item"--"heading" area method
But when you use the methods above, take note that Webtv uses table codes for the "add an item" areas of "text", "lists" and "links". Demonstrations of the effects those tables have on centering text and images (with urls) are on this page centering.
Here is a sample of the html source code that webtv adds to the webpages.
If the "page style" is one that alternates the alignment of the images from left to right, the "title" will always appear directly above the image, but the text will not be centered, unless centering tags are used inside the "title" area of the photo. The text of the title area is aligned by webtv using:
<<>H3 align="right"> or <<>H3 align="left">.
If the "page style" is one that alternates the alignment of the images from left to right, when the image is not wide enough to fill the entire webpage, then the "caption" text will appear to the right or left of the image, to fill up the remaining width of the page. And if the "caption" text is long enough, it will wrap from the sides of the image, to underneath the image also.
If the image is wide enough to fill the entire webpage, then the "caption" text will appear at the bottom of the image.
|
Webpage position---Item 2
This is the title area text placement is
automatically determined
by webtv's placement of
the tag <<>H3 align=right>
Webpage position---Item 2--
Image is aligned to the right (even #)
This is the caption area
The image is not centered by webtv.
Webtv alternates the left and right positioning of images.
If you "add an item" other than "picture" between the images, the alternating placement of the images will be interrupted. (see Webpage position---Item 8 and Webpage position---Item 9 below).
Overall alignment is determined by the webpage position number:
odd numbered position images----aligned left
even numbered position images----aligned right
Webpage position---Item 3
This is the title area
Webpage position---Item 3
Image is aligned to the left (odd #)
This is the caption area.
Text in the caption area will not be centered unless centering tags are used inside the text entry area.
| Webpage position---Item 4 This is the title area Added a borderless table here
to have the title text look
better than in
the 1st demo |
Webpage position---Item 4
Image is aligned to the right (even #)
This is the caption area
yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
Webpage position---Item 5This is the title area
448x344 photo
Webpage position---Item 5
Image is aligned to the left (odd #)
This is the caption area -- The 448x344 image is still not wide enough to cover the entire width of the page (approx. 540 width).
Webpage position---Item 6 This is the title area
Webpage position---Item 6
Image is aligned to the right (even #)
This is the caption area
The 448x344 image is still not wide enough to cover the entire width of the page (approx. 540 width) so the image alternates positioning with the above images, and the "caption" text placement depends on the amount of text in the caption area --- see Item 5 above.
| Webpage position---Item 7 This is the title area Added a table with width=800
containing this area
and contents centered |
Webpage position---Item 7
Image is aligned to the left (odd #)
This is the caption area
The tag <<>br clear="all"> was added before the caption text to have the caption area text totally underneath the image
The 448x344 image is still not wide enough to cover the entire width of the page (approx. 540 width) so the image alternates positioning with the above images, and the "caption" text placement depends on the amount of text in the caption area --- see Item 5 above.
|
Webpage position---Item 8
"Add an item" -- "text"
The next photo below would normally appear on the right side of the page, but by
using "add an item", choose "text" here instead of adding another photo,
the next photo below will not be on the right side, but will be on the left side instead. |
|
| Webpage position---Item 9 This is the title area |
Webpage position---Item 9
Image is aligned to the left (odd #)
This is the caption area.
And if an "add an item"--"text" area (item 10) is used below this, then the 11th item photo will appear on the left side also.
|
