 |
|
|
|
One of the unique challenges of web design is the wide range
of monitor sizes and resolutions being used to view your
pages. Here is one method of simulating a graphical element
that resizes to fit the available window. |
|
|
|
|
|
Resize your browser
window!
Notice how the "graphic" expands or contracts to
fill the screen. |
|
|
|
|
|
If you're stuck in somebody else's frame,
click here
to bring this page to the top. |
|
|
|
|
|
What appears to be an expandable graphic is actually
made up of a table containing graphics and single-pixel
transparent GIFs. By taking advantage of the fact that
tables can be made to resize to fit the browser window,
and background colors and graphics can be assigned to
individual table cells, fluid page layouts can be achieved
that will remain consistent across a wide range of
monitors. |
|
|
|
|
|
Obviously, this technique is somewhat limited in that it
only works if you have straight lines in the
borders. You can do whatever you want in the corners, and you
can float graphics within the straight sections (like the oval at
the top), but the border itself must be made up of straight lines
and flat color. With some experimentation though, some interesting
effects can be achieved. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The top border is constructed of five rows with
various background attributes. There is a thin
horizontal slice of the "oval" graphic centered in each row. |
|
|
| |
|
|
 |
|
no background |
|
|
|
 |
|
|
|
|
|
 |
|
|
|
|
|
 |
|
|
|
|
|
 |
|
graphic
background |
|
|
|
|
|
|
The central area was composed by placing a transparent GIF
over a background texture. |
|
|
|
|
|
|
|
|
|
|
|
The grey texture is accomplished by placing a background graphic
in the table cell definition, like so:
<TD BACKGROUND="greypap1.jpg" BGCOLOR="#F0F0F0">
The BACKGROUND attribute is actually not supported by the
HTML 3.2 or 4.0 specs but both Netscape and Internet Explorer display
it correctly in their 4.x versions. The BGCOLOR attribute
is the fallback position for browsers that don't support background
graphics in table cells.
The texture used for this background graphic needs to have very fine
detail, otherwise you will be able to see where the tile
starts over.
If you are careful to use only "web safe" colors in the graphics
and the table cell backgrounds (I wasn't, here) this technique
should look seamless even on 256 color monitors. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
I've put together a couple of other pages demonstrating these
techniques. If you see anything obviously broken, I'd appreciate it
if you could drop me a line and describe the problem, the size
and resolution of your monitor, and the browser version you
are using. The more details the better! |
|
|
bruceq@artworksstudio.com |
|
|
|
|
|
|
|
|
|
|
Deco
Frame Style |
|
|
|
On this page I used table cell colors to create an expandable "frame"
that runs around the outside of the entire page. |
|
|
|
|
|
|
NetBiz
Page Mockup |
|
|
|
Here's another method of using a seamless graphic in a
table cell to simulate an expandable graphic across the top
of a page. |
|
|
|
|
|
|
|
Here's a few professional sites we've done (or are currently working on)
using similar techniques to achieve a fluid and flexible page design. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
