In ASCII-art, this is what I want to achieve: Relatively higher on the page, three images like this:
---- ----
> | | | |
> | | | |
> | | | | ++
> ---- ---- ++
>
> and, lower on the page, three like this:
>
> ---- ---- ++
> | | | | ++
> | | | |
> | | | |
> ---- ----
>
> ^
> |
> |
> page horiz.
> centerline
>
--where each of the four larger rectangles represents a playing card image,
and each of the the two smaller "+"-built rectangles represents a much
smaller image. The ASCII-art is likely to be a bit off unless your font
metrics match my text editors'; I've attached a small screen shot portion
that's much better than the ASCII and that's a sample of the lower set of
three images. Note that the page horizontal centerline should run between
the two adjacent playing cards.
I now have this UiBinder layout for the lower images (the higher ones are
the same except swap the strings "top" and "bottom"):
<div class='{style.centerer} {style.relative}'>
> <div class='{style.centered}'>
> <g:Image ui:field='card1' resource='{res.card1}' />
> <g:Image ui:field='card2' resource='{res.card2}' />
> <g:Image ui:field='dealer' resource='{res.imgDealer}'
> addStyleNames='{style.top}' />
> </div>
> </div>
>
where the CSS is:
/* The following two classes are derived from */
> /* http://stackoverflow.com/a/10797328/1121892 */
>
> /* Child of this element is class="centered" */
> .centerer {
> text-align: center; /* horizontally */
> }
>
> /* Parent of this element is class="centerer" */
> .centered {
> display: inline-block;
> }
>
> .top {
> position: absolute;
> top: 0;
> width: 100%;
> }
>
The problem is positioning the smaller "dealer" images. In Firefox 20 they
display as intended, but in OmniWeb (Safari-like), Chrome, and IE 10 they
displace horizontally from the intended position to overlay the left corner
of one of the larger rectangles (different larger rectangle in different
browsers).
Currently my app uses only one overall HTMLPanel and all my layout within
is by HTML/CSS. This is my first GWT project and I think maybe it's time I
started using panels for layout but I don't know exactly how to handle this
case to achieve browser-independence, if that is possible.
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
<<attachment: cards.png>>
