Website Design Forum

**marioo** · 08-04-2009, 04:19 PM

Hi,
hopefully I'm posting this in the right place

.
I am having difficulties using a template created page and editing that page. I've got a template. I work directly and mostly in the HTML as well as some in design mode when I'm adding chunks of content.
I create a page using the template below with no problem. When I edit in the Code view I get the following message: "You have made changes to code that is not marked as editable. If you retain those changes, they will be lost the next time you apply a template update to this file. Do you want to retain the changes until then?" if I click into the Split/Design area or try and save the page.
I click either OK or No and all the new content disappears.
This is making me crazy. I really need some help. This is holding me up from completing a new site that is due next week.

thank you in advance.

Code:

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

<head>
<!-- TemplateBeginEditable name="doc-title" -->
<title>page trial 04 </title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="../images/favicon-small.ico" />
<style type="text/css">

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .95em;
/*    width: 955px; */
/*    margin: 0 auto; */
    margin: 0;
    padding: 0;
}
    #wrapper-2col {
        border: 1px solid #000;
        background-color: #fff;
        width: 944px;
        margin: 0 auto; /* moved here from body */
        line-height: 130%;
        background-image: url(../images/content-divider.png);
        background-repeat: repeat-y;
    }
    #wrapper-3col {
        border: 1px solid #000;
        background-color: #fff;
        width: 944px;
        margin: 0 auto; /* moved here from body */
        line-height: 130%;
        background-image: url(../images/content-divider_3-column.gif);
    }
    #header {
        height: 100px;
        background-color: #fff;
        background-image: url(../images/whole-logo-header.jpg);
        background-repeat: no-repeat;
        padding: 0px;
        margin-bottom: 0px;
        border-bottom: 2px solid #c80024;
    }
    h1#page-title-info {
        background-color: #fff;
        padding-top: 6px;
        margin-top: 6px;
        margin-left: 0px;
        padding-left: 0px;
        /*line-height: 1.3em;        /* may be needed if there are too many words in title.  then will need to compensate for top margin/padding */
    }    
    h1#page-title-info_3col {
        padding-top: 6px;
        margin-top: 6px;
        margin-left: 1px;
        padding-left: 1px;
        /*line-height: 1.3em;        /* may be needed if there are too many words in title.  then will need to compensate for top margin/padding */
    }

    /* LEFT HAND NAVIGATION */
    #left-nav {
        position: relative; 
        width: 220px; 
        z-index: 100;
        font-size: 1.20em;
        float: left;
    }        
    #right {
        float: right;
        width: 190px;
        margin: 0;
        padding: 15px 5px 12px 12px;
        margin: 15px 5px 12px 12px;
        *padding-top: 23px;
        *margin-top: 23px;
    }
    #content-wrapper {
        padding: 1px;
    }
    #content-2col {
        margin-left: 250px;
        *margin-left: 228px;
        margin-right: 10px;
        *padding: 1em;
        /*width: 456px;*/
        /*background-image: url(images/content.png);*/
    }
    #content-3col {
        margin-left: 250px;
        *margin-left: 228px;
        margin-right: 10px;
        *padding: 1em;
        width: 456px;
        /*background-image: url(images/content.png);*/
    }

/* CONTACT FORM AND INFO */    
    #contactForm {
        padding-left: 1px;
        margin-left: 1px;
    }
    .redasterisk {
        color: #FF0000;
    }
    .inputContact {
        padding-left: 4px;
        margin-left: 4px;
    }
    .labelContact {
        padding-right: 10px;
        float: left;
        text-align: left;
        width: 185px;
        padding-top: 2px;
        margin-top: 2px;
    }
    
    
/* FOOTER NAVIGATION AND INFO */
    #partner-logos {
        padding-top: 0px;
        margin-top: 160px;
        /*position: relative;*/
        background-color: white;
    }
    #logo-partner {
        padding: 0px;
        margin: 0px;
    }
    #partner-logos p {
        font-size: .75em;
        font-weight: bold;
        line-height: .85em;
        padding: 0 0 0 5px;
        margin: 0 0 0 5px;
    }
    #footer {
        clear: both;
        font-size: .77em;
        text-align: center;
        padding: 0;
        border-top: 2px solid #c50025;
        border-bottom: 2px solid #000;
        background-color: #fff;        
        }
    #footer-nav li {
        display: inline;
        list-style: none;
        padding: 0 15px;
        margin: 0 15px;
    }
    #footer p{
        font-size: .75em;
        padding: 0px;
        margin: 0px;
        text-align: center;
    }
    
    /* MISC FORMATTING */
    #leftnav p, #rightnav p { 
        margin: 0 0 1em 0; 
    }
    #content p {
        margin: 0 0 0 6px; 
    }
    h1 {
        padding: 0 20px;
    }
    #content h2 {
        margin: 0 0 .5em 0;
    }
    .logo-link {
        padding: 0;
        margin: 0;
        
        
    }
    .RG2G-login {
        float: right;
        position: relative;
        margin-top: -86px;
        padding-top: -86px;
    }


    .xRG2G-login {
        padding-top: -90px;
        margin-top: -90px;
    }

    /* LINKS FOR FLYOUT MENU*/    
    #menu {
        height:160px; 
        margin:0 auto; 
        position:relative;
        margin: 0px 0 0 15px;
    }
    #menu ul {
        margin:0; 
        padding:0; 
        list-style:none; 
        white-space:nowrap; 
        text-align:left; 
        background:url(../images/eee-background.png); 
        padding:2px 0px 0 0px; 
        border-top: 2px solid #ccc;
        border-bottom: 0px solid #ccc;
        border-right: 2px solid #ccc;
        border-left: 2px solid #ccc; 
    }
    #menu li {
        margin:0; 
        padding:0; 
        list-style:none;
    }
    #menu li {
        display:inline-block; 
        display:inline;
    }
    #menu ul {
        position:absolute; 
        left:-9999px;
    }
    #menu ul.level1 {
        position:absolute; 
        left: -7px; 
        top:5px;
        width: 208px;
    }
    #menu a {
        display:block; 
        font:normal .95em verdana,arial,sans-serif; 
        color:#000; 
        line-height:22px; 
        text-decoration:none;
        padding:6px 20px 6px 10px; 
        border-bottom:2px solid #ccc;
    } 
    #menu ul li:hover > ul {
        visibility:visible; 
        left:100%; 
        margin-top:-43px; 
        margin-left:-10px;
    }
    #menu a:hover ul,#menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {
        left:100%; 
        visibility:visible;
    }
    #menu a:hover ul ul, #menu a:hover a:hover ul ul {
        left:34px; 
        padding: 13px 0 13px 0;
    }
    /* style the link hover */
    * html .menu a:hover {
        color:#fff; 
        background:#c50025; 
    }
    .menu :hover > a {
        color:#fff; 
        background:#c50025;
    }
    #menu li a:hover {
        background:#c50025; 
        color: #fff;
    } 
    #menu li:hover > a {
        background:#c50025;
    }
    #menu li a.flyout {
        background: url(../images/arrow.gif) no-repeat right top;
    }
    #menu li a.flyout:hover {
        background:#c50025 url(../images/arrow-white.gif) no-repeat right top;
        color: #fff;
    } 
    #menu li:hover > a.flyout {
        background:#c50025 url(../images/arrow-white.gif) no-repeat right top;
        color: #fff;
    }
    #menu table {
        position:absolute; 
        left:99%; 
        height:0; 
        width:0; 
        border-collapse:collapse; 
        margin-top:-7px; 
        margin-left:-1px;
    }


    /* LINKS GENERAL */    
    .image-link a:{
        text-decoration: none;
    }
    a {
      outline: none;
      font-weight: bold;
      color: #c50025;
      text-decoration: none
    }
    a:hover {
      outline: none;
      font-weight: bold;
      color: #c50025;
      border-bottom: 2px solid #c50025;
    }
    #logo-partner a {
        outline: none;
    }
</style>
<link href="styles/text.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>

    <div id="wrapper-3col">
      <div id="header">
            <a href="../index.html" title=""><img src="../images/logo-link-graphic.gif" alt=" " width="194" height="100" style="border:0px;"  /></a>
        <a href="http://www.realfast2go.com/"><img class="RG2G-login" src="images/rf2g-login-link.gif" alt="" style="border:0px;" /></a></div>
        <div id="content-wrapper">
            <div id="left-nav">
                <div id="menu">
                    <ul class="level1">
                        <li><a href="#url">Home</a></li>
                        <li><a class="flyout" href="#url">Products</a>
                          <ul>
                                <li><a href="#url">product 1</a></li>
                                <li><a href="#url">product 2</a></li>
                          </ul>                        
                        </li>
                    </ul>
                </div>
                <p id="partner-logos"><a href="#"><img src="../images/image2.gif" id="logo-partner" style="border:0px;" /></a></p>
            </div>
            <div id="right">
              <!-- TemplateBeginEditable name="right-column" -->
              <p>third column content</p>
              <!-- TemplateEndEditable -->
          </div>  
            <div id="content-3col">
            <!-- TemplateBeginEditable name="content-area" -->
                   <h1 id="page-title-info_3col">PAGE TITLE</h1>
                <p>PAGE CONTENT</p>
            <!-- TemplateEndEditable -->
          </div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
      </div>
            <div id="footer">
              <!--<div id="partner-logos"><a href="http://www.docusign.com/esignatures/realfast/"><img src="images/docusign02.gif" id="logo-partner" style="border:0px;" /></a></div>-->
               <ul id="footer-nav">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../privacy-policy.html">Privacy Policy</a></li>
                 <li><a href="../legal-info.html">Legal Information</a></li>
                 <li><a href="../sitemap.html">Site Map</a></li>
                    <li><a href="#">Contact Us</a></li>
              </ul>
              <p>2009 Realfast™, Inc. All rights reserved. Other product and company names may be the trademark of their respective owners.</p>
            </div> 
    </div>
</body>
</html>

**LadynRed** · 08-04-2009, 06:28 PM

Do you NEED it to be a DW template ?
If not, you can do one of 2 things - break the pages from the template in DW, or edit the pages in Notepad, remove the editable region tags, save it and re-open the pages in DW, edit in Code viewl

**marioo** · 08-04-2009, 06:32 PM

Thanks for getting back to me.
One requirement is that I cannot edit each page (of 150) individually when there is an update to be made. So yes, I think I need a template. (I thought about trying "includes" but am having problems with the relative path navigation links.)

**LadynRed** · 08-04-2009, 08:55 PM

Is it just the navigation that you were considering includes for ? Includes would certainly be one of the better solutions.

What kinds of problems with the relative path links ? We can probably help you with that

**marioo** · 08-04-2009, 09:21 PM

Oh this gives me hope! (c:
Not doing templates would be wonderful.
The includes would be just for the navigation, the left-hand menu and the footer.
This, from what I understand :

Code:

            <div id="left-nav">
                <div id="menu">
                    <ul class="level1">
                        <li><a href="#url">Home</a></li>
                        <li><a class="flyout" href="#url">Products</a>
                          <ul>
                                <li><a href="#url">product 1</a></li>
                                <li><a href="#url">product 2</a></li>
                          </ul>                        
                        </li>
                    </ul>
                </div>
                <p id="partner-logos"><a href="#"><img src="../images/image2.gif" id="logo-partner" style="border:0px;" /></a></p>
            </div>

would be a file called "nav-menu" or whatever, and the footer would be its own file.
I would place those in a directory called "includes". The other pages in the site that would reference the includes file would be at various levels in the site structure.
Maybe, I'm thinking it all wrong, but a page at "xyz" level and another at "rst" level reference the include file would have separate paths. The paths to the the links are different, some being "../xyz.file.html" or another being "../../rst.anotherfile.html".
I cannot, and don't want to,make the paths absolute, which I'd thought about very briefly and anyway, not to have absolute paths is part of the requirement.
So I guess my basic question is how do I set up the include file to be properly referenced so the links work from HTML files at all levels of the site?
whooo, I need to take a deep breath.
thank you for your help, LadynRed!

**LadynRed** · 08-05-2009, 04:02 PM

Quote:

Maybe, I'm thinking it all wrong, but a page at "xyz" level and another at "rst" level reference the include file would have separate paths. The paths to the the links are different, some being "../xyz.file.html" or another being "../../rst.anotherfile.html".

Perhaps it's more like over-thinking it

Because the includes will be pulled into your other pages, the paths in the included file would then be referenced just as you would from the page itself - in other words you don't need the ../../ path stuff, just use /images/img.gif or page.htm.

**marioo** · 08-05-2009, 04:12 PM

Hi,
so, in DW, I would use "Links relative to Site root" when defining the site?

If that's the case, do you know if I when I would change the definition from relative "Document" to "Site", does that change propagate through all the existing files?

thanks!

**LadynRed** · 08-05-2009, 08:44 PM

Actually, I always use 'links relative to page', not the site root.

**marioo** · 08-08-2009, 10:22 PM

Thank you so much for your help.
all is well. Yippee

**LadynRed** · 08-09-2009, 12:00 PM

Great

Glad we could help.