Link to home
Start Free TrialLog in
Avatar of savache27
savache27

asked on

Help with Dreamweaver Template

Can someone please look this over for me? I'm trying to create a template, but the menu bar is sticking out of the left side. When I apply it to a page it shows up fine, but when I have the template open in Dreamweaver the the menu sticks out of the left side and the search bar is pushed over as well. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Enter your site's description inside the content value below. Search Engine's will display this text in their results. -->
<meta name="Description" content=""/>
<!-- Enter your site's keywords inside the content value below. Choose words/acronyms that describe your site. -->

<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" type="text/css" href="../css/root.css"/>
	<!--[if IE 6]>
	    <link rel="stylesheet" type="text/css" href="rv4_css/ie6.css" />
	<![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="rv4_css/ie7.css" />
    <![endif]-->
    <script type="text/javascript" src="../js/utility.js"></script>
    <script type="text/javascript" src="../js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="../js/superfish.js"></script>
    <script type="text/javascript" src="../js/jquery.hoverIntent.min.js"></script>
    <script type="text/javascript" src="../js/jqueryui.slide.min.js"></script>
    <script type="text/javascript" src="../js/dropDown.js"></script>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
</head>
<body>
    <div id="wrapper"><div id="container">
        <div id="header">
            <a id="headerStar" href="http://www.header.com/"></a>
        </div>
        <div id="navBar">
            <ul id="dropDownNav">
                <a class="hide2" href="#skipNav">Skip main navigation</a>
				
              <li><a href="/index.html">Home</a></li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>
              </li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>    
              </li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>
              </li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>
              </li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>
              </li>
		    </ul>
            <div id="liveSearch">
                <ul id="liveSearchTabs">
                    <li id="liveSearchTabs1">All</li>
                    <li id="liveSearchTabs2">Articles</li>
                    <li id="liveSearchTabs3">Images</li>
                    <li id="liveSearchTabs4">Video</li>
                </ul>
                <div id="liveSearchLeft"></div>
                <form id="searchForm" name="searchForm" method="get" action="">
                    <h6>
                        <label class="hide2">Search</label><input type="text" value="" name="search" id="search" size="32" />
                        <input type="submit" value="" class="close" id="searchbutton" />
                    </h6>
                </form>
            </div>
            <a name="skipNav"></a>
      </div>
        <div id="contentBackground"><div id="leftCol">            
            <div id="navLinks">
                <ul id="leftColNav">
<li><a class="current" href=""></a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li id="sections">Section Divider</li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                </ul>
                </div>
        </div>        
        <!-- TemplateBeginEditable name="EditMain" -->
        <div id="mainContent">
<h1>Heading 1</h1>
          <h2>Heading 2</h2>
          <h2 class="bordered">Heading 2 - bordered</h2>
          <p>Paragraph Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et arcu nec augue ornare vulputate. Nam venenatis aliquet massa. Etiam ac justo sit amet diam accumsan commodo. Fusce luctus, justo id feugiat ullamcorper, magna enim molestie mi, et scelerisque leo elit sed nisl. Nullam arcu arcu, vehicula nec, condimentum ac, auctor vitae, metus. Integer arcu ante, ornare dignissim, ullamcorper sit amet, dictum eget, urna. Aenean tincidunt mattis est.</p>
          <p><a href="">Standard link</a> within paragraph text.</p>
          <ul class="diamondList">
            <li><a href="">Unordered List Link</a></li>
            <li>Unordered List Text</li>
          </ul>
</div>
<!-- TemplateEndEditable -->
        <!-- end mainContent -->
        <!-- TemplateBeginEditable name="EditRegionRight" -->
        
        <div id="rightCol">
  <h2 class="block light-gray centered">LIGHT-GRAY</h2>
          <p>Note the different possibilities in right column headings.</p>
          <p>The video player below will show recent videos on your page.</p>
          <h2 class="block dark-gray centered">DARK-GRAY</h2>
  
          <h2 class="block dark-red centered">DARK-RED</h2>
          <ul class="diamondList">
            <li><a href="">Unordered List Link</a></li>
            <li>Unordered List Text</li>
          </ul>
</div>
       <!-- TemplateEndEditable -->  <!-- end rightCol --></div>
       
        
        <div id="footer">
            
            <div id="footerLeft">
                <a class="rss" href="http://www.RSS.com/rss/"><span class="textLink">RSS</span></a>
                <a class="podcasts" href="http://www.podcast.com/rss/podcasts/"><span class="textLink">Podcasts</span></a>
            </div>
            <div id="footerMiddle">
                <ul>
<li><a href="">Section 508</a></li>
                    <li><a href="">Security and Privacy Policy</a></li>
                    <li><a href="">Contact Us</a></li>                  
                </ul>
                </div>
            <div id="footerRight">
                Need help? Try <a href="http://www.help.com/info/a-z/">A-Z</a>
            </div>
        </div>
            
    </div><!-- end container -->
    <!--Last Updated starts here-->   
      <div class="date">
        Last Updated: <!-- #BeginDate format:Am3 -->08/24/2012<!-- #EndDate -->
      </div><br/>
      <!--Last Updated ends here-->
</div><!-- end wrapper --></body>

</html>

Open in new window

Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image
Can you post a screenshot of the misbehavior?
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image
Sometimes the dwt file can not appear as you expect it with more complex layouts but the rendered html looks fine.

This.

The extra stuff that DW adds to show that the text is in an editable area or other DW-specific features can throw off Design View.  If it works in the browsers, don't worry about it.
Avatar of savache27
savache27

ASKER

Thanks guys! I really appreciate the help.

@padas, what you said about the include files makes sense. It definitely sounds like a better way to go. However, I removed the footer and placed it in test_footer.html and called it and it does not show up. It shows up in Dreamweaver design view, but when I test it the footer does not show. Any idea what the problem is?
Avatar of Scott Fell
Scott Fell
Flag of United States of America image
Did you upload the footer?  Make sure your relative vs absolute links are correct.
Avatar of savache27
savache27

ASKER

Yes, I uploaded both. When I display the page, this is what the code behind looks like. Doesn't the fact that the  <!--#include virtual="test_footer.html"--> shows up mean it's not working?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Enter your site's description inside the content value below. Search Engine's will display this text in their results. -->
<meta name="Description" content=""/>
<!-- Enter your site's keywords inside the content value below. Choose words/acronyms that describe your site. -->
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/root.css"/>
	<!--[if IE 6]>
	    <link rel="stylesheet" type="text/css" href="rv4_css/ie6.css" />
	<![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="rv4_css/ie7.css" />
    <![endif]-->
    <script type="text/javascript" src="js/utility.js"></script>
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/jquery.hoverIntent.min.js"></script>
    <script type="text/javascript" src="js/jqueryui.slide.min.js"></script>
    <script type="text/javascript" src="js/dropDown.js"></script>
</head>
<body>
    <div id="wrapper"><div id="container">
        <div id="header">
            <a id="headerStar" href="http://www.test.mil/"></a>
        </div>
        <div id="navBar">
            <ul id="dropDownNav">
                <a class="hide2" href="#skipNav">Skip main navigation</a>
				
              <li><a href="index.asp">Home</a></li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>
              </li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>    
              </li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>
              </li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>
              </li>
              <li><a href="">Link</a>
                  <ul>
                      <li><a href="">Sub-Link</a></li>
                      <li><a href="">Sub-Link</a></li>
                  </ul>
              </li>
		    </ul>
            <div id="liveSearch">
                <ul id="liveSearchTabs">
                    <li id="liveSearchTabs1">All</li>
                    <li id="liveSearchTabs2">Articles</li>
                    <li id="liveSearchTabs3">Images</li>
                    <li id="liveSearchTabs4">Video</li>
                </ul>
                <div id="liveSearchLeft"></div>
                <form id="searchForm" name="searchForm" method="get" action="">
                    <h6>
                        <label class="hide2">Search</label><input type="text" value="" name="search" id="search" size="32" />
                        <input type="submit" value="" class="close" id="searchbutton" />
                    </h6>
                </form>
            </div>
            <a name="skipNav"></a>
      </div>
        <div id="contentBackground"><div id="leftCol">            
            <div id="navLinks">
                <ul id="leftColNav">
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li id="sections">Section Divider</li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                </ul>
                </div>
        </div>        
        <div id="mainContent">
<h1>Heading 1</h1>
          <h2>Heading 2</h2>
          <h2 class="bordered">Heading 2 - bordered</h2>
          <p>Paragraph Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et arcu nec augue ornare vulputate. Nam venenatis aliquet massa. Etiam ac justo sit amet diam accumsan commodo. Fusce luctus, justo id feugiat ullamcorper, magna enim molestie mi, et scelerisque leo elit sed nisl. Nullam arcu arcu, vehicula nec, condimentum ac, auctor vitae, metus. Integer arcu ante, ornare dignissim, ullamcorper sit amet, dictum eget, urna. Aenean tincidunt mattis est.</p>
          <p><a href="">Standard link</a> within paragraph text.</p>
          <ul class="diamondList">
            <li><a href="">Unordered List Link</a></li>
            <li>Unordered List Text</li>
          </ul>
</div>
        <!-- end mainContent -->
        
        <div id="rightCol">
<h2 class="block light-gray centered">LIGHT-GRAY</h2>
          <p>Note the different possibilities in right column headings.</p>
          <p>The video player below will show recent Test.mil videos on your page.</p>
          <h2 class="block dark-gray centered">DARK-GRAY</h2>
  
          <h2 class="block dark-red centered">DARK-RED</h2>
          <ul class="diamondList">
            <li><a href="">Unordered List Link</a></li>
            <li>Unordered List Text</li>
          </ul>
</div>
        <!-- end rightCol --></div>
        
        <div id="footer">
            
 <!--#include virtual="test_footer.html"-->
            
    </div><!-- end container -->
    <!--Last Updated starts here-->   
      <div class="date">
        Last Updated: <!-- #BeginDate format:Am3 -->08/27/2012<!-- #EndDate -->
      </div><br/>
      <!--Last Updated ends here-->
</div><!-- end wrapper --></body>
 
</html>

Open in new window

Avatar of Scott Fell
Scott Fell
Flag of United States of America image
It's very possible you have your local configuration different.

Try  <!--#include virtual="/test_footer.html"-->

assuming you can surf to www.yoursite.com/test_footer.html
Avatar of savache27
savache27

ASKER

No, that didn't do anything. It's still showing the same way. I can surf directly to my footer and it shows.
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image
Is this a Windows or *nix server?
Avatar of savache27
savache27

ASKER

It's a Windows server.
Avatar of savache27
savache27

ASKER

I found this information by Googling. I tried it, and it doesn't work. So I guess my server does not support it?

Try running this:
Copy this into a blank file, name it test.html or something and upload it to your server.

<HTML>
<TITLE>Test File</TITLE>

<!--#config timefmt="%A" --> <!--#echo var="DATE_LOCAL" -->

</HTML>

If it doesn't work, try renaming it test.shtml

If it still doesn't work, then your server doesn't support SSI.
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image
If it still doesn't work, then your server doesn't support SSI

Correct.  Are you running Apache under Windows or IIS?
Avatar of savache27
savache27

ASKER

IIS. I tried it with .asp files and it works. I thought it would work with .html files if it would work with .asp. A weird thing with the .asp files is that when I try to preview it on my web draft server it always asks if I want to open or save the file and won't preview. If I upload it to the production server then I can see if it works correctly. Do you know if there is any way to fix it to where it can be previewed on the web draft server? I may need to just open another question for that.
Avatar of savache27
savache27

ASKER

Thanks for the help. I really wanted to use the include file you suggested, but I never could get it to work. :(