5 Replies Latest reply on Nov 8, 2008 10:20 AM by Newsgroup_User

    Alignment of text in CS4 using the properties panel icons

    paulajane Level 1
      I am not sure if this makes sense. I have always been able to click on the "align" icons on the properties bar and move a paragraph to either left, center, etc without any other paragraph statements moving. On CS3 it was one properties bar. My basic template is 1 column liquid centered. Or I could just click on one of the align options and start a new paragraph in any of the align locations. Now, if I do that, all the paragraphs move. I have tried to apply different CSS rules, but it doesn't seem to matter. Do I need to setup a special rule in my code section? In past versions, I wasn't faced with this problem.

      If I work in the html section of the properties bar, I can align paragraphs or start paragraphs from any of the align locations using the format>align command on the tool bar or the shortcut keys.

      Shouldn't I be able to do the same using the CSS part of the properties panel and the alignment icons on it?

      I am using Vista Ultimate 32-bit.

      Thanks in advanced.
        • 1. Re: Alignment of text in CS4 using the properties panel icons
          Level 7
          This is where knowing code is absolutely essential - it's a good example of
          a hole you have worked yourself into that you cannot (easily) solve in
          Design view only.

          Consider this -

          <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
          <p>Paragraph 2 blah blah blah blah blah blah blah blah blah </p>

          If you click in the first paragraph and use one of those align icons on the
          Property inspector's CSS 'tab', you'll see exactly what you are wanting to
          see. That paragraph's text will align and the next one will not.

          <p>Paragraph 1 blah blah blah blah blah blah blah blah blah <br />
          Paragraph 2 blah blah blah blah blah blah blah blah blah </p>

          This *may* look exactly like the first example in Design view, but if you do
          the same thing, both lines will be aligned, since they are still just ONE
          paragraph.

          It sounds like that is your situation - is it?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "paulajane" <webforumsuser@macromedia.com> wrote in message
          news:gf27dd$b0j$1@forums.macromedia.com...
          >I am not sure if this makes sense. I have always been able to click on the
          > "align" icons on the properties bar and move a paragraph to either left,
          > center, etc without any other paragraph statements moving. On CS3 it was
          > one
          > properties bar. My basic template is 1 column liquid centered. Or I could
          > just
          > click on one of the align options and start a new paragraph in any of the
          > align
          > locations. Now, if I do that, all the paragraphs move. I have tried to
          > apply
          > different CSS rules, but it doesn't seem to matter. Do I need to setup a
          > special rule in my code section? In past versions, I wasn't faced with
          > this
          > problem.
          >
          > If I work in the html section of the properties bar, I can align
          > paragraphs or
          > start paragraphs from any of the align locations using the format>align
          > command
          > on the tool bar or the shortcut keys.
          >
          > Shouldn't I be able to do the same using the CSS part of the properties
          > panel
          > and the alignment icons on it?
          >
          > I am using Vista Ultimate 32-bit.
          >
          > Thanks in advanced.
          >

          • 2. Re: Alignment of text in CS4 using the properties panel icons
            donsingleton Level 1
            quote:

            This is where knowing code is absolutely essential - it's a good example of
            a hole you have worked yourself into that you cannot (easily) solve in
            Design view only.



            Murray, I certainly don't want to disagree with a Adobe Community Expert but I was trying to help Paulajane with this problem, and what I observed was she had code like

            <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
            <p>Paragraph 2 blah blah blah blah blah blah blah blah blah </p>
            <p>Paragraph 3 blah blah blah blah blah blah blah blah blah </p>

            And she had her cursor in Paragraph 2, and it was affecting the other paragraphs. DreamWeaver in CS3 worked just as it should; it was DreamWeaver in CS4 where the problem occurs.

            Since you are an Adobe Community Expert maybe you can explain something to me. For a CSS purist one should always do layout using the box model, unlike html coders like myself that use <table>s inside other <table>s, and I believe you are supposed to use ids or classes, like

            p#left { text-align: left; }
            p#center { text-align: center; }

            and in the html
            <p id="center">
            <p id="left">

            or

            p.left { text-align: left; }
            p.center { text-align: center; }

            and in the html
            <p class="center">
            <p class="left">

            It appears Dreamweaver is cheating and doing it with html, like

            <p align="center">line 1</p>
            <p align="right">line 2</p>
            <p align="left">line 3</p>

            And in fact if Paulajane does it in Dreamweaver CS4 in the HTML mode she can switch the alignments as above, but when on the CSS screen where you have the left, center, right align, and justified buttons they do not work, and this is what I understand her question to be asking.

            It is almost like CS3 let you cheat and do things in HTML rather than CSS, and that CS4 is trying to impose a stricter CSS environment.

            That would be ok if they coupled the left, center, right align, and justified buttons to modify class or id in the code
            • 3. Re: Alignment of text in CS4 using the properties panel icons
              Level 7
              > And she had her cursor in Paragraph 2, and it was affecting the other
              > paragraphs. DreamWeaver in CS3 worked just as it should; it was
              > DreamWeaver in
              > CS4 where the problem occurs.

              Not possible given the approach she described. To affect all three
              paragraphs, she must have been applying the alignment to the container, not
              to an individual paragraph, or allowing DW to create a CSS rule that would
              apply to all three paragraphs.

              > For a CSS purist one should always do layout using the box model, unlike
              > html
              > coders like myself that use <table>s inside other <table>s, and I believe
              > you
              > are supposed to use ids or classes, like

              There is no relation between the clauses in this sentence. Using tables is
              not the antithesis of using the box model. Further, the box model is merely
              a way of thinking about the relationship between margin, padding, and
              borders on any given container, and how they affect the width of that
              element.

              In CS4, with my example content -

              <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
              <p>Paragraph 2 blah blah blah blah blah blah blah blah blah </p>
              <p>Paragraph 3 blah blah blah blah blah blah blah blah blah </p>

              if I click in the middle paragraph and click on one of the alignment
              options, I am prompted to create a new CSS rule. If I then enter a name
              "whatever" for that rule, DW creates it (using antique markup) -

              <style type="text/css">
              <!--
              .whatever {
              text-align: center;
              }
              -->
              </style>

              and adds that class assignment to the affected paragraph -

              <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
              <p class="whatever">Paragraph 2 blah blah blah blah blah blah blah blah blah
              </p>
              <p>Paragraph 3 blah blah blah blah blah blah blah blah blah </p>

              causing it *alone* to be center aligned.

              If, instead, that particular paragraph has an inline style already applied,
              e.g.,

              <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
              <p style="color:red;">Paragraph 2 blah blah blah blah blah blah blah blah
              blah </p>
              <p>Paragraph 3 blah blah blah blah blah blah blah blah blah </p>

              and I repeat the process, DW will add the CSS directly to the inline style -

              <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
              <p style="color:red; text-align: center;">Paragraph 2 blah blah blah blah
              blah blah blah blah blah </p>
              <p>Paragraph 3 blah blah blah blah blah blah blah blah blah </p>

              without further prompting.

              Anyhow, this discussion is a good example for why we are *always* exhorting
              people to SHOW US THE CODE. We can't really intuit or know what really
              happened without seeing the starting code, and knowing the steps....

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "donsingleton" <webforumsuser@macromedia.com> wrote in message
              news:gf2e11$j5l$1@forums.macromedia.com...
              >
              quote:

              This is where knowing code is absolutely essential - it's a good
              > example of
              > a hole you have worked yourself into that you cannot (easily) solve in
              > Design view only.
              >

              >
              > Murray, I certainly don't want to disagree with a Adobe Community Expert
              > but I
              > was trying to help Paulajane with this problem, and what I observed was
              > she had
              > code like
              >
              > <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
              > <p>Paragraph 2 blah blah blah blah blah blah blah blah blah </p>
              > <p>Paragraph 3 blah blah blah blah blah blah blah blah blah </p>
              >
              > And she had her cursor in Paragraph 2, and it was affecting the other
              > paragraphs. DreamWeaver in CS3 worked just as it should; it was
              > DreamWeaver in
              > CS4 where the problem occurs.
              >
              > Since you are an Adobe Community Expert maybe you can explain something to
              > me.
              > For a CSS purist one should always do layout using the box model, unlike
              > html
              > coders like myself that use <table>s inside other <table>s, and I believe
              > you
              > are supposed to use ids or classes, like
              >
              > p#left { text-align: left; }
              > p#center { text-align: center; }
              >
              > and in the html
              > <p id="center">
              > <p id="left">
              >
              > or
              >
              > p.left { text-align: left; }
              > p.center { text-align: center; }
              >
              > and in the html
              > <p class="center">
              > <p class="left">
              >
              > It appears Dreamweaver is cheating and doing it with html, like
              >
              > <p align="center">line 1</p>
              > <p align="right">line 2</p>
              > <p align="left">line 3</p>
              >
              > And in fact if Paulajane does it in Dreamweaver CS4 in the HTML mode she
              > can
              > switch the alignments as above, but when on the CSS screen where you have
              > the
              > left, center, right align, and justified buttons they do not work, and
              > this is
              > what I understand her question to be asking.
              >
              > It is almost like CS3 let you cheat and do things in HTML rather than CSS,
              > and
              > that CS4 is trying to impose a stricter CSS environment.
              >
              > That would be ok if they coupled the left, center, right align, and
              > justified
              > buttons to modify class or id in the code
              >

              • 4. Re: Alignment of text in CS4 using the properties panel icons
                donsingleton Level 1
                quote:

                And she had her cursor in Paragraph 2, and it was affecting the other
                paragraphs. DreamWeaver in CS3 worked just as it should; it was
                DreamWeaver in CS4 where the problem occurs.

                Not possible given the approach she described.


                Actually it is. I saw it. She and I used CrossLoop and I could see her screen as she did it.

                But you did not read what she said she did, you assumed she had certain html code (code using a line break tag within paragraph tags) she did not have, and then you proceeded to cut her down by saying "she worked herself into that she cannot (easily) solve". In other words you belittle her for having something she did not have.

                quote:

                To affect all three
                paragraphs, she must have been applying the alignment to the container, not
                to an individual paragraph, or allowing DW to create a CSS rule that would
                apply to all three paragraphs.


                That is correct, and I think that is what was happening. In CS3 she was used to using the left, center, right buttons and they would change the <p align="..."> tag.
                <p align="center">line 1</p>
                <p align="right">line 2</p>
                <p align="left">line 3</p>
                In CS4 in HTML mode she does not have those buttons, but she can do the same thing with the menu dropdowns. However in CSS mode there are the familiar icons, with no indication in the documentation they are different, and yet when she clicks one of them it changes the rule for <p>, and everything centers, or everything flushes right.

                quote:

                > For a CSS purist one should always do layout using the box model, unlike html
                > coders like myself that use <table>s inside other <table>s, and I believe you
                > are supposed to use ids or classes, like

                There is no relation between the clauses in this sentence. Using tables is
                not the antithesis of using the box model.


                You are very wrong. To a CSS purist, use of table statements to achieve alignment of parts of the screen is an unforgivable sin. One is supposed to use the box model, with containers inside of containers, using CSS to position them, and not use tables inside of tables as we used to do.

                quote:

                Further, the box model is merely a way of thinking about the relationship between margin, padding, and
                borders on any given container, and how they affect the width of that element.


                Not to a CSS purist.

                In CS4, with my example content -

                <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
                <p>Paragraph 2 blah blah blah blah blah blah blah blah blah </p>
                <p>Paragraph 3 blah blah blah blah blah blah blah blah blah </p>

                quote:

                if I click in the middle paragraph and click on one of the alignment
                options, I am prompted to create a new CSS rule. If I then enter a name
                "whatever" for that rule, DW creates it (using antique markup) -

                <style type="text/css">
                <!--
                .whatever {
                text-align: center;
                }
                -->
                </style>

                and adds that class assignment to the affected paragraph -


                Actually what she was experiencing looks like it modified an existing class.

                But assuming you are right and in a left flush document pressing center creates a rule for center that just applies to that one paragraph, how can she name that rule "center", and then how can she apply the "center" rule to the next paragraph she wants centered, and not create yet another special rule. I.E. how can she associate the "center" rule with the center icon.

                quote:

                Anyhow, this discussion is a good example for why we are *always* exhorting
                people to SHOW US THE CODE. We can't really intuit or know what really
                happened without seeing the starting code, and knowing the steps....


                I feel certain that if she had a document that did not seem to work, she would have.

                What she did was say that when she was doing a certain step, which worked perfectly in CS3, it didn't in CS4, and she wanted to know why.

                I don't happen to have either CS3 or CS4 (I have CS2), but I suspect the explanation is that in CS3 DW used the icons to modify the <p align...> tag, and in CS4 those same buttons are modifying the CSS rules. But no where in the text does it say that, or tell her how to easily select one rule or another as she builds her paragraphs.

                She can still do what she wants with the more cumbersome menu dropdown selections, but in CS5 or CS6 she may not even be able to do that, because the <p align> tag is "deprecated" i.e. a feature that is superseded and should be avoided. It may still work now, but it may not in the future. Just like using the <tables> tag for alignment on the screen.

                She can create the rules she needs and use the targeted rule dropdown to select the rule.

                And it will reflect what it is doing in the alignment icons.

                But if she ever clicks on the alignment icons it messes everything up, because they end up changing say the centered rule to being left flush or something like that.

                Either there needs to be a way to assign a rule to each icon, or disable the icons altogether.
                • 5. Re: Alignment of text in CS4 using the properties panel icons
                  Level 7
                  Good luck!

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "donsingleton" <webforumsuser@macromedia.com> wrote in message
                  news:gf4j9q$gl3$1@forums.macromedia.com...
                  >
                  quote:

                  And she had her cursor in Paragraph 2, and it was affecting the other
                  > paragraphs. DreamWeaver in CS3 worked just as it should; it was
                  > DreamWeaver in CS4 where the problem occurs.
                  >
                  > Not possible given the approach she described.

                  >
                  > Actually it is. I saw it. She and I used CrossLoop and I could see her
                  > screen
                  > as she did it.
                  >
                  > But you did not read what she said she did, you assumed she had certain
                  > html
                  > code (code using a line break tag within paragraph tags) she did not have,
                  > and
                  > then you proceeded to cut her down by saying "she worked herself into that
                  > she
                  > cannot (easily) solve". In other words you belittle her for having
                  > something
                  > she did not have.
                  >
                  >
                  quote:

                  To affect all three
                  > paragraphs, she must have been applying the alignment to the container,
                  > not
                  > to an individual paragraph, or allowing DW to create a CSS rule that would
                  > apply to all three paragraphs.

                  >
                  > That is correct, and I think that is what was happening. In CS3 she was
                  > used
                  > to using the left, center, right buttons and they would change the <p
                  > align="..."> tag.
                  > <p align="center">line 1</p>
                  > <p align="right">line 2</p>
                  > <p align="left">line 3</p>
                  > In CS4 in HTML mode she does not have those buttons, but she can do the
                  > same
                  > thing with the menu dropdowns. However in CSS mode there are the familiar
                  > icons, with no indication in the documentation they are different, and yet
                  > when
                  > she clicks one of them it changes the rule for <p>, and everything
                  > centers, or
                  > everything flushes right.
                  >
                  >
                  quote:

                  > For a CSS purist one should always do layout using the box model,
                  > unlike
                  > html
                  > > coders like myself that use <table>s inside other <table>s, and I
                  > > believe you
                  > > are supposed to use ids or classes, like
                  >
                  > There is no relation between the clauses in this sentence. Using tables
                  > is
                  > not the antithesis of using the box model.

                  >
                  > You are very wrong. To a CSS purist, use of table statements to achieve
                  > alignment of parts of the screen is an unforgivable sin. One is supposed
                  > to use
                  > the box model, with containers inside of containers, using CSS to position
                  > them, and not use tables inside of tables as we used to do.
                  >
                  >
                  quote:

                  Further, the box model is merely a way of thinking about the
                  > relationship
                  > between margin, padding, and
                  > borders on any given container, and how they affect the width of that
                  > element.

                  >
                  > Not to a CSS purist.
                  >
                  > In CS4, with my example content -
                  >
                  > <p>Paragraph 1 blah blah blah blah blah blah blah blah blah </p>
                  > <p>Paragraph 2 blah blah blah blah blah blah blah blah blah </p>
                  > <p>Paragraph 3 blah blah blah blah blah blah blah blah blah </p>
                  >
                  >
                  quote:

                  if I click in the middle paragraph and click on one of the alignment
                  > options, I am prompted to create a new CSS rule. If I then enter a name
                  > "whatever" for that rule, DW creates it (using antique markup) -
                  >
                  > <style type="text/css">
                  > <!--
                  > .whatever {
                  > text-align: center;
                  > }
                  > -->
                  > </style>
                  >
                  > and adds that class assignment to the affected paragraph -

                  >
                  > Actually what she was experiencing looks like it modified an existing
                  > class.
                  >
                  > But assuming you are right and in a left flush document pressing center
                  > creates a rule for center that just applies to that one paragraph, how can
                  > she
                  > name that rule "center", and then how can she apply the "center" rule to
                  > the
                  > next paragraph she wants centered, and not create yet another special
                  > rule.
                  > I.E. how can she associate the "center" rule with the center icon.
                  >
                  >
                  quote:

                  Anyhow, this discussion is a good example for why we are *always*
                  > exhorting
                  > people to SHOW US THE CODE. We can't really intuit or know what really
                  > happened without seeing the starting code, and knowing the steps....

                  >
                  > I feel certain that if she had a document that did not seem to work, she
                  > would
                  > have.
                  >
                  > What she did was say that when she was doing a certain step, which worked
                  > perfectly in CS3, it didn't in CS4, and she wanted to know why.
                  >
                  > I don't happen to have either CS3 or CS4 (I have CS2), but I suspect the
                  > explanation is that in CS3 DW used the icons to modify the <p align...>
                  > tag,
                  > and in CS4 those same buttons are modifying the CSS rules. But no where in
                  > the
                  > text does it say that, or tell her how to easily select one rule or
                  > another as
                  > she builds her paragraphs.
                  >
                  > She can still do what she wants with the more cumbersome menu dropdown
                  > selections, but in CS5 or CS6 she may not even be able to do that, because
                  > the
                  > <p align> tag is "deprecated" i.e. a feature that is superseded and should
                  > be
                  > avoided. It may still work now, but it may not in the future. Just like
                  > using
                  > the <tables> tag for alignment on the screen.
                  >
                  > She can create the rules she needs and use the targeted rule dropdown to
                  > select the rule.
                  >
                  > And it will reflect what it is doing in the alignment icons.
                  >
                  > But if she ever clicks on the alignment icons it messes everything up,
                  > because
                  > they end up changing say the centered rule to being left flush or
                  > something
                  > like that.
                  >
                  > Either there needs to be a way to assign a rule to each icon, or disable
                  > the
                  > icons altogether.
                  >