putting two Anchor objects one below the other without "<BR>" tag

[Magnus]

Hi,

I have two Anchor objects, an image and a label, and I would like to
put the label below the image.

The only way I know is to put a BR tag between them:

add (new HTML ("<br>"));

But this results in to much vertical space, which I do not want.
I also tried "<p>".

How can I put a newline without vertical space?

The two Anchor objects live in a FlowPanel.

Thanks
Magnus

[Ben Imp]

There are many ways of laying out a web page. The simplest in your
case might be to add both widgets to a VerticalPanel that then lives
inside of that FlowPanel you mention. You could then use CSS and make
the VerticalPanel have little to no space between its cells.

Another, and perhaps a more correct, way would be to give both of
those elements ids or distinct CSS classes and then use CSS
positioning.

http://www.w3schools.com/css/css_positioning.asp

-Ben

[Magnus]

Hi,

I migrated my app to strict mode, i. e. not using quirks mode panels
like VerticalPanel.

Thank you for the second recommendation. I am not used to work with
CSS in detail. Which property should I use to position my anchors?

Thanks
Magnus

[Ben Imp]

That is kind of a tricky question to answer, as it kind of depends on
how you want to do your whole page.

The URL I posted above has interactive demos to show you how each of
them work, so you should be able to get a good idea of which one fits
your situation best. Just play with them until you get a good feel
for how they should work.

Also, you needn't only use a VerticalPanel. Any table based panel
would work. VerticalPanel is just the simplest, since it only allows
a single column.

-Ben

[Daniel Simons]

I think the css property you are looking for is "display:block". You can assign this to your image or wrap your image in a div (divs have block display by default).

Daniel Simons

> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>

[Thomas Broyer]

You can use display:block on a CSS stylesheet, or wrap eahc Anchor (or only one of them actually) into a SimplePanel.

(btw the "extra space" comes from the HTML widget, which itself is a <div>, maybe try with an InlineHTML widget instead)

[Magnus]

Hi,

display:block does the newline as wanted without vertical space, but
it removes the centering of my image. .-/

I made the image centered by adding text-align:center to the
surrounding panel...

Magnus

[Magnus]

Strict Mode:

Maybe I misunderstood something, but I learned that all table-based
layouts are bad for Strict Mode, i. e. VerticalPanel, HorizontalPanel,
but also FlexTable and so on...

Is this wrong?

Magnus