disappearing divs

  • Thread starter Thread starter Guest
  • Start date Start date
Is this a DIV or Layer... FrontPage calls it Layers

<body>

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
visibility: hidden" id="layer1">
&nbsp;</div>
<div style="position: absolute; left: 247px; top: 36px; width: 135px;
height: 111px; z-index: 2; visibility: visible" id="layer2">
&nbsp;</div>

</body>

T
| I'm working with divs, not layers. I sent the code in a prior post.
|
| "Tom" wrote:
|
| > To clarify this a little more....
| >
| > To get the menu on the right go to View> Tool Bars> Task Pane (Opens
task
| > Pane on right) Use the getting started dropdown to select "Layers" You
| > should now see a list of all the layers on the page!
| >
| >
| >
| > Highlight the one you want to work on.
| >
| >
| >
| > Note if you click outside of the layer and it is a hidden one it will
| > disappear. To view it again just select it from the layers list.
| >
| > T
| > | > | Just read the end of this and if using FrontPage 2003 all you have to
do
| > is
| > | go to the menu on the right and highlight the "Layer" you wish to work
on.
| > | When you highlight it in the layer view it will be visible (Even if
the
| > | properties are hidden).
| > |
| > | I hope this makes since. If you click outside of the Layer (and it is
| > | hidden) it will not be shown.
| > |
| > | I hope I am not too far off base here..
| > |
| > | T
| > | | > || "Show initially" means that when I load the page in Design or Split
mode,
| > || both divs show, regardless of whether they are Block or None. As soon
as
| > I
| > || edit the page in any way, the None (hidden) div disappears and I
can't
| > | edit
| > || it any more without going into the code. I don't think I can explain
it
| > | any
| > || more simply than that. My guess is that it has to do with my FlipDiv
| > | function.
| > ||
| > ||
| > || "Murray" wrote:
| > ||
| > || > > 1. If display:none means not to display the div on the page, then
why
| > | does
| > || > > it
| > || > > show initially?
| > || >
| > || > It should never display.
| > || >
| > || > > 2. I changed the div to display:block and it still disappears
when I
| > || > > edited
| > || > > the page.
| > || >
| > || > It should not. What edits are you doing?
| > || >
| > || > --
| > || > Murray
| > || > ============
| > || >
| > || >
| > || >
| > |
| > |
| >
| >
| >
 
It's a layer. FP and Dreamweaver agree that to be a layer it must be
absolutely positioned. Where they disagree is that in Dreamweaver, ANYTHING
that is absolutely positioned would be a layer, e.g., an image, a paragraph,
a table, anything....
 
SOoooo If the Div is absolutely positioned "within" a table.......
It's still a Layer.... Like

<table cellpadding="0" cellspacing="0" width="250">
<tr>
<td height="60" align="center">
<div style="position: absolute; width: 100px; height: 100px; z-index: 1"
id="layer1">
&nbsp;</div>
<p align="left">&nbsp;
</td>
</tr>
</table>

Or does FrontPage call it something Else?

BTW: The table will always center on the page and the Layer is absolutely
positioned relative to the table.

T
| It's a layer. FP and Dreamweaver agree that to be a layer it must be
| absolutely positioned. Where they disagree is that in Dreamweaver,
ANYTHING
| that is absolutely positioned would be a layer, e.g., an image, a
paragraph,
| a table, anything....
|
| --
| Murray
| ============
|
| | > FrontPage "Layers" on a page look like >
| >
| > <body>
| >
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 1;
| > visibility: hidden" id="layer1">
| > &nbsp;</div>
| > <div style="position: absolute; left: 247px; top: 36px; width: 135px;
| > height: 111px; z-index: 2; visibility: visible" id="layer2">
| > &nbsp;</div>
| >
| > </body>
| >
| > Is that a layer or a div??????????
| >
| > T
| > | > | This is a good suggestion, which I just tested. For me, in FP 2003, a
| > div
| > | or a table or any page element with style of display:none is always
| > shown
| > on
| > | the design view page. Preview hides it as it should. There is
nothing,
| > | however, that I can do to make that element disappear from design
view,
| > | other than to set its visibility to hidden.
| > |
| > | Honestly, this is a bug. A display:none has to remove the element
from
| > | design view always.
| > |
| > | But I have no idea why it seems to display intermittantly for Brian.
It
| > | certainly should not.
| > |
| > | --
| > | Murray
| > | ============
| > |
| > | | > | > Just read the end of this and if using FrontPage 2003 all you have
to
| > do
| > | > is
| > | > go to the menu on the right and highlight the "Layer" you wish to
work
| > on.
| > | > When you highlight it in the layer view it will be visible (Even if
| > the
| > | > properties are hidden).
| > | >
| > | > I hope this makes since. If you click outside of the Layer (and it
is
| > | > hidden) it will not be shown.
| > | >
| > | > I hope I am not too far off base here..
| > | >
| > | > T
| > | > | > | > | "Show initially" means that when I load the page in Design or
Split
| > | > mode,
| > | > | both divs show, regardless of whether they are Block or None. As
| > soon
| > as
| > | > I
| > | > | edit the page in any way, the None (hidden) div disappears and I
| > can't
| > | > edit
| > | > | it any more without going into the code. I don't think I can
explain
| > it
| > | > any
| > | > | more simply than that. My guess is that it has to do with my
FlipDiv
| > | > function.
| > | > |
| > | > |
| > | > | "Murray" wrote:
| > | > |
| > | > | > > 1. If display:none means not to display the div on the page,
| > then
| > | > why
| > | > does
| > | > | > > it
| > | > | > > show initially?
| > | > | >
| > | > | > It should never display.
| > | > | >
| > | > | > > 2. I changed the div to display:block and it still disappears
| > when
| > I
| > | > | > > edited
| > | > | > > the page.
| > | > | >
| > | > | > It should not. What edits are you doing?
| > | > | >
| > | > | > --
| > | > | > Murray
| > | > | > ============
| > | > | >
| > | > | >
| > | > | >
| > | >
| > | >
| > |
| > |
| >
| >
|
|
 
Yes - and it's one that will get you into trouble when you put it into a
table, too.
BTW: The table will always center on the page and the Layer is absolutely
positioned relative to the table.
Click to expand...

No, it's not. Absolute positioning is based on the positioning of the
closest positioned ancestor. That is not a table. In the absence of any
explicitly positioned ancestor, the body tag is used. That's why you most
often see layers positioned relative to the upper left-hand corner of the
viewport, but consider this -

<body style="text-align:center;">
<div id="wrapper" style="width:200px; margin:20px auto;position:relative">
<div id="Layer1"
style="position:absolute;width:200px;background-color:blue;top:100px;
left:10px;">
Check out where this falls when you change the width of your browser
viewport</div>
</div>
</body>

You should never put absolutely positioned elements directly into a table.
Never.
 
So this will never work?

<body>
<div align="center">
<a name="a"></a>
<table border="1" width="98%">
<tr>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 3;
background-color: #00FF00" id="layer1">
&nbsp;</div>
<p>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 5;
background-color: #800080" id="layer5">
&nbsp;</div>
<p>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 3;
background-color: #FFFF00" id="layer2">
&nbsp;</div>
<p>&nbsp;</td>
<td>&nbsp;</td>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 4;
background-color: #FF00FF" id="layer4">
&nbsp;</div>
<p>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 3;
background-color: #0000FF" id="layer3">
&nbsp;</div>
<p>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</body>

Now try to make the view port smaller horz.. Wow, is that for real?
They are overlapping due to the Z order....

Maybe you shouldn't...... but it can be done!

T
| Yes - and it's one that will get you into trouble when you put it into a
| table, too.
|
| > BTW: The table will always center on the page and the Layer is
absolutely
| > positioned relative to the table.
|
| No, it's not. Absolute positioning is based on the positioning of the
| closest positioned ancestor. That is not a table. In the absence of any
| explicitly positioned ancestor, the body tag is used. That's why you most
| often see layers positioned relative to the upper left-hand corner of the
| viewport, but consider this -
|
| <body style="text-align:center;">
| <div id="wrapper" style="width:200px; margin:20px auto;position:relative">
| <div id="Layer1"
| style="position:absolute;width:200px;background-color:blue;top:100px;
| left:10px;">
| Check out where this falls when you change the width of your browser
| viewport</div>
| </div>
| </body>
|
| You should never put absolutely positioned elements directly into a table.
| Never.
|
| --
| Murray
| ============
|
| | > SOoooo If the Div is absolutely positioned "within" a table.......
| > It's still a Layer.... Like
| >
| > <table cellpadding="0" cellspacing="0" width="250">
| > <tr>
| > <td height="60" align="center">
| > <div style="position: absolute; width: 100px; height: 100px; z-index:
| > 1"
| > id="layer1">
| > &nbsp;</div>
| > <p align="left">&nbsp;
| > </td>
| > </tr>
| > </table>
| >
| > Or does FrontPage call it something Else?
| >
| > BTW: The table will always center on the page and the Layer is
absolutely
| > positioned relative to the table.
| >
| > T
|
|
 
It can be done - nothing prevents you. But it will never work reliably
cross-platform/browser.
 
OK EOS

T
| It can be done - nothing prevents you. But it will never work reliably
| cross-platform/browser.
|
| --
| Murray
| ============
|
| | > So this will never work?
| >
| > <body>
| > <div align="center">
| > <a name="a"></a>
| > <table border="1" width="98%">
| > <tr>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 3;
| > background-color: #00FF00" id="layer1">
| > &nbsp;</div>
| > <p>&nbsp;</td>
| > <td>&nbsp;</td>
| > <td>&nbsp;</td>
| > <td>&nbsp;</td>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 5;
| > background-color: #800080" id="layer5">
| > &nbsp;</div>
| > <p>&nbsp;</td>
| > </tr>
| > <tr>
| > <td>&nbsp;</td>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 3;
| > background-color: #FFFF00" id="layer2">
| > &nbsp;</div>
| > <p>&nbsp;</td>
| > <td>&nbsp;</td>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 4;
| > background-color: #FF00FF" id="layer4">
| > &nbsp;</div>
| > <p>&nbsp;</td>
| > <td>&nbsp;</td>
| > </tr>
| > <tr>
| > <td>&nbsp;</td>
| > <td>&nbsp;</td>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 3;
| > background-color: #0000FF" id="layer3">
| > &nbsp;</div>
| > <p>&nbsp;</td>
| > <td>&nbsp;</td>
| > <td>&nbsp;</td>
| > </tr>
| > </table>
| > </div>
| > </body>
| >
| > Now try to make the view port smaller horz.. Wow, is that for real?
| > They are overlapping due to the Z order....
| >
| > Maybe you shouldn't...... but it can be done!
| >
| > T
| > | > | Yes - and it's one that will get you into trouble when you put it into
a
| > | table, too.
| > |
| > | > BTW: The table will always center on the page and the Layer is
| > absolutely
| > | > positioned relative to the table.
| > |
| > | No, it's not. Absolute positioning is based on the positioning of the
| > | closest positioned ancestor. That is not a table. In the absence of
| > any
| > | explicitly positioned ancestor, the body tag is used. That's why you
| > most
| > | often see layers positioned relative to the upper left-hand corner of
| > the
| > | viewport, but consider this -
| > |
| > | <body style="text-align:center;">
| > | <div id="wrapper" style="width:200px; margin:20px
| > auto;position:relative">
| > | <div id="Layer1"
| > | style="position:absolute;width:200px;background-color:blue;top:100px;
| > | left:10px;">
| > | Check out where this falls when you change the width of your browser
| > | viewport</div>
| > | </div>
| > | </body>
| > |
| > | You should never put absolutely positioned elements directly into a
| > table.
| > | Never.
| > |
| > | --
| > | Murray
| > | ============
| > |
| > | | > | > SOoooo If the Div is absolutely positioned "within" a table.......
| > | > It's still a Layer.... Like
| > | >
| > | > <table cellpadding="0" cellspacing="0" width="250">
| > | > <tr>
| > | > <td height="60" align="center">
| > | > <div style="position: absolute; width: 100px; height: 100px;
| > z-index:
| > | > 1"
| > | > id="layer1">
| > | > &nbsp;</div>
| > | > <p align="left">&nbsp;
| > | > </td>
| > | > </tr>
| > | > </table>
| > | >
| > | > Or does FrontPage call it something Else?
| > | >
| > | > BTW: The table will always center on the page and the Layer is
| > absolutely
| > | > positioned relative to the table.
| > | >
| > | > T
| > |
| > |
| >
| >
|
|
 
Back
Top