T
Tom
Murray,
When it comes to "Layers" even the pigmies in Africa no how you feel!
Tom
| Tom:
|
| I see that I have helped you a bit with this! 8)
|
| --
| Murray
| --------------
| MVP FrontPage
|
|
| | > 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
| > |
| > |
| >
| >
|
|
When it comes to "Layers" even the pigmies in Africa no how you feel!
Tom
| Tom:
|
| I see that I have helped you a bit with this! 8)
|
| --
| Murray
| --------------
| MVP FrontPage
|
|
| | > 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
| > |
| > |
| >
| >
|
|