Comparing Layout Options:
Tables vs. Layers vs. CSS
How come I can center my design when I use tables in Dreamweaver, but I can't center Layers?
Create a Centered CSS Layout |
When you design a Web page in Dreamweaver you have many options for controlling the placement of images, text, and other elements on your pages.
These days the most recommended approach is to use CSS (you'll find links to tutorials on CSS on the right side of this page).
But long before CSS became an option on the Web, the most popular option was to create a Table in HTML, use the cells as containers for text and images, and then merge and split cells to control positioning. When you create a table, you have the added advantage that you can use the center alignment option to create a page design that stays centered when viewed on different monitor sizes.
Another popular design option of the past is Dreamweaver’s Layers feature. Layers are an attractive choice because they are so intuitive and easy to use to create even the most complex designs in Dreamweaver. You simply click the Layer icon in the Layout Insert panel, and then click and drag to create a layer anywhere on your page. Then you can insert images, text, or any other element into your layer.
Note: In Dreamweaver CS3, Adobe changed the name of this feature from Layers to AP Div (Absolutely Positioned Div tags).
Unfortunately, there are at least two reasons why Layers are problematic in Web designs that you want to display well in a wide range of Web browsers.First you can’t center Layers because they use Absolute positioning, which means they maintain their location in relation to the top and left border of the page no matter what size the browser window. And second, Layers are not adjustable, which means that if you include text in a Layer and your user adjusts the size of the text (many people increase the text size in their browsers for easier reading), the text can be cut off if it excedes the size of the Layer.
And if you combine Tables and Layers in Dreamweaver, the results can be especially problematic. Here’s an example to help you better understand.
If you click and drag to create a layer that is 500 pixels wide and you position it 100 pixels from the left side of the screen and 100 pixels from the top on an 1024 by 768 resolution monitor, that layer will always be 100 pixels from the left and top of the screen, no matter how big a monitor it’s viewed on. So if you look at it on a giant monitor, it will still be 100 pixels from the side and top, there will just be more room off to the right.
In contrast, if you create a 500 pixels-wide table and you center it, that table may be 150 pixels from the left side of the screen when viewed on a monitor with 800 by 600 resolution, but it will move to be even further from the left side of the screen when viewed on a monitor with 1024 by 768. In other words, it will adjust to always be centered even if that changes how far it is from the left side of the screen.
If you don’t appreciate the difference yet, let me warn you that things get really confusing when you combine tables and layers because although things may look fine when you create them on your monitor, as soon as they are viewed in a different resolution or a different size browser window, the table and layer won’t line up.
So it comes down to this. Your best option is to choose to use Tables or Layers to control your designs, and not to try to combine them. If you do combine them, the only way to ensure consistent positioning in you place a Layer inside a Table is to align your Table to the left side of the screen. Alternatively, you can place a table inside a layer. In that case, because the layer will stay in one place, the table inside the layer will also remain in the same location.
You should know that it is possible to create centered CSS layers, but that’s now how Dreamweaver creates layers when you use the Layer’s tool. It is possible to create centered layers in Dreamweaver, but it gets very complicated very fast and Dreamweaver does not offer much support for this option.
If you want to see how centering CSS layouts works, check out this tutorial on centering a design with CSS, then visit the sites listed below to learn more.
Want to learn more about CSS?
Visit our Dreamweaver Training Center.
