AP Elements that vanish

Question

Hello, I'm new to this program and using CA4. When I put in ap Divs to lay my page out, they show up on the AP Elements box as Div1 which I then relabel inside the Elements box. When I then try to nest them they vanish in apparently random order. Its got to the point where sometimes they show and other times they dont. Why does this happen? I am not playing with the little eye at the top, that shows all the time. I'm finding it difficult to check that my divs are correctly nested and in order as they dont all show up which then means going back to the code, which looks OK but does not display properly.
I would appreciate and help which will point the way to my errors.

Answer 1

Whilst I can agree that ap elements are not layout tools, surely one uses ap divs to lay the page out and nest things inside each other. Given this, it would be nice to see them relate to each other in the AP Elements Box. As it is I put in an outline div then center it as folllows and the word outline dissapears off the AP Elements Box. This is my code from the css sheet.
@charset "utf-8";
/* CSS Document */
body {
    background-color: #000;
#outline {
    width:955px;
    height:766px;
    z-index:1;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
#toolbarDkTall {
    position:absolute;
    width:955px;
    height:174px;
    z-index:1;
    top: 15px;
#menubarDark {
    width:955px;
    height:40px;
    z-index:1;
    top: 16px;
    position: absolute;
#frontpage {
    position:absolute;
    width:955px;
    height:535px;
    z-index:2;
    top: 190px;
#footerDark{
    position:absolute;
    width:955px;
    height:56px;
    z-index:3;
    top: 726px;
#LogoL {
    position:absolute;
    width:477px;
    height:534px;
    z-index:1;
    background-color: #000;
    top: 0px;
#frontImageR {
    position:absolute;
    width:477px;
    height:534px;
    z-index:2;
    left: 477px;
    background-color: #000;
    top: 0px;
and from the html
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<div id="outline">
  <div id="toolbarDkTall">
    <img src="images/toolDkTall72.png" width="955" height="174" alt="dark background" />
    <div id="menubarDark">
      <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Visiting</a>
        <ul>
          <li><a href="html/locationMoorcroft.html">Moorcroft</a></li>
          <li><a href="html/locationBelleek.html">Belleek</a></li>
          <li><a href="html/locationWedgwood.html">Wedgwood</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">History</a>
        <ul>
          <li><a href="html/jamesHardmanPedigree.html">James Hardman</a></li>
          <li><a href="html/familyHistory.html">Walter Hardman</a></li>
        </ul>
      </li>
<li><a href="#" class="MenuBarItemSubmenu">Shopping Cart</a>
  <ul>
    <li><a href="html/addressForm.html">Address Form</a></li>
    <li><a href="html/address.html">Address</a></li>
    </ul>
</li>
      <li><a href="html/gallery.html">Browse China</a></li>
      <li><a href="html/postageCosts.html">Postage Costs</a></li>
    </ul>
  </div>
  <!--end of toolbarDkTall below-->
  </div>
  <div id="frontpage">
  <!--end of frontpage below-->
  <div id="frontImageR"><img src="images/StGeoDoultonUse.png" width="477" height="534" alt="picture of St George by Royal Doulton" /></div>
  <div id="LogoL"><img src="images/logoIndex.png" width="477" height="534" alt="logo and opening hours" /></div>
  </div>
  <div id="footerDark"><img src="images/footerDark.png" width="955" height="56" alt="Pats China Store, Fishermans Wharf, Port Adelaide, [phone]" /></div>
  <!--end of outline below-->
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
The outline is used to center the page and everything else is nested within it. It works well but I do wonder why it does not show up on the AP Elements box or inspector (whatever we call it).
Sue