Dreamweaver 8 and later will put the layer styles in a
The reason this was done was only to make it easier to illustrate what happens.It, in no way, affects the result. You'd get exactly the same result if youedit the in-line style created by older versions of Dreamweaver.
The Problems with Layers
Overlapping text
Now, let's say someone with less than perfect vision views the page. Becausetheir eyesight isn't very good, they have the text size in their browser seta bit larger than you did when you designed the page. What does your perfectlayout look like now? It looks like this:
WOW again!!! That's clearly not what you had in mind when you so carefullylaid out the page. Look how the text overflows and overlaps. Why does thathappen? It's because your layers are positioned absolutely, from the top leftcorner of the browser. The second layer doesn't move down to allow space forthe first one. There is a small difference in the way Gecko browsers (Netscape6+, Mozilla and Firefox) handle this and the way Internet Explorer does it.Gecko browsers will render it as shown in the images above, where the textsimply overflows its container. Internet Explorer expands the "layers" tocontain the text, so that the borders will also overlap. In either case, theresult is the same. You wind up with overlapping text.
The other noteworthy point here is that absolutely positioned page content(layers) do not affect the layout of any other content. Thatmeans that you will encounter the same problem of things overlapping withcontent that is not in layers. If either one of the boxes above were a tableinstead of a layer, the content of the layer would still overlap it.
My Layers Move
This one jumps up to bite you when you use layers in conjunction with someother page layout methodology, like a flexible table, or a centered contentdesign. Consider this layout:
The top text section (with the blue border) is in a 300 pixel wide, centeredtable. The bottom text area (with the red border) is in a 300 pixel wide layer.The two line up nicely when the browser viewport is about 800 pixels wide.Now, see what happens when the browser window is about 1024 pixels wide:
Uh oh! Look at that. Our layer moved! Well, the truth is that they layerdid not move a single pixel. Layers use absolute positioningand it's EXACTLY where is was in the preceding screen shot.It's 232 pixels from the left edge of the browser viewport and 44 from thetop. Note that these two screen shots are scaled down to fit in this page.You'll have to trust me on this one.
Okay, so if the layer didn't move, what happened? The table moved.Because it is centered, when the browser viewport got wider the table had tomove to the right to stay centered. The layer, because it is positioned absolutely,did not move. This example used a centered, fixed width table. You would runinto exactly the same issue if you used a percentage width table because thecontents of that table would move to accommodate changes in the viewport width,while the layer remained rock solid, right where you put it.
How Do I Fix It?
So, how do you prevent such ugliness. If you're new to web design, or havea strong background in print design, you'll be asking how to prevent the userfrom re-sizing the text, or how to keep the browser window exactly the rightsize to maintain your layout. Those are the wrong questions.The user may need larger text to be able to read it. The factis, you cannot prevent the user from re-sizing the text. Neithercan you control, with any reliability, how wide the browser viewport is goingto be. The right question is how to you make the page accommodatethe changes in text and/or window size without destroying itself. One answeris to not use absolute positioning. Absolute positioning is just a small subsetof the positioning possibilities introduced by CSS2. Instead, use "static" positioningand control the position of page elements using their margin and padding properties.
Positioning with Margin and Padding
So, how would you go about that? It's easier than you think. Let's changethe CSS we extracted from the "layers" and make it look like this:
#Layer1, #Layer2 {border: 1px solid;width: 200px;}#Layer1 {border-color: red;margin-left: 100px;margin-top: 100px;}#Layer2 {border-color: blue;margin-left: 100px;margin-top: 10px;}What have we done here? We simply removed the "position: absolute" and "height:100px" assignments, changed all the top and left assignments to margin-topand margin-left, and changed the second layer's positioning from top: 210pxto margin-top 10px. Now, what does our "perfect" layout look like?With normal text size, it looks exactly the same:
So what happens now, when the user increases the text size? You get somethingmore like this:
See how the top, red bordered
now expands to contain the textand the second
moves down to allow the expansion without overlappingthe text. That was what we wanted. Let's look at one more thing while we'rehere. Notice how the text butts right up against the border? That doesn't lookgood. It needs just a little bit of white-space. You add space between thecontent and the border using the padding property. Let's add five pixels ofpadding to both
tags. To do this, we change the first style (forboth div's) to this:
#Layer1, #Layer2 {border: 1px solid;padding: 5px;width: 190px;}Note that we simply added the padding, but that we also changed the widthfrom 200 pixels to 190 pixels. That's because the width assignment appliesto the content area. Because we wanted our border to remain 200 pixels wide,and it has five pixels of padding on each side, we had to subtract that fromthe width. The result is a 200 pixel wide border that looks like this:
In this case, the content is not centered. It will always be 100 pixels fromthe left edge of the browser viewport. If you wanted multiple items to be centeredin the browser, but retain their positions relative to each other, you'd simplyuse a wrapper
with a fixed width, and center that wrapper.
Now we have a flexible layout that does exactly what we want. Well ... almost.
Accommodating Browser Bugs
There's one more thing we have to consider. As mentioned, width applies tothe content area. Padding and borders are added to that to determine the exactarea occupied by an element on a page ... except when a browser get's it wrong.The standards explain the boxmodel, which is what describes all these width, height, margin, paddingand border calculations. The problem is that there is an ancient browser thathasn't been updated in years except to address its many security holes andthis browser is still widely used. You guessed it: Internet Explorer. Do aGoogle search for "box model bug" and you'll get something in theneighborhood of 1,780,000 results that describe how IE gets it wrong and addressways to compensate for it.
The short description of the problem is that IE version 5.x uses the widthproperty to calculate the overall width and subtracts the padding and borderfrom that to determine the space available to the content. That's wrong. It'sjust the opposite of what it should do. The bug was fixed in IE version 6 aslong as the browser is rendering the page in standards compliance mode. Whenin quirks mode, IE6 still renders it wrong. IE5.x and IE6 in quirks mode renderthe above like this:
Since we used a small amount of padding, the difference is not obvious, buttrust me, the border here is only 190 pixels wide instead of 200 pixels wide.That small difference may not be worth addressing, but what if we were using20 pixels of padding. When you add 20 pixels padding and one pixel border foreach side, you have 42 pixels difference in the width. Now, your content onlyhas 158 pixels and that's significant. That's worth addressing. So how do weget IE to render the page correctly? Google has 1,780,000 answers. Here isone of them.
Compensating for IE's Box Model Bug
The first thing we do is ensure that IE6 renders the page in standards modeinstead of quirks mode. We do this by including a full DOCTYPE in the page.See the W3Cspecifications for the details, but for now, we'll use the HTML 4.01 TransitionalDOCTYPE:
That must be the very first thing sent to the browser. Itshould be the first lines in your page. If you have anything, includingcomments or blank lines, before the DOCTYPE, IE6 will jump into quirksmode. Now, with a correct DOCTYPE, IE6 will render the page correctly.Frankly, IE5.x is a dead issue. Most stats have it at nearly zero usage.However, if your audience still includes some IE5.x users and you wantto accomodate them, it's not too hard. There are manyways to do this. There are various CSS "hacks" thatwill allow you to filter styles, but one way that uncomplicates the stylesheet and segregates the IE specific code is called a conditional comment.You can read more aboutconditional comments on Microsoft's MSDN web site, but suffice it to saythat you can give IE5 it's own code like this:
We place this code in the
of the document
after theother styles or link to an external style sheet. That will provide thefix for IE5.x. All browsers other than Internet Explorer will see thisas a comment and ignore it. IE6 and newer will see that it only appliesto prior version 5 and ignore it. IE5 will see it and, instead of renderingthe
elementsas 190-10 pixels wide, render it as 200-10 pixels wide like the rest ofthe browsers on the planet.
We now have the final solution. We have a page that renders the same in differentbrowsers and that will allow users to re-size the text as needed to be ableto read it. Remember, site users are the reason that the web site exists. Ifthey cannot read the text, there's no reason to put it on the web.
Conclusion
This has been a brief introduction to positioning with Cascading Style Sheets(CSS). It doesn't begin to address all of the many features available in theCSS specification. The purpose was to identify a problem (absolute positioning)and suggest a solution. That doesn't mean that absolute positioning is theroad to ruin. There are times when absolute positioning is the only way toaccomplish something. The problem, like with everything else, is that you needto understand it and know how to use it to be able to use it effectively.
My hope is that this brief intro will prompt you to learn more by doing afew of the many tutorials available around the web and perhaps reading a bookor two.
Happy reading!
九乡新闻网
In the beginning, the Internet, and more specifically the world wideweb, was a way of exchanging information between universities and governmentagencies. The Hypertext Markup Language (HTML) was developed to accommodateexchanging documents between different computer systems where most existingdocument types would be incompatible with the different computer systems.