Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 576
  • Last Modified:

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

0
savache27
Asked:
savache27
  • 7
  • 4
  • 3
1 Solution
 
Jason C. LevineNo oneCommented:
Can you post a screenshot of the misbehavior?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It's hard to say without seeing your css file and it is also possible  your dropdown.js file has something to do with it too.

Just a tip using dreamweaver, I would drop the dreamweaver template and just edit your pages directly and completely remove the dwt file.  

Where you have common content such as your header, use an include file

<!--#include virtual="header.html" --> where you header.html is below and saved on the top level of your domain.  Repeat for anything else you would mark  in your dwt file as "not editable".  You will still see the file in your dreamweaver wysiwyg.

The reason is, lets say you have 50 pages and you want to change something in the header file.  This means updating the dwt file, then instructing the dwt file to update all the related files, then upload 50 pages.   Now if you are using the include file, you just update one place and one upload.

The last benefit is your wysiwyg will be more accurate.  Sometimes the dwt file can not appear as you expect it with more complex layouts but the rendered html looks fine.

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

Open in new window

0
 
Jason C. LevineNo oneCommented:
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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
savache27Author Commented:
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?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Did you upload the footer?  Make sure your relative vs absolute links are correct.
0
 
savache27Author Commented:
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

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
0
 
savache27Author Commented:
No, that didn't do anything. It's still showing the same way. I can surf directly to my footer and it shows.
0
 
Jason C. LevineNo oneCommented:
Is this a Windows or *nix server?
0
 
savache27Author Commented:
It's a Windows server.
0
 
savache27Author Commented:
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.
0
 
Jason C. LevineNo oneCommented:
If it still doesn't work, then your server doesn't support SSI

Correct.  Are you running Apache under Windows or IIS?
0
 
savache27Author Commented:
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.
0
 
savache27Author Commented:
Thanks for the help. I really wanted to use the include file you suggested, but I never could get it to work. :(
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now