disappearing divs

Tom · Oct 29, 2005

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">
 </div>
<div style="position: absolute; left: 247px; top: 36px; width: 135px;
height: 111px; z-index: 2; visibility: visible" id="layer2">
 </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
| > || > ============
| > || >
| > || >
| > || >
| > |
| > |
| >
| >
| >

Murray · Oct 29, 2005

That is a div that happens to be a layer. Both of them.

Murray · Oct 29, 2005

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....

Tom · Oct 29, 2005

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">
 </div>
<p align="left"> 
</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">
| >  </div>
| > <div style="position: absolute; left: 247px; top: 36px; width: 135px;
| > height: 111px; z-index: 2; visibility: visible" id="layer2">
| >  </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
| > | > | > ============
| > | > | >
| > | > | >
| > | > | >
| > | >
| > | >
| > |
| > |
| >
| >
|
|

Murray · Oct 29, 2005

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.

Tom · Oct 30, 2005

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">
 </div>
<p> </td>
<td> </td>
<td> </td>
<td> </td>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 5;
background-color: #800080" id="layer5">
 </div>
<p> </td>
</tr>
<tr>
<td> </td>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 3;
background-color: #FFFF00" id="layer2">
 </div>
<p> </td>
<td> </td>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 4;
background-color: #FF00FF" id="layer4">
 </div>
<p> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 3;
background-color: #0000FF" id="layer3">
 </div>
<p> </td>
<td> </td>
<td> </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">
| >  </div>
| > <p align="left"> 
| > </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
|
|

Murray · Oct 30, 2005

It can be done - nothing prevents you. But it will never work reliably
cross-platform/browser.

Tom · Oct 30, 2005

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">
| >  </div>
| > <p> </td>
| > <td> </td>
| > <td> </td>
| > <td> </td>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 5;
| > background-color: #800080" id="layer5">
| >  </div>
| > <p> </td>
| > </tr>
| > <tr>
| > <td> </td>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 3;
| > background-color: #FFFF00" id="layer2">
| >  </div>
| > <p> </td>
| > <td> </td>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 4;
| > background-color: #FF00FF" id="layer4">
| >  </div>
| > <p> </td>
| > <td> </td>
| > </tr>
| > <tr>
| > <td> </td>
| > <td> </td>
| > <td>
| > <div style="position: absolute; width: 100px; height: 100px; z-index: 3;
| > background-color: #0000FF" id="layer3">
| >  </div>
| > <p> </td>
| > <td> </td>
| > <td> </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">
| > | >  </div>
| > | > <p align="left"> 
| > | > </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
| > |
| > |
| >
| >
|
|

Cell Border will not Hide	4	Mar 30, 2006
Creating a frameless site - how do I position my <div>s	104	Jan 27, 2006
Can somebody help with this javascript please ?	5	Jan 27, 2006
DIV disappears with Relative Positioning	8	Sep 9, 2005
No ID editiable region	2	Apr 7, 2006
How to hide/show a div?	4	Jan 9, 2005
CSS divs / layers z-index	2	Feb 28, 2010
Blue screen in Yahoo Canasta	1	Sep 30, 2009

disappearing divs

Tom

Murray

Murray

Tom

Murray

Tom

Murray

Tom

Ask a Question

Similar Threads