Web Page Help >>> Page Control

Control the placement of text and other items


Enables you to ...

  • keep the text off your side border
  • control the minimum width of the areas within the table
  • control the maximum width of all parts of your page (using side-border or not)

The ONLY disadvantage to using tables is - it slows down the loading of your page. To compensate for that - put SEVERAL identical tables on your page. Break up your page's contents into 3, 4 or 5 "parts" (depending on the length of your page). That will make the tables load MUCH quicker and your visitors won't notice much of a difference!!


For ALL these examples ....

while your're working on your page in a WYSIWYG, or other editor, if it makes it easier for you to check the layout in your browser view, make the TABLE BORDER=1 It will look like this 'boxes' here when you check the "page view"

[I left the table border=1 in these examples shown] .

Before you upload your page, change that to TABLE BORDER=0 and it will disappear and your visitors will never see it (unless they look at your document source coding.)

One note, SOME browsers will collapse table cells if there is nothing inside of them. So, to be sure that doesn't happen for your visitors, where you NEED to keep a cell open, either put in a non-breaking-space '& n b s p' (no spaces between those characters/letters!) or insert a clear pixel gif in the cell you want to keep open. Like in the cell that goes over your side-border image part of your background.

     

RIGHT click in the box below,
save the clear pixel gif inside,
to your computer
to use where you need it.

Idea #1 works for people who use the left side border background and is the simplest one to do!

BUT if your pages are at Geocities, see idea #2 or #3!

NOTE - in the examples shown here, plain numbers are the HTML standard to represent pixel width. A number followed by the % sign, means just that - a percent of the whole.


You will have to 'pretend' that the white area here that is outlined, is the WHOLE width and length of your page. Depending on your resolution, the text does stretch wider, or will be narrower - and will be wider or narrower for your visitors, depending on THEIR resolution ...
You put all of your text and graphics into a table that has a width of 70% - 90% (you have to experiment with the width of your side border to get the right percentage) of the window. And you need to have it "align right". The table itself would be 100% of the window height ... but for this example I haven't made it that long *g*.
          The coding you need to know is below this box ...

<DIV ALIGN=right><TABLE BORDER=0 WIDTH="80%" HEIGHT="100%">
<TR>
<TD>
start text here ... {from above}You put <B>all</B> of your text and graphics into a table ...
and add what you want, text, graphics, etc to your page. When you're done, you finish it off with:
</TD></TR></TABLE></DIV>
</BODY></HTML>

Idea # 2, another way ...

This is the "left section" <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%">
<TR><TD WIDTH="20%"> &nbsp;
</TD>
<--Coding above is the "left section" - if you're using a side-border, don't put text in here! But some browsers 'collapse' empty cells, so to be sure your cell stays OPEN to that size, put a non-breaking space in there, code shown above ( & n b s p ; ). OR, put a CLEAR PIXEL gif in there to hold it open to that size. Clear gifs can be REsized to be any size height=1 width=120, etc. If you don't have one, there is one above that you can save to your computer.

On the other hand, if you want some buttons to run down the side
(home, this page, that page, email, etc)
that IS where you'd put them, doing a <P> before each one,
or a <BR> after each one so they stay lined up!
<TD WIDTH="80%">
This is in the "right section" where ALL the content for the page goes, then end your page with:
</TD></TR></TABLE>
</BODY></HTML>

Idea # 3, yet another way ... This is a two-section table, used when you want a minimum
width that your page will display (will hold the minimum sizes, no matter what resolution your visitors are using, AND won't condense no matter 'how much' their viewing window is open).

  <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=600>
<TR>
<TD WIDTH="140"></TD>
This is the left side section, remember,
no text here if you're using a side border
but DO put in a non-breaking-space or a clear pixel gif sized to the size you want to 'keep open'

</TD>
<TD WIDTH="460">
Put all your "body text" here, which will appear in the right side section
</TD>
</TR>
</TABLE>
</BODY></HTML>

Hint - tables DO take longer to load on a page -- Break your page up into 2, 3, or 4 of these tables - the page will load a LOT faster !!

Idea # 4, and yet another way ... (I'm done after this one ... promise!)

If your site doesn't use a side-border background, but you want to your page to stay the same width, no matter WHAT your visitor's resolution is set at, this method works well. It will keep your page looking exactly as YOU see it, and as you want it to be seen by others. This method is used my most information sites - like Microsoft, Netscape, news places like ZD Net, most search engines, etc. If the "big guys" use it (because they don't want their pages looking crappy to any of the thousands of visitors, all using different monitors, resolutions, browser window sizes, etc) ... maybe it's worth considering for YOUR pages as well?

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="600" HEIGHT="100%">
You can vary the width of the entire table. Remember though, there is still a large amount of people using 13-14" monitors and are using 640X480 resolution (640 pixels is the maximum width that they see without scrolling sideways).
<TR><TD WIDTH="10%"> [ OR use pixels : WIDTH="50" ]
Makes the left section 10% of the total table size. Leave this area text-less. Looks like you have "indented" your text a bit. You can play with the %'s to suit your taste.
</TD>
<TD WIDTH="90%"> [ OR use pixels: WIDTH="550" ]
Put the entire "body" of your page in here. It will stay this same width no matter WHAT your visitor's resolution is set at. It keeps your page looking exactly as YOU see it, and as you want it to be seen by others. No wider, no narrower than what you want displayed.
</TD></TR></TABLE>
</BODY></HTML>

Remember, once you're all done with the page and ready to upload it, change the <TABLE BORDER=0> to Zero, and it will disappear! These step-by-step instructions will take only three [3] pages to print (you don't need the stuff below here ...), well worth the cost of paper!

Return to where you were ... or continue on your way ...


Web Page Help / HTML Help + Information © 1998 Roxy Flanagan
HTML Info Hints + Tips HTML tags Basics HTML tags Advanced HTML colors
Tables Page Control Resolution Browser Info Validating HTML
AOL graphics + browser problems Links to More Helpful Information

HTML + Web Page Help Webrings

Background © 1998 by Roxy M. Flanagan.

www.AutumnWeb.com SITEMAP


... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
Copyright © 1997- by Roxy M. Flanagan + licensors; All Rights Reserved.
Links to MORE free graphics sites, Roxy Recommended!
Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/
Web Site Copyright © 1997- by Roxanne M. Flanagan, Autumn Web www.autumnweb.com

Roxy Recommends:
Autumn Web
Web Development

Personal+Business
Custom Web Graphics