Floating Page - HTML

The floating page layout has become quite popular and is used in pages of all kinds, from corporate sites to personal Web logs. The effect is fairly easy to create using a few nested tables, as shown in the following code.

A floating page can add a bit of simple design to your documents.

A floating page can add a bit of simple design to your documents.

Tip: Note the comments in the code delimiting the individual tables and content areas. It is a good practice to follow standard code formatting (indentation, liberal white space, and so on) and add sufficient comments to easily keep track of all your tables, how they are formatted, and what they accomplish.

If you want more of a drop shadow effect, you can play with the borders of the floating page, setting two adjacent borders to a nonzero value, as shown in the following code:

This code will visually increase the width of the right and bottom borders, giving the page a more realistic, three-dimensional drop shadow effect.

Tip:As you read through this chapter, keep in mind that you can combine the techniques within the same document. For example, you can put a two-column layout on a floating page by nesting a two-column table in the content area of the floating page table. Then, within one of the columns, you can evenly space out a handful of graphics by nesting another table in the column. The possibilities are endless.

Table Layout versus CSS Layout
As you’ll see in Part II of this book, CSS provides plenty of controls for positioning elements in a document. Since CSS is “the wave of the future,” why not learn and use CSS instead of tables for page layout purposes?

  • Most user agents support tables, while CSS support is being slowly adopted.
  • Tales are more forgiving when the browser window size changes—morphing their content and wrapping to accommodate the changes accordingly. CSS positioning tends to be exact and fairly inflexible.
  • Tables are much easier to learn and manipulate than CSS rules. Of course, each of those arguments can be reversed:
  • CSS is pivotal to the future of Web documents and will be supported by most user agents. Using it now helps guarantee future compliance. (A lot of table attributes are being deprecated for CSS, for example.)
  • CSS is more exact than tables, allowing your document to be viewed as you intended, regardless of the browser window.
  • Keeping track of nested tables can be a real pain—CSS rules tend to be well organized, easily read, and easily changed.

In short, arguments can be made for both technologies and the debate can get very heated (try searching for “html table layout versus CSS layout” at www.google.com). My advice is to use whichever technology makes sense to you—use what you know or what presents your documents in the best light.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics