<center><font color="#800000" size="5"><strong>Webtv Glitch -- JS Failure -- Reload Page</strong></font></center>
Using "add an item"---"heading" area
for alignment of images and text

The "page style" initially chosen when using the Webtv PageBuilder determines if the images or text in the "add an item" -- "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.




Use the codes below to override the automatic alignment when aligning images or text in the

"add an item" -- "heading" area.


For more information on why using regular alignment codes do not always seem to work in the "add an item" -- "text" areas, see: Centering Tests






Heading area alignment codes


(Do not use the "return" key when typing out multiple image tags; Webtv will automatically add <<>br> codes in between the tags and that will make the images appear on different lines.)






Using
<<>center>Text here<<>/center>
will align text in the center of the page.

Text here text here
More text more text





Using
<<>center><<>img src="url of image"><<>/center>
will align an image in the center of the page.






Using
<<>center>
Text above image here<<>br>
<<>img src="url of image"><<>br>
Text below image here
<<>/center>
will align the image and the text
in the center of the page.

Text here

More text here






Using <<>img src="url"> will have the image automatically aligned to the left of the page, and any text that follows will start near the bottom of the image and then wrap underneath the image.





Using <<>img src="url" align="left"> will have the image align to the left side of the page, and the text will start near the top of the image, flow to the right of the image, and then wrap underneath it.




Using <<>img src="url" align="right"> in the "add an item"--"heading" area will have the image align to the right side of the page, and the text will start near the top of the image, flow to the left of the image, and then wrap underneath it.




Using
<<>center><<>img src="url of image" hspace="30"><<>img src="url of image" hspace="30"><<>/center>
will align two images in the center of the page; the hspace provides space between the two images.






If you use the codes in this combination, you can have 3 images on the same line---provided the combined widths of the images do not exceed the width of the page:

Using
<<>center><<>img src="url" align="left"><<>img src="url" align="right"><<>img src="url"><<>/center>






More alignment codes:

Using <<>img src="url" align="top"> will have the image align to the left side of the page, and one line of the text will start near the top of the image, and then the text will wrap underneath it.




Using <<>img src="url" align="middle"> will have the image align to the left side of the page, and one line of the text will start at the middle of the image, and then the text will wrap underneath it.




Using <<>img src="url" align="bottom"> will have the image align to the left side of the page, and one line of the text will start near the bottom of the image, and then the text will wrap underneath it.




And try this with the align=middle attribute for multiple images on the same line:

Using
<<>center>
<<>img src="url" width="40" align="middle">
<<>img src="url" width="75" align="middle">
<<>img src="url" width="150" align="middle">
<<>img src="url" width="75" align="middle">
<<>img src="url" width="40" align="middle">
<<>/center>








If you want to have several images on the same line and you are not using a table, when you type your code into the "heading" area, with each image code starting on a new line using the "return" key, like this:

<<>center>
<<>img src="url of image" width=100 height=80>
<<>img src="url of image" width=100 height=80>
<<>img src="url of image" width=100 height=80>
<<>img src="url of image" width=100 height=80>
<<>/center>

The images will appear under each other, instead of on the same line because any time you use your "return" key, webtv adds one or more <<>br> line breaks to your code and that will interfere with placement and alignment of images, etc.

(The same thing applies when you make the images clickable with the <<>a href> codes -- see a quick example of that here .)







To prevent the above from happening, do not type any "returns" into your code areas---run the code together like all the rest of the examples below.






Using:

<<>center><<>img src="url of image" width=100 height=80 align=left><<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80 align=right><<>/center>









Using:

<<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80>







Using:

<<>center>
<<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80>
<<>P>
<<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80><<>img src="url of image" width=100 height=80>
<<>/center>











Using several blank space codes--- &nbsp; ---between each image code, you can create some space between the images

<<>center>
<<>img src="url of image" width=100 height=80>&nbsp;&nbsp;
<<>img src="url of image" width=100 height=80>&nbsp;&nbsp;
<<>img src="url of image" width=100 height=80>&nbsp;&nbsp;
<<>img src="url of image" width=100 height=80>&nbsp;&nbsp;
<<>P>
<<>img src="url of image" width=100 height=80>&nbsp;&nbsp;
<<>img src="url of image" width=100 height=80>&nbsp;&nbsp;
<<>img src="url of image" width=100 height=80>&nbsp;&nbsp;
<<>img src="url of image" width=100 height=80>&nbsp;&nbsp;
<<>/center>




      

      







Use the table codes below in either the

"add an item" -- "text" area
or
"add an item" -- "heading" area.

And for more information on uses of tables:
J. Barta Table Tutorial





<<>table width="100%" height="225" border="5" bgcolor="#000022"> (or you can use a background="url" instead of the bgcolor="#" or use neither; and adjust the height of the table accordingly)

<<>!-- first row of images -->
<<>tr align=center>

<<>td><<>img src="url of image" width=100 height=80><<>/td>
<<>td><<>img src="url of image" width=100 height=80><<>/td>
<<>td><<>img src="url of image" width=100 height=80><<>/td>
<<>td><<>img src="url of image" width=100 height=80><<>/td>

<<>/tr>

<<>!-- second row of images -->
<<>tr align=center>


<<>td><<>img src="url of image" width=100 height=80><<>/td>
<<>td><<>img src="url of image" width=100 height=80><<>/td>
<<>td><<>img src="url of image" width=100 height=80><<>/td>
<<>td><<>img src="url of image" width=100 height=80><<>/td>

<<>/tr>

<<>/table>













More Webtv PageBuilder Help


Top of page







Powered by MSN TV
next page