How to layout using CSS position:absolute?

[effendi]

I would like to display a large image on the right top corner without affecting other input fields.
In HTML5 I could use CSS, position:absolute.

Any suggestion on how to do this in urcaps’ html ?
Alternatively how would one do it using java ?

+----------------------------------------------------------------+
| TITLE                              +-------------------------+ |
| [input field]                      | LARGE IMAGE             | |
| [input field]                      | LARGE IMAGE             | |
| [input field]                      | LARGE IMAGE             | |
| [input field]                      | LARGE IMAGE             | |
| [input field]                      +-------------------------+ |
| [input field]                                                  |
+----------------------------------------------------------------+

[roman.reiner]

I was able to achieve this by putting img tag on the same line as the input. I have the img set to 25px by 25px but this strategy should work for a large image as well.

Example code:

Html viewer:

Refer to this for setting the image on java side:

Showing an image in a URCap

There is two options for showing an image in PolyScope: ImgComponent - HTML5 [image] concept LabelComponent - Basically an icon + text Label component On the HTML side: <div id="liveImageImgDiv"><label id="liveImage"/></div> In the contribution class: @Label(id = "liveImage") private LabelComponent liveImage; In openView(): try{ liveImage.setImage(ImageIO.read(getClass().getResource("/com/ur/urcap/helloworld/impl/ur.png"))); } catch (java.io.IOException e) { e.printStackTrace(); …

[effendi]

Thanks for the tips.
I opted out using similiar layout as described here:

How to design UI with HTML && CSS like this?

[OTECH] I have try many ways to design UI with css&&html look like the picture , but it seems does not work in urcap… or May be it doesnt support by urcap. Do anyone has Idea about this? Thanks very much！