Scrolling main content in an AP Div disappearing behind other AP Divs...?

Newbie here, using CS3. No CSS power user (yet!)--general concepts, yes, but not much practice. Meanwhile two recent CS3 classes, several books, and a concerted search through online forums have failed to point me toward a fix for this prob. Any help greatly appreciated.
Prob statement: In design view the core content of my pages disappears behind my footer and a secondary box, both AP Divs, so that I cannot see or edit anything beyond the bottom edge of the core-content AP Div. Overflow for that AP Div is set to scroll. The "obscured" content shows up only as an outlined shape extending past the footer etc. (and I can see some of the obscured text "through" the footer). Down arrow doesn't get me there: it just scoots down the outlined-but-obscured section. Doubleclicking highlights everything that's obscured so that I can see the relative shapes of the paragraphs, but doesn't expose the content. This seemed to start the first time I set the content div to scroll any overflow. I've changed it back/forth since; no joy.
Rendered in IE or Firefox, all the pages with all their varying content lengths look fine. Scrollbar works great. It's just that in order to edit or compose further, I have to copy everything into Notepad or something, work there, and then paste it back into DW. Definitely non-optimum, though: can't format or add hyperlinks to the content.
I'm using AP Divs, with scroll on in the "content" AP Div, because I couldn't figure out how to create a template where the footer would slide down the page in response to varying amounts of content. Started out with a table to handle all this, but an instructor recommended AP Divs so I went that way. I'd like to resolve this, rather than just go back to using tables while leaving this AP Div oddness a mystery.
The footer is full of a Spry tabbed panels giving my legal/green/design statements and other small bits of info. The secondary box is an AP Div called "quotations" and is for friendly little bits of cute/clever nonsense at the bottom of each page.
Tried a number of different settings so far and by now I've probably truly messed things up. Can anyone suggest a fix?
The code for the template file seems long, so my apologies. However, the content type isn't allowed for attachments so I've pasted it in below.
Much appreciation!
=================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

</style>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>

<style type="text/css">

</style>
<meta name="Description" content="Skyway Consulting: taking your information to a higher level! We do information design: planning, writing, editing, and indexing your user documentation. We also design websites, website graphics, print layouts, and logos. Basically, we want to be your source for the way your organization interfaces with the world. " />
</head>
<body onload="MM_preloadImages('../Images/Button_WebDesignOver.gif','../Images/Button_UserDocsO ver.gif','../Images/Button_LogoDesignOver.gif','../Images/Button_PrintLayoutOver.gif','../ Images/Button_ITSvcsOver.gif','../Images/Button_Home.gif','../Images/Button_HomeOver.gif', '../Images/Button_WebDesign.gif','../Images/Button_UserDocs.gif','../Images/Button_ITSvcs. gif','../Images/Button_LogoDesign.gif','../Images/Button_AboutUs.gif','../Images/Button_Co ntact.gif','../Images/Button_AboutUsOver.gif')">
<div id="LeftSidebar"></div>
<div id="Banner">
<div align="center"><img src="../Images/Banner.gif" alt="Skyway Consulting" width="335" height="184" /></div>
</div>
<div id="BannerPhone">
<p align="center">Taking your information to a higher level.</p>
<p align="center">530.965.2624</p>
<p align="center"><img src="../Images/email_Info.gif" alt="Address" width="203" height="23" /></p>
</div>
<div id="NavBar">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="../index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','../Images/Button_HomeOver.gif',1)" onmouseover="MM_nbGroup('over','Home','../Images/Button_HomeOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_Home.gif" alt="Skyway Consulting Homepage" name="Home" border="0" id="Home" onload="" /></a></td>
      <td><a href="../webdesign.html" target="_top" onclick="MM_nbGroup('down','group1','WebsiteDesign','../Images/Button_WebDesignOver.gif', 1)" onmouseover="MM_nbGroup('over','WebsiteDesign','../Images/Button_WebDesignOver.gif','',1) " onmouseout="MM_nbGroup('out')"><img src="../Images/Button_WebDesign.gif" alt="Website Design Services" name="WebsiteDesign" width="106" height="30" border="0" id="WebsiteDesign" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','UserDoc','../Images/Button_UserDocsOver.gif',1)" onmouseover="MM_nbGroup('over','UserDoc','../Images/Button_UserDocsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_UserDocs.gif" alt="User Documentation Services" name="UserDoc" width="106" height="30" border="0" id="UserDoc" onload="" /></a></td>
      <td><a href="../it_svcs.html" target="_top" onclick="MM_nbGroup('down','group1','ITServices','../Images/Button_ITSvcsOver.gif',1)" onmouseover="MM_nbGroup('over','ITServices','../Images/Button_ITSvcsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_ITSvcs.gif" alt="IT Services" name="ITServices" width="106" height="30" border="0" id="ITServices" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','LogoDesign','../Images/Button_LogoDesignOver.gif',1) " onmouseover="MM_nbGroup('over','LogoDesign','../Images/Button_LogoDesignOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_LogoDesign.gif" alt="Logo Design Services" name="LogoDesign" width="106" height="30" border="0" id="LogoDesign" onload="" /></a></td>
      <td><a href="../about.html" target="_top" onclick="MM_nbGroup('down','group1','AboutUs','../Images/Button_AboutUsOver.gif',1)" onmouseover="MM_nbGroup('over','AboutUs','../Images/Button_AboutUsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_AboutUs.gif" alt="AboutUs" name="AboutUs" border="0" id="Contact" onload="" /></a></td>
    </tr>
</table>
</div>
<div id="Content">
<p>Content</p>
</div>
<div id="Footer">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Info</li>
      <li class="TabbedPanelsTab" tabindex="0">Legal</li>
      <li class="TabbedPanelsTab" tabindex="0">Privacy Policy</li>
      <li class="TabbedPanelsTab" tabindex="0">Green Statement</li>
      <li class="TabbedPanelsTab" tabindex="0">Design Credit</li>
      <li class="TabbedPanelsTab" tabindex="0">Webmaster</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">Click for information on these topics.</div>
      <div class="TabbedPanelsContent">(c) 2009 Skyway Consulting. All content, including photographic content, is owned by Skyway Consulting. You may not copy, reproduce, modify, or publicly display, perform, distribute, or otherwise use the content provided on this site in any way for any public or commercial purpose. Skyway Consulting will not work on websites involving objectionable material, including but not limited to pornography, hatred, intolerance, or animal abuse. Our management staff's decision on what constitutes "objectionable material" is final. </div>
      <div class="TabbedPanelsContent">We recognize that your privacy is important. This privacy policy applies to all of our services and website pages. We do not set cookies. We do not sell or otherwise seek to profit from the contact information you provide, although we may preserve some information for use by Skyway Consulting. If you have questions about this privacy policy, please [link]contact us.</div>
      <div class="TabbedPanelsContent">Skyway Consulting is an American home-based business that makes every effort to conserve, reduce, reuse, and recycle.</div>
      <div class="TabbedPanelsContent">
        <p>Page design by Skyway Consulting. (Of course!)</p>
        <p>Tiling forest graphic at left by the talented Silvia Hartmann, <a href="http://silviahartmann.com/">http://silviahartmann.com/</a>. (Thank you, Silvia!)</p>
      </div>
      <div class="TabbedPanelsContent">Page problems? Contact <img src="../Images/email_Webmaster.gif" alt="Webmaster e-dress" width="177" height="18" align="absmiddle" /></div>
    </div>
</div>
</div>
<div id="Quotation">Quotation</div>
<div id="Heading">Heading</div>
<div align="center"></div>
<script type="text/javascript">

</script>
</body>
</html>

I hadn't looked at the code at all. I was relying on the Dreamweaver GUI to correctly guide me to a desired outcome.
I think that this is not a desirable approach to Dreamweaver, which will write perfect HTML if you let it, but it's too easy to click buttons and apply wizards without regard for the markup consequences, thereby producing a veritable pig's ear of a page. If you are going to use DW professionally, you will have to become comfortable with code. That doesn't mean you will have to spend 100% of your time in Code view, but you will definitely need to watch the code as it is formulated.
I'm not starting from an engineering background.
Neither did I. But I did start with a sincere desire to become proficient, and to learn the technology.
Murray, I get the idea of redoing my template without AP Divs, and will get into that. I don't know what "image swaps and links" mean, though. Would you mind teaching this newbie on this point?
Not at all. When you select the "NavBar" feature, you are placing elements and code on your page that were designed in the dark ages of HTML (frames). Some of the features in the NavBar will only work in a framed page (the down image and the over while down). The code is antique, invalid, and just wrong to be included. My suggestion was to forego this and just place your button images on the page (in whatever container you need to use), and apply links to them so that they link to the desired pages. Then apply swap image behaviors to them to create your rollover effects, one for each button. The result will be modern code, that has none of the legacy stuff of the navbar, and that will work fine for you. As you become more familiar with CSS you can investigate even better ways to do such menus (if you want a preview of this, Google "CSS Sprites). The latter method is usually the only way I do menus anymore. And even then, I use both text and graphics for accessability and SEO purposes.
I will say that I like your attitude. A determination to learn and improve is a winning approach.

Similar Messages

Fixed Nav Bar, Fixed Sidebar, Scroll Main Content

Can someone direct me to some good documentation to learn how to design a page to have a fixed nav bar, fixed sidebar and main content that scrolls?
My objective is to have the nav bar/sidebar visible at all times when the user is scrolling through the main content.
Thanks.

On line 135, you have this:
<td align="left"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
hspace="15" vspace="5" border="1" align="left" />
Try this:
<td align="left"> <div style="overflow:auto; height: 200px"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
hspace="15" vspace="5" border="1" />
Don't forget to close the division right before the cell closure.
</div>
</td>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

JinternalFrame border disappear behind other internal frame's Panels

Hi
I have a simble MDI application with 2 internal frames.
internal frame 1 contains a black panel
internal frame 2 is empty.
my problem is :
(internal frame 2 )'s Border disappear behind the panel in (internal frame 1).
how could i solve this??
here is my code :
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class DesktopExample extends JFrame
public static void main(String[] args)
JFrame.setDefaultLookAndFeelDecorated(true);
final JDesktopPane desktop = new JDesktopPane();
desktop.setPreferredSize(new Dimension(600, 400));
JMenuBar mb = new JMenuBar();
JMenu menu = new JMenu("File");
JMenuItem item = new JMenuItem("Internal frame 1");
JMenuItem item2 = new JMenuItem("Internal Frame 2");
item.addActionListener(new ActionListener()
public void actionPerformed(ActionEvent evt)
JInternalFrame fr = new JInternalFrame("internal", true, true, true, true);
Panel panel = new Panel();
panel.setSize(100,100);
panel.setBackground(Color.black);
fr.getContentPane().add(panel);
fr.setBounds(100, 100, 300, 200);
fr.show();
desktop.add(fr);
fr.setVisible(true);
item2.addActionListener(new ActionListener()
public void actionPerformed(ActionEvent evt)
JInternalFrame fr = new JInternalFrame("internal", true, true, true, true);
fr.setBounds(200, 200, 300, 200);
desktop.add(fr);
fr.setVisible(true);
menu.add(item);
menu.add(item2);
mb.add(menu);
JFrame f = new JFrame("DesktopExample");
f.setJMenuBar(mb);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.getContentPane().add(desktop);
f.pack();
//f.setLocationRelativeTo(null);
f.setVisible(true);
Thank you.

may you please how could I do this in the following code?
import java.awt.*;
import javax.swing.*;
public class MessageArea extends Canvas
public MessageArea()
normalMode = true;
public MessageArea(int size)
normalMode = true;
label = "";
this.size = size;
init();
void init()
bgColor = new Color(155, 175, 202);
textColor = Color.black;
Font font = new Font("Dialog", 1, 12);
setFont(font);
FontMetrics fm = getFontMetrics(getFont());
xMargin = fm.charWidth('0');
yMargin = 2;
textOffset = new Point(xMargin, fm.getAscent() + yMargin);
width = xMargin * size + 2 * xMargin;
height = fm.getAscent() + fm.getDescent() + 2 * yMargin;
public void setBGColor(Color bgColor)
this.bgColor = bgColor;
public void setTextColor(Color textColor)
this.textColor = textColor;
public void setLabel(String label)
this.label = label;
if(isVisible())
repaint();
public void setLabel(String label, Color textColor)
this.label = label;
this.textColor = textColor;
if(isVisible())
repaint();
public void paint(Graphics g)
setBackground(bgColor);
g.setColor(textColor);
g.drawString(label, textOffset.x, textOffset.y);
public Dimension getPreferredSize()
return new Dimension(width, height);
public Dimension getMinimumSize()
return new Dimension(width, height);
String label;
int width;
int height;
Point textOffset;
Color bgColor;
Color textColor;
int xMargin;
int yMargin;
boolean normalMode;
int size;
}

Working window disappears behind other open windows at random times.

The window I'm working on keeps popping back behind other open windows at random times (not related to the program I'm using). Is anyone else experiencing this after upgrading to Mavericks?

This is what happens for one of the active corners for Exposé, if ("all windows") is the upper left corner. Take a look at "System preferences" , Dashboard & Exposé.
Message was edited by: eddy kestemont

Horizontal menu pushes main content downwards

I created a website for my nonprofit with a spry horizontal menu inside the header. I then created submenus for several of the tabs. On one of the pages the submenus drop down into the main content space. On all of the other pages, the submenus inexplicably push the main content downwards - as though they are expanding the header. I have set the vertical size of the header in all cases at 175 pixels. All of the spry menus use the same global style sheet and I've gone through them line by line and see no differences. The wrappers are the same when I click on the header. Do you have any idea why a spry submenu might be pushing the header (that it is inside) downwards rather than just overlapping the main page the way most subheaders do?
Thank you so much!

Hiya, Karin,
Nice to hear back from you.
Without getting into the mishigas (don't know how to spell that...don't actually speak Yiddish)... of the templates, etc., here are a couple of fixes for the Events page (and any others you worked on the same way):
There's a line up in the head (at least in my copy of your page) that looks like this: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> You can take that out, I would comment it out at least, like this: 
When you save the page, you should be getting a javascript error...a widget has been removed from the page, etc., etc....when I got the error, it took me to this code in the page, which should also be removed (notice that I commented it out). Leaving javascript in a page when the widget itself has been removed leads to errors (!):

The thing that is pushing your submenus into your content (in Internet Explorer) is the lack of 'hacks' to make it work correctly in IE browsers. So, copy this code as is to the bottom of your SpryMenuBarHorizontal.css stylesheet:
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
By putting them at the bottom of your stylesheet, they will correct and override any styles that they need to fix...
Regarding your trials and tribulations with templates (ttttt), I heartily sympathize. I actually love templates, myself, but it took a while to 'get into' them. Once you have them set up they're fine, but getting to know them well takes a little work. There are those on the Forums who believe in using Server-Side Includes, but I have not used them, and the non-profits I design for usually are not on servers that support PHP or SSI. So I have gotten to know templates reasonably well.
It's too bad you have a hybrid running now of templated and untemplated pages; a templated site is ultimately much easier to maintain. But I trust you will get back to it. The difficulties you describe were probably not due to the templates, but to the lack of IE hacks (see code above that you will restore to the stylesheet).
Please let me know if these measures work! I will send you a private message in addition to this response.
Best wishes,
Beth Marshall

Making sidebar fill colors "scroll" with main content div

Just when I think this newbie is getting the hang of Dreamweaver, something throws me a curve
I have a three column fixed layout designed in Dreamweaver CS4 at the URL below. Each of the two sidebars - left and right - has a fill color. I would like those sidebar fill colors to "scroll" or "flow" down as the content of the middle, main content div expands. As it is, the fill color of the two sidebars stops when their content stops, even if the middle content continues.
I'm guessing I'm overlooking something simple here. Can someone tell me how to accomplish this?
Many thanks in advance.
http://firinglinedesign.com/mathieu/

That is really ingenious! Many thanks for the lead. For anyone else who has this issue, while there are many links on Google, this is the first one I came across and it solved my problem.
http://www.communitymx.com/content/article.cfm?cid=afc58
Many thanks, Murray.

DW template - why is the main content div lower than the columns?

I'm looking to use the DW template with 3 columns, a header and footer and have a couple of queries:
There is a gap between the header div and the main content div which does not appear to be a margin or padding. Why is the gap there?
Is it possible to remove this gap and have the main content div flush against the header div (like the 2 side bar divs)?

I don't have access to CS4 so cannot really determine what might be causing the gap. My suspicion, however, is that it's an escaping margin that is pushing the two divs apart. Try this - run a 1px solid border along the top of the main content div, e.g.,
div.content {
border-top:1px solid white;
Does that gap go away with the border in place? If so, then the top margin on the first child of that div is the culprit. The first child in that content div is usually an H1 tag.

CSS, Main content div and sidebar length

I'm using DW CS4 and am using the 2 column fixed left sidebar with header and footer.
I want to make sure the main content div is never shorter than the length of the sidebar. I've got a coloured background, but want the bottom of the sidebar and main content div to be the same, if that makes sense?
Thanks

For equal height columns, create a 2-colored background image and repeat-y (vertically). This technique is called Faux Columns. See examples below.
3-Col Layout Before -
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
3-Col Layout After -
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

I am trying to make only the main content editable in a template.

I thought I had only the main content area editable, but when I made a change to the menu bar in the template it didn't carry over ( I did try update) and then I realized my whole page is editable on the page where I applied the template. Can someone please review and tell me what I might have done wrong.
template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

<link href="../main.css" rel="stylesheet" type="text/css">
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>


</head>
<body onLoad="MM_preloadImages('../images/logo/shop_small_1.png','../images/home_page/plantatio n_closed.jpg')">
<div id="outer_container">
<div id="inner_conatiner">
    <div id="header">
      <script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
      </script>
      <table width="1024" border="0" cellspacing="0" cellpadding="5">
        <tr>
          <td rowspan="2"><img src="../images/logo/bed_guy_logo.gif" alt="bedguy logo" width="195" height="116" class="logo_images"></td>
          <td colspan="2" class="sleep_better">Helping Saint Louis<br>
            Sleep Better Since 2000</td>
          <td rowspan="2"><a href="../contact_forms/free_sticker_please.html" class="shop_small" onMouseOver="MM_swapImage('shop small','','../images/logo/shop_small_1.png',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/logo/logo_sticker_1.jpg" alt="shop small STL" width="225" height="105" id="shop small"></a></td>
        </tr>
        <tr>
          <td class="address"><a href="#">6431 Hampton Ave<br>
            Saint Louis, MO 63109<br>
            314-678-9100</a></td>
          <td class="address"><a href="#">4666 McRee Ave<br>
            Saint Louis, MO 63110<br>
            314-772-9999</a></td>
        </tr>
      </table>
    </div>
    <div id="nav_bar_top">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="#">browse</a>        </li>
        <li><a class="MenuBarItemSubmenu" href="#">bedroom</a>
          <ul>
            <li><a class="MenuBarItemSubmenu" href="#">Platform Beds</a>
              <ul>
                <li><a href="#">Item 3.1.1</a></li>
                <li><a href="#">Item 3.1.2</a></li>
              </ul>
            </li>
            <li><a href="#">Case Goods</a></li>
            <li><a href="#">Platform Accessories</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">futons</a>
          <ul>
            <li><a href="#">wallhuggers</a></li>
            <li><a href="#">premium frames</a></li>
            <li><a href="#">standard frames</a></li>
            <li><a href="#">economy frames</a></li>
            <li><a href="#">futon mattresses</a></li>
            <li><a href="#">futon accessories</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">youth</a>
          <ul>
            <li><a href="#">Loft Beds</a></li>
            <li><a href="#">BunkBeds</a></li>
            <li><a href="#">Storage & Trundle Beds</a></li>
            <li><a href="#">Daybeds</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Mattresses</a>
          <ul>
            <li><a href="#">Pocket Coil</a></li>
            <li><a href="#">Memory Foam</a></li>
            <li><a href="#">Pillowtop</a></li>
            <li><a href="#">Plush/Firm</a></li>
            <li><a href="#">Best Value</a></li>
            <li><a href="#">Double Sided</a></li>
            <li><a href="#">Youth</a></li>
            <li><a href="#">Misc </a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">bed rails</a>
          <ul>
            <li><a href="#">Basic Frames</a></li>
            <li><a href="#">Hook-On </a></li>
            <li><a href="#">Bolt-On</a></li>
            <li><a href="#">Specialty</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="nav_bar_left">
      <ul id="MenuBar2" class="MenuBarVertical">
        <li><a href="#">browse</a></li>
        <li><a href="#">Specials & Closeout</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">delivery</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">hours & locations</a></li>
        <li><a href="#">Our manufacturers</a></li>
        <li><a href="#">photo gallery</a></li>
        <li><a href="#">contact us</a></li>
      </ul>
    </div>
    <div id="hours"> <strong class="underline">6431 Hampton</strong> <br>
Tues-Fri 11-7<br>
Sat 11-6<br>
Sun 12-3<br>
<br>
<strong class="underline">4666 McRee </strong><br>
Tues-Fri 10-7<br>
Sat 10-6<br>
Sun 12-3<br>
<br>
    </div>
<div id="main_content">main_content<table width="800" border="1" cellspacing="0" cellpadding="5">
<tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home_futon','','../images/home_page/plantation_closed.jpg',1)" ><img src="../images/home_page/plantation_open.jpg" alt="futon open and closed" width="150" height="145" id="home_futon"></a></td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</table>
</div>
<div id="footer">The BedGuy ©2000-2014<br>
Contact Us</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
page with template applied
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

<link href="main.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>


</head>
<body onLoad="MM_preloadImages('images/logo/shop_small_1.png','images/home_page/futon_closed.jp g','images/home_page/Clove Casegoods Dark Chocolate (Metal Knobs).jpg','images/home_page/sasparilla_chocolate_trundle.jpg','images/home_page/BR12_TE _Stack_06.jpg','images/home_page/link_spring.jpg')">
<div id="outer_container">
<div id="inner_conatiner">
    <div id="header">
      <script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
      </script>
      <table width="1024" border="0" cellspacing="0" cellpadding="5">
        <tr>
          <td rowspan="2"><img src="images/logo/bed_guy_logo.gif" alt="bedguy logo" width="195" height="116" class="logo_images"></td>
          <td colspan="2" class="sleep_better">Helping Saint Louis<br>
            Sleep Better Since 2000</td>
          <td rowspan="2"><a href="contact_forms/free_sticker_please.html" class="shop_small" onMouseOver="MM_swapImage('shop small','','images/logo/shop_small_1.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/logo/logo_sticker_1.jpg" alt="shop small STL" width="225" height="105" id="shop small"></a></td>
        </tr>
        <tr>
          <td class="address"><a href="#">6431 Hampton Ave<br>
            Saint Louis, MO 63109<br>
            314-678-9100</a></td>
          <td class="address"><a href="#">4666 McRee Ave<br>
            Saint Louis, MO 63110<br>
            314-772-9999</a></td>
        </tr>
      </table>
    </div>
    <div id="nav_bar_top">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="#">browse</a>        </li>
        <li><a href="#" class="MenuBarItemSubmenu">futons</a>
          <ul>
            <li><a href="#">wallhuggers</a></li>
            <li><a href="#">premium frames</a></li>
            <li><a href="#">standard frames</a></li>
            <li><a href="#">economy frames</a></li>
            <li><a href="#">futon mattresses</a></li>
            <li><a href="#">futon accessories</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">bedroom</a>
          <ul>
            <li><a class="MenuBarItemSubmenu" href="#">Platform Beds</a>
              <ul>
                <li><a href="#">Item 3.1.1</a></li>
                <li><a href="#">Item 3.1.2</a></li>
              </ul>
            </li>
            <li><a href="#">Case Goods</a></li>
            <li><a href="#">Platform Accessories</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">youth</a>
          <ul>
            <li><a href="#">Loft Beds</a></li>
            <li><a href="#">BunkBeds</a></li>
            <li><a href="#">Storage & Trundle Beds</a></li>
            <li><a href="#">Daybeds</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Mattresses</a>
          <ul>
            <li><a href="#">Pocket Coil</a></li>
            <li><a href="#">Memory Foam</a></li>
            <li><a href="#">Pillowtop</a></li>
            <li><a href="#">Plush/Firm</a></li>
            <li><a href="#">Best Value</a></li>
            <li><a href="#">Double Sided</a></li>
            <li><a href="#">Youth</a></li>
            <li><a href="#">Misc </a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">bed rails</a>
          <ul>
            <li><a href="#">Basic Frames</a></li>
            <li><a href="#">Hook-On </a></li>
            <li><a href="#">Bolt-On</a></li>
            <li><a href="#">Specialty</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="nav_bar_left">
      <ul id="MenuBar2" class="MenuBarVertical">
        <li><a href="#">browse</a></li>
        <li><a href="#">Specials & Closeout</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">delivery</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">hours & locations</a></li>
        <li><a href="#">Our manufacturers</a></li>
        <li><a href="#">photo gallery</a></li>
        <li><a href="#">contact us</a></li>
      </ul>
    </div>
    <div id="hours"> <strong class="underline">6431 Hampton</strong> <br>
Tues-Fri 11-7<br>
Sat 11-6<br>
Sun 12-3<br>
<br>
<strong class="underline">4666 McRee </strong><br>
Tues-Fri 10-7<br>
Sat 10-6<br>
Sun 12-3<br>
<br>
    </div>
<div id="main_content"> 
<table width="800" cellpadding="10">
<tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('futon','','images/home_page/futon_closed.jpg',1)"><img src="images/home_page/futon_open.jpg" alt="take me to futon home page" width="250" height="175" id="futon"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bedroom','','images/home_page/Clove Casegoods Dark Chocolate (Metal Knobs).jpg',1)"><img src="images/home_page/Tamarind Bed Full Cherry K-Series w Cinnamon Storage Drawers opened.jpg" alt="platform bed and casegoods" width="250" height="175" id="bedroom"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('youth','','images/home_page/sasparilla_chocolate_trundle.jpg', 1)"><img src="images/home_page/Scribbles Twin Twin Medium Oak w Drawer opened.jpg" alt="bunkbeds and trundle beds" width="250" height="175" id="youth"></a></td>
</tr>
<tr>
    <td class="home_page_table_words">FUTONS</td>
    <td class="home_page_table_words">BEDROOM</td>
    <td class="home_page_table_words">YOUTH</td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mattresses','','images/home_page/BR12_TE_Stack_06.jpg',1)"><im g src="images/home_page/BR13_Pyramid_Stack_R.jpg" alt="mattresses" width="250" height="175" id="mattresses"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bedframes','','images/home_page/link_spring.jpg',1)"><img src="images/home_page/classic_frame.jpg" alt="bedframes" width="250" height="175" id="bedframes"></a></td>
    <td><img src="images/home_page/futon_closed.jpg" width="250" height="175"></td>
</tr>
<tr>
    <td class="home_page_table_words">MATTRESSES</td>
    <td class="home_page_table_words">BED FRAMES</td>
    <td class="home_page_table_words">SPECIALTY AND MISC</td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</table>
</div>
<div id="footer">The BedGuy ©2000-2014<br>
Contact Us</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Go to File > New page from template.
Select your Template.dwt file from the list and hit Create.
Save your child page.
Nancy O.

How to keep the right sidebar on this website from going under the main content (center) column?

Hi...is there a way to keep the right sidebar on this website from going under the main content (center) column when the browser window is made smaller? It would be great if the middle (main content) column could get smaller instead of the sidebar moving under the text when the window is made smaller. I'm working with a fluid layout and this is the first time I've tried this. Any help would be appreciated. Here is the link to the website:
http://www.elynncohen.com
and here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
<meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
"In-transition and considering new opportunities"
"Seeking to make a significant and meaningful career change" />
<meta name="Publisher" content="Your Career Direction, LLC" />
<meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
<meta name="Author" content="Lisa Mark" />
<meta name="Language" content="en-US" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="10 days" />
<meta name="Robots" content="All" />
<link rel="Index" href="index.html" />
<link rel="Site Map" href="sitemap.html" />
<script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">

</style></head>
<body><script type="text/javascript">
function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
</script>
<div class="container">
<div class="header">
    <p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
    ; display:block;" /></a></p>
    <div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
    <p class="clearfloat"> </p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">High School Students</a></li>
      <li><a href="#">College Students</a></li>
      <li><a href="#">Parents/Educators</a></li>
      <li><a href="#">Professionals</a></li>
      <li><a href="#">Bio</a></li>
      <li><a href="#">Q & A Blog</a></li>
      <li><a href="#">Testimonials</a></li>
    </ul>
</div>
<div class="content">
<p>Given today's competitive job market, global economy, and changed corporate culture,
we can no longer depend upon others to ensure our professional futures. Choosing or
changing your career direction requires self-reflection, career education and an action plan.</p>
<img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
<ul>
      <br><br><li><strong>Considering your college choices & career options</strong></li>
      <li><strong>Preparing for the world of work after college</strong></li>
      <li><strong>Seeking a new position to further your career</strong></li>
      <li><strong>In-transition and considering new opportunities</strong></li>
      <li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
    </ul>
<img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
<br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
<p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
<img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
<div class="sidebar2">
    <p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
    <p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
     <p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
     <p>We provide step by step guidance to ensure your success during the college application, job interview
and decision making process.
</p>
</div>
<div class="footer">
    <div id="footer">
      <h6 align="left"> Your Career Direction, LLC • 96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
         </div>
    <p> </p>
</div>
</div>
</body>
</html>

You should make your sidebar1 and sidebar2 fixed positioned. Make your content DIV fluid.
This should help you: http://www.glish.com/css/7.asp

CSS - main content h1 and p text doesn't display properly

Hi all,
I know this is something really simple, but I just can't seem to get it right. The h1 and the p text in the main content should have left and right padding to display properly (i.e. space on either side so it's not squished against the Accordion Spry), but it doesn't work. It shows correctly in DW, but not online. I'm just learning CSS so sorry for the ignorance! I've tried everything I know and can't seem to get it right. I would appreciate ANY help at all.
http://www.TailgatorsHockey.com/news.html
Attached is the .css file...
Thanks so much!

The padding and margin are certainly showing in the browser for the h1 tag but you have no padding or margin declared in your css styles for the paragraph tag in the 'main-content' <div>
Add ths to your css styles:
#main-content p {
padding: 0 25px 0 25px; /*top/right/bottom/left*/
margin-left: 10px;

White space between header and main content

Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's the Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">

</style>

<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre>
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p>
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre>
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>

</pre>
</div>
<pre>
</pre>
<pre> </pre>
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php

Reselecting main content tab with tabbed panels

Hi all,
Using Tabbed Panels, once a user selects a panel that tab
remains "selected" until somewhere else in the main content window
is clicked. What I mean by selected is that it has an ugly dotted
line around it. Is there anyway to get it so that after a user
clicks a new tab, the main content window is selected again so that
the dotted selection line disappears?
Thanks,
Erin

Erin -
I noticed that too this past week on a project_
I'm running thru Firefox 2.x on both Mac and PC also IE 6 and
Safari_
It seems to be more on an issue with the browsers than it
does with something either in the Spry code or Dreamweaver itself_
In Firefox - goto yahoo.com and in the little "in the news"
tab there is a list of 6 or 7 lines of text [news headlines] Click
and drag to an empty spot on the page [don;t go off the window]
then let go and you'll see a "border box" around the text link you
just messed with_ It's this round of browsers doing it_
I was messing with some image slices and custom area maps
custom this weekend this weekend and that got my attention 'cause
the "outline" of the area map kept showing up when I exported to
test in a browser and tried them all - did the same thing
everywhere_

Iframe not scrolling to content below set height in IE9

Because iframe height of 100% didn't render correctly (in any browsers) I chose a set height (600px) in which to display my clients' property listings within one of their site pages.
All works reasonably all tested browsers (double scroll bars in Chrome and Safari -- div and iframe -- despite that the div isn't set to have such, but I can likely fix that); IE9, though, is nonfunctional: In IE9 I get a Y scrollbar, as defined, however it does not scroll past content that fits into 600 pixel iframe height. That is, is does not scroll to show the rest of the iframe page.
I have tried separately defining x and y scrollers as well as simply calling for scrolling in general; no luck.
I have been searching for hours for a fix, and have tried every combination of style coding to the iframe itself as well as the overall style sheet (to the div). I also read the soure for the page rendered in IE9, and the style coding was as I'd written it.
It has to be a simple fix, or others would be having this IE9 issue, too, right?
Have even added <meta http-equiv="X-UA-Compatible" content="IE=8"> to the header; didn't change anything.
Anyone know what is going on -- and how to fix it?
I apologize for how jumbled both the CSS and source code is for this site. If I were recreating the site today, I could do a much cleaner job.
Here are a few tries:
http://cbm1.com/retail_property_listings/costar.html
http://cbm1.com/retail_property_listings/costar3.html
This version (more info in the CSS, less inline) gets rid of the double scrollers in Safari and Chrome (while still working in FF) but still the same doesn't-scroll-beyond-the-600px-iframe-pane-height issue in IE9. Tried moving the meta directive toward IE8 to immediately above the body tag as well as first meta tag on the page; neither resulted in any IE9 rendering change:
http://cbm1.com/retail_property_listings/costar4.html
Happy to simply paste the inline + CSS coding alone in this window, if that's easier for anyone.

Because iframe height of 100% didn't render correctly (in any browsers) I chose a set height (600px) in which to display my clients' property listings within one of their site pages.
All works reasonably all tested browsers (double scroll bars in Chrome and Safari -- div and iframe -- despite that the div isn't set to have such, but I can likely fix that); IE9, though, is nonfunctional: In IE9 I get a Y scrollbar, as defined, however it does not scroll past content that fits into 600 pixel iframe height. That is, is does not scroll to show the rest of the iframe page.
I have tried separately defining x and y scrollers as well as simply calling for scrolling in general; no luck.
I have been searching for hours for a fix, and have tried every combination of style coding to the iframe itself as well as the overall style sheet (to the div). I also read the soure for the page rendered in IE9, and the style coding was as I'd written it.
It has to be a simple fix, or others would be having this IE9 issue, too, right?
Have even added <meta http-equiv="X-UA-Compatible" content="IE=8"> to the header; didn't change anything.
Anyone know what is going on -- and how to fix it?
I apologize for how jumbled both the CSS and source code is for this site. If I were recreating the site today, I could do a much cleaner job.
Here are a few tries:
http://cbm1.com/retail_property_listings/costar.html
http://cbm1.com/retail_property_listings/costar3.html
This version (more info in the CSS, less inline) gets rid of the double scrollers in Safari and Chrome (while still working in FF) but still the same doesn't-scroll-beyond-the-600px-iframe-pane-height issue in IE9. Tried moving the meta directive toward IE8 to immediately above the body tag as well as first meta tag on the page; neither resulted in any IE9 rendering change:
http://cbm1.com/retail_property_listings/costar4.html
Happy to simply paste the inline + CSS coding alone in this window, if that's easier for anyone.

How to scroll the content of an XY chart?

Is it possible to scroll the contents of a chart? I want to keep a fixed Y axis and scroll the X axis. If the chart is placed inside a ScrollPane, then Y axis, legend, and chart title can be scrolled out of the view...

John,
thanks for the suggestion. I could find that css selector with the help of a decompiler (most of the chart sources are not yet released). However, to reparent this into a scrollpane required me to subclass the chart. This is because the chart itself is the parent of the content but it does not expose its children (which are protected in the Parent class). The problem is now that the chart does not show. I can only see the title and legend, no axis and no content. What am I doing wrong?
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.chart.Axis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.control.ScrollPane;
import javafx.stage.Stage;
public class ScrollableChart extends Application
public static void main(String[] args)
    Application.launch(args);
@Override
public void start(Stage stage) throws Exception
    Parent root;
    MyLineChart chart = createLineChart();
    if (true)
      // Scroll chart content - does not show chart currently.
      Node chartContent = chart.lookup(".chart-content");
      chart.getChildren().remove(chartContent);
      ScrollPane scroll = new ScrollPane();
      scroll.setContent(chartContent);
      scroll.setFitToHeight(true);
      chart.getChildren().add(scroll);
      root = chart;
    else
      // Scroll chart incl axis etc.
      ScrollPane scroll = new ScrollPane();
      scroll.setContent(chart);
      scroll.setFitToHeight(true);
      root = scroll;
    stage.setScene(new Scene(root, 1024, 768));
    stage.show();
public static class MyLineChart extends LineChart<Number,Number> {
    public MyLineChart(Axis<Number> paramAxis, Axis<Number> paramAxis1) { super(paramAxis, paramAxis1); }
    public ObservableList<Node> getChildren() { return super.getChildren(); }
private MyLineChart createLineChart()
    final int CNT = 500;
    final NumberAxis xAxis = new NumberAxis(), yAxis = new NumberAxis();
    xAxis.setLabel("Number of Month");
    xAxis.setAutoRanging(true);
    final MyLineChart lineChart = new MyLineChart(xAxis, yAxis);
    lineChart.setTitle("Stock Monitoring, 2010");
    XYChart.Series<Number, Number> series = new XYChart.Series<Number, Number>();
    series.setName("My portfolio");
    ObservableList<Data<Number, Number>> data = series.getData();
    for (int i = 1; i <= CNT; i++)
      data.add(new XYChart.Data<Number, Number>(i, 50 * Math.random()));
    lineChart.getData().add(series);
    lineChart.setPrefWidth(CNT * 10);
    return lineChart;
}

Scrolling main content in an AP Div disappearing behind other AP Divs...?

Similar Messages

Maybe you are looking for