Picture and element positioning

Sometimes you will want to merge form elements with an illustration:

How to do it

1. Upload a picture to Media files and copy the URL
2. Add a Static content element and insert picture reference

   <img src=COPIED_URL>

3. Add other fields and merge the with the picture field (above)
4. Create a stylesheet extension and link to the solution
   • The outer element of the picture should have the following CSS element

   position: relative;

   • The picture and fields inside should have the following CSS elements

   position: absolute;

   top: [OFFSET]px;

   left: [OFFSET]px;

Sample CSS

 .PAGE_28013 td {
   position: relative;
 }

 #VB_PICTURE { 
   position: absolute; //relative to outer element
   left: 0px; //Upper left corner
   top: 0px;
 }

 #NB_INPUTBOX1 { //Label
   position: absolute; //relative to outer element
   left: 10px;
   top: 10px; //Above input box
 }
 #VB_INPUTBOX1 { //Input
   position: absolute; //relative to outer element
   left: 10px;
   top: 10px;  //Below descriptive label
 }