DreamweaverFAQ.com
Search the site!Search DWfaq.com | Print This PagePrinter Friendly Page
Current: Default | Default: DWfaq Green


DreamweaverFAQ.com » Tutorials » Tables » Flexible Page Layout Using Tables


Making the Banner

Design goal: banner that stretches completely across the window at the top, with a logo at the left and a tag line at the right

If I put these two graphics in a table, and make the width of the table 100%, the banner will always fill the width of the window. I've designed the two graphics against a web-safe color, and made that color transparent. Most of the color in the banner won't come from a graphic, but by setting the background color of the table.

I start by making a 1-row, 2-column table:

   

I set the width of the table to 100%. Then, I add the two graphics:

Logo tagline

The height of the table is established by the tallest element in it--the logo graphic--so I don't need to specify anything for table height. And I don't care how wide the columns are, so I don't set any cell widths. In the tag line graphic, I have included enough pixels on the right and below the text to position it where I want it when I establish alignment for the table cell it's in. Here is the same graphic with no transparency:

tagline, with no transaparency

In many cases it's easier just to include extra pixels to get this kind of positioning. If I had cropped the graphic to include only the letters, I'd have to make a more complex table structure to position it where I want it.

When I set the cell's horizontal alignment to "right" and its vertical alignment to "bottom", the banner looks like:


Finally, I give the banner table the background color, eliminate its border, and set its cell pad and cell space to zero:

Next, we'll build the navbar.

::This page last modified 8/13/2013 at 09:37::

Copyright © 2001-2017 DreamweaverFAQ.com All Rights Reserved.
All brands, trademarks, tutorials, extensions, code, and articles are the property of their respective owners.
A production of Site Drive Inc.
Legal Notice | Privacy Policy | Disclaimer & Notice