Help to make a layout

[leiras]

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!

[sergeysmirnov]

why you need a component for such simple stuff?

[leiras]

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?

[sergeysmirnov]

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

[leiras]

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.

[sergeysmirnov]

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>

[leiras]

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?

[sergeysmirnov]

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.

[leiras]

It works with the panel too! Thanks a lot!