8 Replies Latest reply on Apr 22, 2008 5:51 PM by Marcelo Leiras

    Help to make a layout

    Marcelo Leiras Newbie

      Hi,

      i have to do some like this:

      ________________________
      p p p p p p p | t t t t t t t t t t
      p p p p p p p | t t t t t t t t t t
      p p p p p p p | t t t t t t t t t t
      p p p p p p p | t t t t t t t t t t
      ___________ t t t t t t t t t t
      t t t t t t t t t t t t t t t t t t t t t
      t t t t t t t t t t t t t t t t t t t t t
      t t t t t t t t t t t t t t t t t t t t t
      ________________________

      I have a picture (p) and a text (t) that holds it. The text must be justfied.
      I'm trying to use t:panelGrig and h:panelGrid, but with no success.
      Any idea? Thanks a lot!

        • 1. Re: Help to make a layout
          Sergey Smirnov Master

          why you need a component for such simple stuff?

          • 2. Re: Help to make a layout
            Marcelo Leiras Newbie

            I don't need a component. I just need to make this result. My code is not working. Take a look please:

            <rich:panel style="margin-left:auto; margin-right:auto; text-align: justify;border: 0px; width:200px; background-color:#696969;">
            <rich:panel style="margin-left:0px; margin-top:0px;border: 0px; width:50px; height: 50px; background-color: #000000;">
            </rich:panel>
            <h:outputText style="vertical-align: top;" value="In Egypt, we find the earliest detailed records of warfare recorded thousands of years ago, but we also find the cemeteries and monuments of the world's last global war, World War II. In Egypt, we find some of the first written words of civilization, but we also find great thinkers and writers through the Greek period, into the Christian era, the archaic Islamic period and even modern Nobel Literates." />
            </rich:panel>
            


            The text appears under the panel, but i want it hold the panel. Any sugestion?


            • 3. Re: Help to make a layout
              Sergey Smirnov Master

              I do not see any image in your code snippet, do you?

              • 4. Re: Help to make a layout
                Marcelo Leiras Newbie

                Hi Sergey,

                my intention was put the image inside a panel. But, here is the code with the image.

                <rich:panel style="margin-left:auto; margin-right:auto; text-align: justify;border: 0px; width:200px; background-color: #696969;">
                <h:graphicImage url="/imagens/sem_foto.gif" height="50" width="50" style="margin-left:0px; vertical-align: top;" />
                <h:outputText style="vertical-align: top;" value="In Egypt, we find the earliest detailed records of
                warfare recorded thousands of years ago, but we also find the cemeteries and monuments of the world's last global war, World War II. In Egypt, we find some of the first written words of civilization, but we also find great thinkers and writers through the Greek period, into the Christian era, the archaic Islamic period and even modern Nobel Literates." />
                </rich:panel>
                


                It does not work too. Appears just one line at the right side of the image, and the rest of the text stays under the image.


                • 5. Re: Help to make a layout
                  Sergey Smirnov Master

                  you were close. Just a little amount of magic powder is required. Put style="float:left" as an attribute of the graphic image.

                  However, do you really need this rich:panel if you reset all its styles?

                  May be just:

                  <p style="text-align: justify;width:200px; background-color: #696969;">
                   <h:graphicImage url="/imagens/sem_foto.gif" height="50" width="50" style="float:left" />
                   <h:outputText value="......" />
                  </p>


                  • 6. Re: Help to make a layout
                    Marcelo Leiras Newbie

                    Great magic Sergey! It works perfectly with the image! The secret was style="float:left".
                    But, i really need to put a rich:panel instead the h:graphicImage, keeping the same effect. Is there any way?

                    • 7. Re: Help to make a layout
                      Sergey Smirnov Master

                      Did you try to add float:left to the included panel already? Instead of image, the panel (actually, it is a DIV) requires the width style defined explicitly. As soon as you already have width:50px defined, you are Ok with that.

                      • 8. Re: Help to make a layout
                        Marcelo Leiras Newbie

                        It works with the panel too! Thanks a lot!