Combining APEX help with a frame-like TOC html help system (I used DITA)

Question

Problem:
The APEX page-oriented help system is bad at helping users find how to do something. I prefer to use a task-oriented help system for that, with a table of contents that users can browse around in. I like the DITA (Darwin Information Typing Architecture) system's topic based help with its ideas of tasks, concepts and references. But, I also like the context-based feel of a page-based help system and the way that the APEX help system automatically aggregates all of the item-based help on a page for you.
My Solution:
I'm no html genius, so this may be totally wrong, but what I did was to create a task oriented html user guide that also included a page based help TOC entry for each page. I then used iframes in the APEX help page to allow me to have a TOC always showing with links that controlled a content "pane," but still also display the automatically-generated item help for the page help is called from.
* Downloaded the DITA open toolkit (http://sourceforge.net/projects/dita-ot ), full package distribution and installed using the user guide (http://dita-ot.sourceforge.net/doc/ot-userguide131/xhtml/ )
* Downloaded and installed XMLmind XML editor free personal edition version ([http://www.xmlmind.com/xmleditor/download.shtml]). I'm not endorsing this thing, but it's free and it works great out of the box for editing DITA files.
* Created an html user guide by modifying the garage sample that's included with the DITA open toolkit and publishing to xhtml (I also published to pdf2, by the way, to provide a printable user guide for my users to download...one of the nice things about DITA). I set up my files so that they would all be in a topics subfolder, rather than the standard task, concept, and reference folders of the example. I did this so that I wouldn't have to worry about linking to a different folder from APEX (more on that later). I made a concept topic for each page of my application with the filename "Concept_About_page_X.dita," where X is the APEX page number.
* I run APEX using Oracle Application Server 10g, so I uploaded the files to a subdirectory of their own in the i/ folder on the OAS server. In my case this was APPSERVER_HOME/apache/apache/images/doc/MyAppHelp/
* The DITA toolkit generates html pages that look for a CSS called commonltr.css, located at the same level as the index.html file. I copied my APEX theme's CSS file to that same place and renamed it commonltr.css (in my case that was APPSERVER_HOME/apache/apache/images/themes/theme_13/theme_V3.css). Now, the proper thing to do would be to configure DITA to point at the real location of the theme's CSS, I guess. But I didn't want to figure out how to do that at this point.
* Now, in APEX, I deleted all of the page-level help text from my pages, since I had now duplicated this information into the DITA page concept topics. Instead, on each page I put
* On the help page (the page that you create when you're first setting up Help in APEX, mine is page 50), I added the following iframe tags in the header text of the page: \\      <iframe src="../../i/doc/gradevalhelp/index.html" width="40%" height="50%" align="left"></iframe><iframe name="contentwin" src="../../i/doc/gradevalhelp/topics/Concept_About_page_&REQUEST..html" width="60%" height="50%" align="right"></iframe><br> \\      Note the <br> at the end. I had to put that in to prevent the item level help from printing over my content iframe. Again, someone who knows something about html could probably tell you the right way to do that. The DITA toolkit generates a base tag (<base target="contentwin"/>) in the head section of the index.html file, to make the target of the TOC links be the content frame. Notice how I use it to map the links in the first iframe to the second iframe on the APEX help page, by naming the second frame "contentwin". Notice how the &REQUEST. Substitution string is used to present the proper DITA html file. I also tried setting it up to use a calculated hidden item that looks up the page alias for the requesting page; this had the advantage of allowing me to name my DITA files using page alias instead of page number, but it was too slow.

Answer 1

Look at all the apdiv's you have.  Those are absolutely positioned layers.  I'm assuming by your post that you are very new to Dreamweaver and HTML and CSS.  I would highly recommend not using absolutely positioned layers until you have a better grasp on HTML and CSS.
Looking at your code I would suggest that you consider using one of Dreamweaver's built in, or downloadable templates as a starting point and work from there. 
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html