Skip navigation
YetiBlueYeti
YetiBlueYeti Calculating status...
Currently Being Moderated

DW CS3: Template & CSS Rules problems

Apr 24, 2012 7:17 AM

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.

790 Views   7 Replies   Latest reply: codeDawg, Apr 24, 2012 8:53 AM
 
Replies
  • codeDawg
    Currently Being Moderated
    1. codeDawg,
    Apr 24, 2012 7:39 AM   in reply to YetiBlueYeti
    Report

    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

     
    |
    Mark as:
  • YetiBlueYeti
    Currently Being Moderated
    2. YetiBlueYeti,
    Apr 24, 2012 7:44 AM   in reply to codeDawg
    Report

    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 ?

     
    |
    Mark as:
  • codeDawg
    Currently Being Moderated
    3. codeDawg,
    Apr 24, 2012 7:50 AM   in reply to YetiBlueYeti
    Report

    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.

     
    |
    Mark as:
  • YetiBlueYeti
    Currently Being Moderated
    4. YetiBlueYeti,
    Apr 24, 2012 7:58 AM   in reply to codeDawg
    Report

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

     
    |
    Mark as:
  • codeDawg
    Currently Being Moderated
    5. codeDawg,
    Apr 24, 2012 8:06 AM   in reply to YetiBlueYeti
    Report

    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.

     
    |
    Mark as:
  • YetiBlueYeti
    Currently Being Moderated
    6. YetiBlueYeti,
    Apr 24, 2012 8:27 AM   in reply to codeDawg
    Report

    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>

     
    |
    Mark as:
  • codeDawg
    Currently Being Moderated
    7. codeDawg,
    Apr 24, 2012 8:53 AM   in reply to YetiBlueYeti
    Report

    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?

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points