7 Replies Latest reply: Apr 24, 2012 8:53 AM by codeDawg RSS

    DW CS3: Template & CSS Rules problems

    YetiBlueYeti

      Dreamweaver CS3 Templates and CSS Rules.

       

      I've built a basic html page with a header, navigation links and main content area, then saved this as a template with the content area as the edit region.

       

      When I create new html pages from this template I want to insert Divs in the edit region for each new page, which I can successfully do, but for some reason Dreamweaver is not allowing me to create new CSS Rules for each new Div? So I'm not able to control position, text layout, colours etc for the new content. So my question is how do I do this?

       

      I got around this with the current website by creating the template with virtually all of the content for the entire website firstly, then deleting as necessary for each page, which I know is the wrong way to build html site pages from a template!

       

      I wonder if someone could please point me in the right direction to get me back on track? Any pointers would be very much appreciated.

       

      Thanks in advance.

        • 1. Re: DW CS3: Template & CSS Rules problems
          codeDawg Community Member

          Make sure you have an editable region in the <head> portion of your template.

          This is where your new CSS and/or your links to external CSS files go.

          (And meta tags and javascript too.)

           

          ~codeDawg

          • 2. Re: DW CS3: Template & CSS Rules problems
            YetiBlueYeti

            Thanks for the help - how do I do this correctly? I've tried selecing the head region (in Code view) where the CSS are located and choosing this area as an edit region it just doest not work ?

            • 3. Re: DW CS3: Template & CSS Rules problems
              codeDawg Community Member

              I should have written my comment like this:

              Make sure you have an editable template region in the <head> portion of your html.

               

              You have to do this on the template file - not the html file.

              • 4. Re: DW CS3: Template & CSS Rules problems
                YetiBlueYeti

                Hi. I've just tried this and for some reason DW automatically always puts the edit region below the body tag, no matter where I place the edit region inbetween the <head> and </head> ?

                • 5. Re: DW CS3: Template & CSS Rules problems
                  codeDawg Community Member

                  Hmmmm - do you have anything in the head region?  Like a meta tag?

                  It might be helpful if I can have a look at your template or html file.

                  • 6. Re: DW CS3: Template & CSS Rules problems
                    YetiBlueYeti

                    Yes, there is a meta tag at the start of the CSS rules. Here's a copy and paste of the code generated in DW CS3. Template was created from a html doc...

                     

                    <!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>Untitled Document</title>

                    <style type="text/css">

                    <!--

                    body {

                        background-color: #FFFFFF;

                        margin-left: 0px;

                        margin-top: 0px;

                        margin-right: 0px;

                        margin-bottom: 0px;

                    }

                    body,td,th {

                        font-family: Arial, Helvetica, Helvetica Neue, Verdana;

                        font-size: medium;

                    }

                    #container {

                        background-color: #E6E6E6;

                        width: 900px;

                        margin-right: auto;

                        margin-left: auto;

                        text-align: center;

                    }

                    #banner_image {

                        padding-top: 5px;

                        padding-bottom: 5px;

                        background-color: #FFFFFF;

                        margin-right: auto;

                        margin-left: auto;

                    }

                    #navigation {

                        background-color: #E6E6E6;

                        text-align: center;

                        padding: 10px;

                    }

                    #navigation ul {

                        margin: 0px;

                        padding: 0px;

                    }

                    #navigation li {

                        list-style-type: none;

                        display: inline;

                        margin-right: 40px;

                        margin-left: 40px;

                    }

                    #navigation a {

                        color: #333333;

                        font-size: 90%;

                        text-decoration: none;

                    }

                    #navigation a:hover {

                        color: #FF3300;

                        font-size: 90%;

                        text-decoration: none;

                    }

                    #spacer {

                        background-color: #E6E6E6;

                        text-align: center;

                        padding: 10px;

                        margin-top: 10px;

                        margin-right: 25px;

                        margin-bottom: 10px;

                        margin-left: 25px;

                        font-size: small;

                    }

                    #content_area {

                        background-color: #666666;

                        margin-top: 10px;

                        margin-right: 25px;

                        margin-bottom: 10px;

                        margin-left: 25px;

                        padding-top: 20px;

                        padding-right: 10px;

                        padding-bottom: 20px;

                        padding-left: 10px;

                    }

                    #copyright_footer {

                        background-color: #FFFFFF;

                        text-align: center;

                        padding: 10px;

                        font-size: small;

                        margin-top: 10px;

                        margin-right: 0px;

                        margin-bottom: 10px;

                        margin-left: 0px;

                        clear: both;

                    }

                    #navigation_lower {

                        background-color: #E6E6E6;

                        text-align: center;

                        padding: 10px;

                    }

                    #navigation_lower ul {

                        margin: 0px;

                        padding: 0px;

                    }

                    #navigation_lower li {

                        list-style-type: none;

                        display: inline;

                        margin-right: 40px;

                        margin-left: 40px;

                    }

                    #navigation_lower a {

                        color: #333333;

                        font-size: 90%;

                        text-decoration: none;

                    }

                    #navigation_lower a:hover {

                        color: #FF3300;

                        font-size: 90%;

                        text-decoration: none;

                    }

                    -->

                    </style>

                     

                     

                    </head>

                    • 7. Re: DW CS3: Template & CSS Rules problems
                      codeDawg Community Member

                      I'm not seeing any template information in the code.

                      Looking for something like:

                       

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

                      <html><!-- InstanceBegin template="/Templates/10-issue-norightsidebars.dwt" codeOutsideHTMLIsLocked="false" -->

                      <head>

                      <!-- InstanceBeginEditable name="meta" -->

                       

                      <!-- InstanceEndEditable -->

                      </head>

                       

                      Is your page on a live server?