Picture and element positioning

From TempusServa wiki
Revision as of 12:10, 25 September 2013 by old>Admin (→‎How to do it)
Jump to navigation Jump to search

Sample

GaneDiagram.PNG

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
 position: relative;
    • The picture and fields inside should have the following 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
 }