centering

Alignment of text and images (with urls)
(short version)

You can use the "add an item"----"heading" area for centering and alignment of images.

The "headings" areas are 100% width of the page, unlike the text areas (width determined by content), so centering in the "headings" area will be "100% page-wise" and is easy with the addition of <<>center> and <<>/center> tags.

The code below

<<>center><<>img src="url of image"><<>/center>

produces:

The "page style" initially chosen when using the Webtv PageBuilder determines if the images or text in the "heading" area will be automatically aligned in the center or on the left side of the page.

Any time you use your "return" key, webtv adds one or more
<<>br> line breaks to your code and that will interfere with the placement and alignment of images, etc.

More information on using the "add an item" -- "heading" area for images and text:

http://community-1.webtv.net/Pwilliamandx/Usingheadingareafor/

And a shorter version of more alignment codes:

http://www.geocities.com/willxwill/alignment2.html

OR

Use tables to control the alignment
of text and images.

http://junior.apk.net/~jbarta/tutor/tables/index.html

(NOTE: Webtv has a screen width of approximately 544, but computer viewers have different screen widths, such as 640, 800, 1024, 1600 etc; using a table width of 800 or 1024 should center the contents of the added table for most computer viewers of your webpage.

1/17/2000: Using table width="100%" may or may not work for computer viewers of your page----some computer viewers have recently said it does not work when used on Webtv PageBuilder pages.)

Using:

<<>table width="800"> or <<>table width="100%">
<<>tr>
<<>td>
<<>center>
<<>img src="url of image"><<>br>text
<<>/center>
<<>/td>
<<>/tr>
<<>/table>

text

OR

<<>table width="800"> or <<>table width="100%">
<<>tr>
<<>td align="center">
<<>img src="url of image"><<>br>text
<<>/td>
<<>/tr>
<<>/table>

text

OR

<<>table width="800"> or <<>table width="100%">
<<>tr align="center">
<<>td><<>img src="url of image"><<>br>text<<>/td>
<<>td><<>img src="url of image"><<>br>text<<>/td>
<<>td><<>img src="url of image"><<>br>text<<>/td>
<<>/tr>
<<>/table>

text
text
text

OR

Here are some specific codes you can add to the
"add an item"---"text" areas for alignment of your images.

You can center or align any image or text you want,
on any "page style" you want,

IF you use its url in an image tag,
along with the opening and closing table codes below---the added table expands the webtv "add an item"---"text" area to 100% of the available page:

(NOTE: Webtv has a screen width of approximately 544, but computer viewers have different screen widths, such as 640, 800, 1024, 1600 etc; using a table width of 800 or 1024 should center the contents of the added table for most computer viewers of your webpage.

1/17/2000: Using table width="100%" may or may not work for computer viewers of your page----some computer viewers have recently said it does not.)

Add these table codes to any "add an item" -- "text" area:

<<>table width="800"> or <<>table width="100%">
<<>tr><<>td>

Type your text and codes here,
such as:

<<>center><<>img src="url of image"><<>/center>

<<>/td><<>/tr><<>/table>

Then using the standard alignment codes (inside the table tags) will "work" "page-wise" (using <<>html> and <<>/html> tags are not necessary):

<<>table width="800"> or <<>table width="100%">
<<>tr><<>td>

<<>center><<>img src="url of image"><<>/center>
or
<<>img src="url of image" align="right">
or
<<>img src="url of image" align="left">
or
<<>center>Text and/or images here<<>/center>
or
<<>p align="center">Text and/or images here<<>/p>
or
<<>p align="right">Text and/or images here<<>/p>
or
<<>p align="left">Text and/or images here<<>/p>

<<>/td><<>/tr><<>/table>

Demonstration below.

But if you add any image with webtv's method of
"add an item"--"picture"--"your scrapbook",
then you are at the mercy of webtv's placements.
See alignment chart

Alignment of text and images (with urls)
(Long version)

Each "add an item" -- "text" area is contained in a table made by webtv.
Webtv adds table codes to the overall source code automatically, at the beginning of every "text" area:
<<>table><<>tr><<>td>

and at the end of the "text" area:
<<>/td><<>/tr><<>/table>

The content you supply goes in between those two sets of codes.

The "Webtv table" is automatically aligned to the left of the page.

The "Webtv table" is not set to 100% of the page --- so the width of the table adjusts/expands according to the contents of the "text" area.

If the contents of the "text" area is less than 100% width of the webpage, then centering and alignment will be within the "Webtv table", not 100% "page-wise".

NOTE: Webtv has a screen width of approximately 544, but computer viewers have different screen widths, such as 640, 800, 1024, 1600 etc; using a table width of 800 or 1024 should center the contents of the added table for most computer viewers of your webpage.

1/17/2000: Using table width="100%" may or may not work for computer viewers of your page----some computer viewers have recently said it does not work when used on Webtv PageBuilder pages.

Demonstrations of the effects of these tables are below and I am bordering some text--table areas for demonstration purposes.

Some solutions to the problem follow.

When using the "add an item" -- "text" area, add a line tag

<<>hr width="800"> or <<>hr width="100%">

somewhere in the text area and that will expand the webtv-table to fill 100% of the page, and then centering will occur as expected, along with other designated alignments.

Demonstration 1 below.

Or use a transparent gif, in an image tag:

<<>img src="url of transparent gif" width="800" height="1">
or
<<>img src="url of transparent gif" width="100%" height="1">

which will produce an "invisible" image the entire width of the page, and then centering will occur as expected, along with other designated alignments.

OR

If you don't want lines on your page, add a table code of your own at the beginning of every text area ( and your table will be "nested" inside the table codes webtv will automatically add ).

Add these table codes to any "add an item" -- "text" area:

<<>table width="800"> or <<>table width="100%">
<<>tr><<>td>

Type your text and codes here,
such as:

<<>center><<>img src="url of image"><<>/center>

<<>/td><<>/tr><<>/table>

Then the standard alignment codes (used inside the table tags) will "work" "page-wise" (using <<>html> and <<>/html> tags are not necessary):

<<>table width="800"> or <<>table width="100%">
<<>tr><<>td>

<<>center><<>img src="url of image"><<>/center>
or
<<>img src="url of image" align="right">
or
<<>img src="url of image" align="left">
or
<<>center>Text and/or images here<<>/center>
or
<<>p align="center">Text and/or images here<<>/p>
or
<<>p align="right">Text and/or images here<<>/p>
or
<<>p align="left">Text and/or images here<<>/p>

<<>/td><<>/tr><<>/table>

( Demonstration below. )

OR

Another way to align images (with urls) is to add the codes into the "add an item" -- "headings" area -- that area is always 100% of the page, so centering tags will produce the desired result, such as

<<>center><<>img src="url"><<>/center>
or
<<>p align="center"><<>img src="url"><<>/p>
and
<<>img src="url" align="right">
or
<<>img src="url" align="left">

Demonstration 3 below.

The "page style" initially chosen when using the Webtv PageBuilder determines if the images or text in the "heading" area will be automatically aligned in the center or on the left side of the page.

Any time you use your "return" key, webtv adds one or more
<<>br> line breaks to your code and that will interfere with the placement and alignment of images, etc.

More information on using the
"add an item" -- "heading" area
for images and text is here.

OR

Use <<>/table> at the beginning of any "add an item" -- "text" area, and then the alignment codes will work as expected. This method may cause computer viewers of your page problems, and it will produce "errors" and "warnings" when the page is "run" through a validator. Sample Validator results page

Demonstration 4 below

Aligning images (without URLs)
added directly from the Scrapbook

Aligning images
in the "add an item"--"heading" area

More Webtv PageBuilder Help

New Text Area
Demonstration 1

Webtv uses tables
for the text, lists, and links areas.
If the content of the table does not
extend 100% across the page,
then you won't be able to center
images, text, etc as you expect.
(centering everything)

New Text Area
Demonstration 1--Line tag solution

Webtv uses tables
for the text, lists, and links areas.
If the content of the table does not
extend 100% across the page,
then you won't be able to center
images, text, etc as you expect.
(centering everything)

But since I added a line tag
at the top of this
"add an item" -- "text" area
<<>hr width=800>,
the webtv-table has been expanded
and centering is as expected.

Text to be aligned to the left here
Text to be aligned to the left here

Text to be aligned to the right here
Text to be aligned to the right here

Demonstration 1 (Line tag solution) code:
The entire code for the above (without most of the text included) looks like this in the editing area of the "add an item" -- "text" area:

<<>hr width="800">
<<>center>
Text to be centered here
Text to be centered here
<<>/center>
Text to be aligned to the left here
Text to be aligned to the left here
<<>p align="right">
Text to be aligned to the right here
Text to be aligned to the right here
<<>/p>

Other solutions

New Text Area
Demonstration 2

Using
<<>center>
<<>img src="url">
<<>/center>

but the image
is not centered
"page-wise".

Using
<<>img src="url" align="right">

but the image
is not aligned
to the right side
of the page.

New Text Area
Demonstration 2--Table solution

Using:
<<>table width="800"><<>tr><<>td>
at the beginning of the
"add an item"--"text" area ,

then adding the alignment and image tags,

then adding
<<>/td><<>/tr><<>/table>
at the end of the
"add an item" -- "text" area.

With the table codes above, using
<<>center><<>img src="url"><<>/center>

the image is now centered
on the page

With the table codes above, using:
<<>img src="url" align="right">

the photo
is now aligned
to the right side
of the page.

Demonstration 2 (Table solution) code:
The entire code for the above (without text included) looks like this in the editing area of the "add an item" -- "text" area:

<<>table width="800"><<>tr><<>td>
<<>center><<>img src="url of image"><<>/center>
<<>br><<>br><<>br>
<<>img src="url of image" align="right">
<<>center>Text to be centered<<>/center>
<<>/td><<>/tr><<>/table>

NOTE: Webtv will automatically add table codes surrounding your table codes above, when the page is published. When the "published" page's entire source code is viewed at a validator, it will look like this:

<<>table><<>tr><<>td> (code automatically added by webtv)

<<>table width="800"><<>tr><<>td>
<<>center><<>img src="url of image"><<>/center>
<<>br><<>br><<>br>
<<>img src="url of image" align="right">
<<>center>Text to be centered<<>/center>
<<>/td><<>/tr><<>/table>

<<>/td><<>/tr><<>/table> (code automatically added by webtv)

This will not result in any "errors" or "warnings" when "run" through a validator since one set of table codes is "nested" inside another set.

Other solutions

Using the "add an item" -- "headings" area here.

The "headings" areas are always 100% of the page, unlike the text areas (width determined by content), so centering in the "headings" area will be "100% page-wise" and is easy with the addition of
<<>center> and <<>/center> tags.

The drawback to using the "headings" area for text is that the text above the image is the smallest choice given, so you'll need to use <<>font size="#"> and <<>/font> tags if you want smaller text. This is <<>font size="3">.

The "page style" initially chosen when using the Webtv PageBuilder determines if the images or text in the "heading" area will be automatically aligned in the center or on the left side of the page.

Any time you use your "return" key, webtv adds one or more
<<>br> line breaks to your code and that will interfere with the placement and alignment of images, etc.

More information on using the
"add an item" -- "heading" area
for images and text is here.

Other solutions

Aligning images (without URLs)
added directly from the Scrapbook

Aligning images
in the "add an item"--"heading" area

More Webtv PageBuilder Help

Top of page

Using the <<>/table> solution method below will result in "errors" and "warnings" when "running" the page through a validator.
Using <<>/table> and adding extra opening and closing html and body code tags may cause problems for computer viewers of your webpage.

New Text Area
Demonstration 4

Using centering tags,
the image is centered
but still in
"webtv's table"

Using align=right inside
the image tag, the image
is aligned to the right,
but still
in "webtv's table"

New Text Area
Demonstration 4---<<>/table> method

If you add
<<>/table>
tag at the beginning of
any "add an item" -- "text" area
to end the table webtv automatically starts,
alignment tags will work "page-wise".

Examples below are using centering tags and align=right,
so one image is centered "page-wise",
and the other is aligned to the right "page-wise".

NOTE: This method may cause computer viewers of your webpage problems

This is an example of what the entire source code will look like after publishing the page, when viewed with Transcribe:
http://transload.starblvd.net/ts.shtml:

<<>table><<>tr><<>td> (code automatically added by webtv)
<<>/table> (code you add)
Contents of "text" area (text or images) that you add
<<>/td><<>/tr><<>/table> (code automatically added by webtv)

Webtv will automatically add a set of closing table tags:
<<>/td><<>/tr><<>/table>
at the end of the text area you are using;
which means your webpage will contain two sets of closing table codes and only one set of opening table codes.

Using this <<>/table> solution method will result in "errors" and "warnings" when "running" the page through a validator.

Sample Validator results page

Demonstration 4 ( <<>/table> method ) code:
The entire code for the above (without text included) looks like this in the editing area of the "add an item" -- "text" area:

<<>/table>
<<>center><<>img src="url of image"><<>/center>
<<>br><<>br><<>br>
<<>img src="url of image" align="right">

Other solutions

Top of page



	Powered by WebTV	next page