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 =

 #NB_ELEMENT NAME { 
   position: absolute; //relative to outer element
   left: 10px;
   top: 10px; //Above input box
 }
 #VB_ELEMENT NAME {
   position: absolute; //relative to outer element
   left: 10px;
   top: 10px;  //Below descriptive label
 }