<font color="#ff4500" size="5"><limittext value="RELOAD PAGE"></limitttext></font>

Alignment on a "centered" page


Why other alignments don't always "seem" to work

Some Webtv PageBuilder page styles automatically align contents
to the left of the page ; while others align contents to the center of the page .

The page styles that align contents to the center of the page
work like this:

Each "add an item" -- "text" area is contained in a table automatically made by Webtv.

  1. Webtv adds table codes to the overall source code automatically, at the beginning of every "text" area:

    <CENTER>(this tag is immediately after the initial body tag)

    <TABLE><TR><TD>
    <CENTER>

    and at the end of the "text" area:

    </CENTER>
    </TD></TR></TABLE>

    </CENTER>(the closing center tag is near the end of the overall page code)

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

  2. The "Webtv table" is automatically aligned to the center of the page by the first centering tag. The second centering tag aligns everything inside the table to the center.

  3. 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.



Various methods of alignment on an "automatically centered" page are demonstrated below; closing the automatically added Webtv table is essential to use in the "add an item"--"text" areas.




The additional codes of <br></center> and <center><br> used with the table tags are added to prevent validation errors.





Method 1 demo:

Automatically centered text here

Aligned left


Aligned right


Automatically centered text here




Codes used for Method 1 demo area above:

Codes automatically added by Webtv are in yellow;
user-added codes are in white.

<CENTER>(this tag is immediately after the initial body tag)
<TABLE><TR><TD>
<CENTER>


<!-- beginning of "ADD AN ITEM"--"TEXT" area -->

<br></center></td></tr></table>

Automatically centered text here

<div align="left">Aligned left</div>

<div align="right">Aligned right</div>

Automatically centered text here

<table><tr><td><center><br>

<!-- end of "ADD AN ITEM"--"TEXT" area -->

</CENTER>
</TD></TR></TABLE>
</CENTER>(the closing center tag is near the end of the overall page code)








Method 2 demo:


Automatically aligned left

Centered

Aligned right




Codes used for Method 2 demo area above:


Codes automatically added by Webtv are in yellow;
user-added codes are in white.

<CENTER>(this tag is immediately after the initial body tag)
<TABLE><TR><TD>
<CENTER>


<!-- beginning of "ADD AN ITEM"--"TEXT" area -->

<br></center></td></tr></table></center>

Automatically aligned left

<center>Centered</center>

<div align="right">Aligned right</div>

<center><table><tr><td><center><br>

<!-- end of "ADD AN ITEM"--"TEXT" area -->

</CENTER>
</TD></TR></TABLE>
</CENTER>(the closing center tag is near the end of the overall page code)







Method 3 demo with a user-added
table with width="100%":


This will be automatically
aligned to the left

This will be aligned to the right


And this will be centered


And this will be automatically
aligned left again.





Codes used for Method 3 demo area above:


Codes added automatically added by Webtv are in yellow;
user-added codes are in white.

<CENTER>(this tag is immediately after the initial body tag)
<TABLE>
<TR><TD>
<CENTER>


<!-- beginning of "ADD AN ITEM"--"TEXT" area -->
<br></center></td></tr></table>

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

This will be automatically
aligned to the left.

<div align="right">
This will be aligned to the right</div>

<div align="center">
And this will be centered</div>

And this will be automatically
aligned left again.

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

<table><tr><td><center><br>

<!-- end of "ADD AN ITEM"--"TEXT" area -->

</CENTER>
</TD></TR></TABLE>
</CENTER>(the closing center tag is near the end of the overall page code)






Method 4 demo with a user-added
table with width="80%" and border="1"
(the border is not necessary,
it's just for demonstration purposes).


This will be automatically
aligned to the left

This will be aligned to the right


And this will be centered


And this will be automatically
aligned left again.





Codes used for Method 4 demo area above:


Codes added automatically added by Webtv are in yellow;
user-added codes are in white.

<CENTER>(this tag is immediately after the initial body tag)
<TABLE>
<TR><TD>
<CENTER>


<!-- beginning of "ADD AN ITEM"--"TEXT" area -->
<br></center></td></tr></table>

<table width="80%" border="1"><tr><td>

This will be automatically
aligned to the left.

<div align="right">
This will be aligned to the right</div>

<div align="center">
And this will be centered</div>

And this will be automatically
aligned left again.

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

<table><tr><td><center><br>

<!-- end of "ADD AN ITEM"--"TEXT" area -->

</CENTER>
</TD></TR></TABLE>
</CENTER>(the closing center tag is near the end of the overall page code)






NOTE:
Using just <div align="left">
or
just <div align="right">
will work for Webtv viewers,
but not quite the same for computer viewers
of the Webtv PageBuilder webpage.

Demo and "puter screen capture below:



This text will be automatically
centered by Webtv.


Using
<div align="left">
This will be aligned to the
left of the page for Webtv viewers,
but the overall area will be centered
for computer viewers.
</div>



Using
<div align="right">
This will be aligned to the
right of the page for Webtv viewers,
but the overall area will be centered
for computer viewers.
</div>



'puter screen capture
of the area above




another webpage, similar topic





more codes


Top of page






Bad html'n demo:

The simplest form of changing alignments
is unfortunately "bad" html'n, since the Webtv
tables are not properly taken care of.

Various validation errors will occur if the codes
below are used; and if other sections are added
to the webpage after this area,
other alignment problems will also occur.


Regular "contents" will be aligned
automatically in the center of the page.

Aligned to the left


Aligned to the right








This area should be automatically centered,
in the middle of the page, but it is not,
due to the improper coding used
in the "Bad html'n" section above.







Codes used for the "Bad Html'n" demo above:


Codes added automatically added by Webtv are in yellow;
user-added codes are in white.

<CENTER>(this tag is immediately after the initial body tag)
<TABLE>
<TR><TD>
<CENTER>


<!-- beginning of "ADD AN ITEM"--"TEXT" area -->

</table>

Regular "contents" will be aligned in the centered of the page automatically.

<div align="left">Contents will be aligned to the left</div>

<div align="right">Contents will be aligned to the right</div>

<!-- end of "ADD AN ITEM"--"TEXT" area -->

</CENTER>
</TD></TR></TABLE>
</CENTER>(the closing center tag is near the end of the overall page code)



Top of page




Powered by WebTV