Forgot about the Layers...
We will start with "Layers are BAD"
and then move on to an explanation of layers so you will better understand.
============================
Layers are bad.
Layers are bad because they are absolutely positioned. As such, they have
several "undesirable" characteristics (particularly for those who do not
understand HTML and CSS/positioning):
1. A layer floats over (in the z-direction, i.e., vertically out of the
page) other page content. Thus it can mask mouse events on that other page
content - this is what is responsible for problem with the non-functional
link underneath one.
2. Because a layer floats over other page content, it cannot interact with
that other page content - thus when the text content in a layer is resized
in the browser, causing the layer to expand vertically, the text will start
to overlap the other page content, leading to an unusable mess in the
browser.
3. Because a layer is absolutely positioned, it stays fixed on the screen
while other content which may be within a percent sized container is free to
move around. Unless you are familiar enough with CSS to know how to
accommodate this flexibility, you will probably post a question here called
"Why are my layers moving?". Then everyone can post replies telling you that
layers don't move....
4. Because a layer is absolutely positioned, if it is contained within a
flexible container, if the container flexes, the layer will flex with it,
perhaps causing images within that layer to overlap other underlying page
content.
Layers are very seductive because they are easy to place on the page.
This ease of placement extracts a VERY heavy price in terms of page
usability and functionality. It's best to not use them at all until you
understand enough HTML and CSS to manage the page without layers. Most
experienced developers
use absolute positioned elements quite sparingly if at all..
==========================
Layers
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the page so that
it can no longer influence the size or position of any other pa-ge element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from the position of
its closest PARENT *positioned* element - in the absence of any explicitly
positioned parent, this will default to the <body> tag, which is always
positioned at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the layer's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within a
table or another A/P element, of course). Furthermore, the space in
which this element would have appeared were it not positioned is not
preserved on the screen. In other words, absolutely positioned elements
don't take up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from the flow of the code on the page, so it will use the
spot where it would have appeared based on its position in the code as its
zero point reference. If you then supply top, right, bottom, or left
positions
to the style for this element, those values will be used as offsets from
its zero point.
This means that it DOES matter where in the code the relatively positioned
element appears (, as it will be positioned in that location (factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this element would have appeared is preserved
in the display, and can therefore affect the placement of succeeding
elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
-------------------
As with relative position, static positions also "go with the flow". An
element with a static position cannot have values for offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.
Position:fixed
------------------
A page element with this style will not scroll as the page content scrolls.
Support for this in elements other than page backgrounds is quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise,
a) it will always begin on a new line on the screen, and
b) it will always force content to a new line below it, and
c) it will always take up the entire width of its container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.
===============================
Tom
| The body color is what you will see to the right and left of the
| container...
|
| Using the CSS example I gave...
|
| <style type="text/css">
| <!--
| body {
| text-align:center;
| background: #2293FF;
| }
| #wrapper {
| text-align:left;
| width:740px;
| margin:0 auto;
| position:relative;
| }
| -->
| </style>
|
| Change the RGB numbers of #2293FF to suit your needs
| (If you don't want the center to be that too!)
| Then add a background to the container using another RGB color
| (Adjusting to your needs).
| Like...
|
| <style type="text/css">
| <!--
| body {
| text-align:center;
| background: #2293FF;
| }
| #wrapper {
| text-align:left;
| width:740px;
| margin:0 auto;
| position:relative;
| background: #2222FF;
| }
| -->
| </style>
|
| Hope this helps some
|
| Tom
|
| || Two more questions and I will leave all alone for the rest of the day!!
| How
|| do I put color to the left and right of the text that I just centered and
| how
|| do I spruce up my Nav bar to get rid of the blue text. Tom thank you so
|| much!! This is such a great resource.
||
|| One more. What would you really use layers for other than photos?
||
|| "larman" wrote:
||
|| > I am building a webpage where I decided to put all text and images
| within a
|| > layer. I am creating a webpage very similiar to caffezingaro.com. I am
| pretty
|| > new at this and truly trying to learn code instead of just building
from
| the
|| > split screen. My idea is to isolate the paragraph and pics in the layer
| and
|| > center everything for ease of reading on all browsers and I have
| centered the
|| > header and top banner pic. The <p> color is also different then the
page
|| > color which again is similiar to the zingaro page. Any help would be
| greatly
|| > appreciated. I am learning this pretty quickly but my only drawback has
| been
|| > the whole lining up process. Thanks all.
|| >
|| > Larry
|
|
