14 Replies Latest reply: Aug 4, 2012 6:44 AM by d4com RSS

    Text position in editable region

    d4com

      Hi everyone

       

      i'm really new to this web design stuff and i'm hoping you can help me with a simple text position problem.

       

      On my site i have a background image and an editable region surrounding it, problem is that when i put text in to it the text goes right up against the edge of the frame. Can anyone suggest how i can stop the text going right to the edge?

       

      Thanks

        • 1. Re: Text position in editable region
          MurraySummers CommunityMVP

          First thing you need to understand - an editable region is NOT a layout region.  The layout would be determined by what is *in* the editable region.  Editable regions in and of themselves have no impact on any layout.

           

          Now - to answer your question we would need to see your page's code - can you paste it into a reply here (note - email will not work.  To do this, you will need to come to the webforum and paste your code into a reply).

           

          Just so you'll know, DW will expect you to have a fair amount of familiarity with HTML and CSS.  If you do not, then you are in for a long, hard slog....

          • 2. Re: Text position in editable region
            d4com Community Member

            Thanks for the quick Reply Murray. As regards to a slog... i like a challenge :-)

             

            I'll post the code here in a tic but i will appologisee in advance for the mess :-/

            • 3. Re: Text position in editable region
              d4com Community Member

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

              <head>

              <style type="text/css">

              body {

                        background-image: url(../images/background.jpg);

                        -moz-background-size: cover; background-size: cover;

                        text-align: center;

                        background-repeat: no-repeat;

                        background-color: #000;

              }

               

               

              #content {

                        width: 768px;

                        height: 690px;

                        z-index: 1;

                        left: 108px;

                        top: 213px;

                        background-image: url(../images/content.png);

                        margin-right: auto;

                        margin-left: auto;

                        margin-top: 50px;

                        margin-bottom: 0px;

              }

              #footer {

                        width: 768px;

                        margin-right: auto;

                        margin-left: auto;

                        clear: both;

                        background-image: url(../images/bg.gif);

                        background-repeat: repeat-x;

                        height: 38px;

                        margin-top: 15px;

                        margin-bottom: 0px;

              }

              </style>

               

               

              <link href="../jQuery/css/style.css" rel="stylesheet" type="text/css">

              <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

              <style type="text/css">

              h1,h2,h3,h4,h5,h6 {

                        font-family: Verdana, Geneva, sans-serif;

              }

              h1 {

                        font-size: 14px;

              }

              </style>

              <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

               

               

              <script type="text/xml"></script>

              <script src="../includes/jquery-1.4.2.js" type="text/javascript"></script>

              <script src="../jQuery/js/jquery.jsocial.js" type="text/javascript"></script>

               

               

              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

               

               

              <title>Rochdale Rostrum</title>

              <div align="left"><!-- TemplateBeginEditable name="header" -->header<!-- TemplateEndEditable -->

              <div align="center"><img src="../images/banner.png" alt="banner" width="683" height="103" vspace="20" /></div>

              </div>

              </head>

               

               

              <body>

              <ul id="menubar1" class="MenuBarHorizontal">

                <li><a href="../home.html">HOME</a></li>

                <li><a href="../history.html">HISTORY</a></li>

                <li><a class="MenuBarItemSubmenu" href="../info.html">INFO</a>

                  <ul>

                    <li><a href="../programmee.html">Programmee</a></li>

                    <li><a href="../committee.html">Committee</a></li>

                    <li><a href="../affilliates.html">Affilliates</a></li>

                  </ul>

                </li>

                <li><a href="../gallery.html">GALLERY</a></li>

                <li><a href="../services.html" class="MenuBarItemSubmenu">SERVICES</a>

                  <ul>

                    <li><a href="../speeches.html">Speeches</a></li>

                    <li><a href="../tips.html">Tips &amp; Tricks</a></li>

                  </ul>

                </li>

                <li><a href="../contact.html">CONTACT</a></li>

              </ul>

              <script type="text/javascript">

                        var menubar1 = new Spry.Widget.MenuBar("menubar1");

              </script>

               

               

              <!-- TemplateBeginEditable name="content" -->

              <div id="content"></div>

              <!-- TemplateEndEditable -->

               

               

              <div id="footer">

                <div class="social"></div>

                <script type="text/javascript">

              // BeginOAWidget_Instance_2149023: #social

               

                        $('.social').jsocial({

                                            twitter                    :  '@RochdaleRostrum',

                                            facebook          :  'www.facebook.com/pages/Rochdale-Rostrum/177379978976553',

                                            flickr                    :  '',

                                            delicious          :  '',

                                            linked                    :  '',

                                            youtube                    :  'www.youtube.com/user/rochdalerostrum',

                                            feed                    :  '',

                                            friendfeed          :  '',

                                            digg                    :  '',

                                            lastfm                    :  '',

                                            center                    : false,

                                            inline                    : true,

                                            small                    : false,

                                            newPage                    : true

                                  });

               

               

              // EndOAWidget_Instance_2149023

              </script>

               

               

              <a href="../members.html"><img src="../images/members.png" alt="MEMBERS" name="members" width="100" height="32" id="members" align="right" hspace="5"></a>

              </div>

              </body>

              </html>

              • 4. Re: Text position in editable region
                d4com Community Member

                is that ok pal?

                • 5. Re: Text position in editable region
                  osgood_ CommunityMVP

                  Are you wanting to insert text into the 'content' editable region. if so add some padding to the 'content' css to position the text away from the edge of it. (see below) Note that padding gets added to the overall width of the <div> so to account for that you need to reduce the 'content' <div> width by 30px (see below) because 15px left and right padding have been added the width becomes 738px instead of 768px.

                   

                   

                   

                   

                  #content {

                  width: 738px;

                  padding: 15px;

                  height: 690px;

                  z-index: 1;

                  left: 108px;

                  top: 213px;

                  background-image: url(../images/content.png);

                  margin-right: auto;

                    margin-left: auto;

                  margin-top: 50px;

                  margin-bottom: 0px;

                    }

                   

                   

                  To avoid the tricky stituation regarding padding being added to the width of the <div> you could just use <p></p> tags inside of the 'content' <div>

                   

                  <div id="content">

                  <p>Here is some text</p>

                  </div>

                   

                  Then set the padding on the <p> tag like:

                   

                  #content p {

                  margin: 0;

                  padding: 15px;

                  }

                  • 6. Re: Text position in editable region
                    MurraySummers CommunityMVP

                    Actuallly there are some big errors there (and which version of DW are you using?):

                     

                    1.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                         <title>Rochdale Rostrum</title>

                     

                    You have no editable region around the title.  This will mean that ALL of your pages will have the same title, i.e., you will not be able to edit the title on the child pages.  Normally, when you create a template in DW, you get an editable region placed around the title tag so that you *can* edit it on child pages.  The only way to NOT get this is to manually delete it from the code.  This is actually consistent with the "upside-down" appearance of the rest of the code in the head region, and with the following error.

                     

                    2.  <div align="left"><!-- TemplateBeginEditable name="header" -->header<!-- TemplateEndEditable -->

                         <div align="center"><img src="../images/banner.png" alt="banner" width="683" height="103" vspace="20" /></div>

                         </div>

                         </head>

                     

                    You cannot have div tags in the head region!  How did those get there?

                     

                    3.  Just as you normally get an editable region around the title tag called 'doctitle', you also normally get an editable region in the head (just before </head>) called 'head'.  Your code does not have this region either.

                     

                    I'm surprised that DW allows you to use this page as a template without complaining!  Anyhow, to fix this, change this -

                     

                    <title>Rochdale Rostrum</title>

                     

                    to this -

                     

                    <!-- TemplateBeginEditable name="doctitle" --><title>Rochdale Rostrum</title><!-- TemplateEndEditable -->

                     

                    and this -

                     

                    <div align="left"><!-- TemplateBeginEditable name="header" -->header<!-- TemplateEndEditable -->

                    <div align="center"><img src="../images/banner.png" alt="banner" width="683" height="103" vspace="20" /></div>

                    </div>

                    </head>

                     

                    to this -

                     

                    <!-- TemplateBeginEditable name="head" -->

                    <!-- TemplateEndEditable -->

                    </head>

                     

                    and this -

                     

                    <body>

                     

                    to this -

                     

                    <body>

                    <div align="left"><!-- TemplateBeginEditable name="header" -->header<!-- TemplateEndEditable -->

                    <div align="center"><img src="../images/banner.png" alt="banner" width="683" height="103" vspace="20" /></div>

                    </div>

                     

                    and perhaps that will get you a valid template file.

                     

                    Don't forget to tell how the normal template got into this condition!

                    • 7. Re: Text position in editable region
                      MurraySummers CommunityMVP

                      And by the way, the "vspace" attribute on the image tag has been deprecated in favor of CSS (padding).  It won't cause problems, but your page won't validate with the XHTML doctype and the vspace attribute. The same is true of the "align" attribute which you have used in the <div> tags.

                      • 8. Re: Text position in editable region
                        d4com Community Member

                        Hey thanks guys, you have both really helped me out... it's appreciated.

                         

                        To answer your questions i'm using CS6 and i have been making the templates myself so that would explain the mess of it :-/. still i am learning slowly... lol

                         

                        Thanks again guys

                        • 9. Re: Text position in editable region
                          MurraySummers CommunityMVP

                          I don't know of any way (using CS6) to get a template file that doesn't have those editable regions in the head already placed for you.  Did you manually delete them after creating the template?  Can you remember the method you used to create the template?

                          • 10. Re: Text position in editable region
                            d4com Community Member

                            I just designed a new web page and then saved it as a template, i cant remember deleting the region but i really didnt have a clue a week ago so i probably did it without realising :-/

                            • 11. Re: Text position in editable region
                              MurraySummers CommunityMVP

                              When you saved it, did you use FILE | Save As Template...?  Or did you just use FILE | Save... and save it in the Templates folder with a dwt extension?  I just tested, and that latter method will reproduce your missing editable regions!  OK - that's a bug.

                              • 12. Re: Text position in editable region
                                d4com Community Member

                                im sure i "saved as template" but as i said it was a good week back now :-/

                                • 13. Re: Text position in editable region
                                  MurraySummers CommunityMVP

                                  If you use FILE | Save as Template..., then the editable regions will be automatically added by DW.  If you just use FILE | Save..., or FILE | Save As...., they will not.  I have filed this as a bug.

                                  • 14. Re: Text position in editable region
                                    d4com Community Member

                                    ahh i may have used "save as". good spot :-)