Difference between revisions of "Picture and element positioning"

From TempusServa wiki
Jump to navigation Jump to search
old>Admin
old>Admin
Line 1: Line 1:
=== Sample ===
=== Sample ===
 
[[File:GaneDiagram.PNG]]


=== How to do it ===
=== How to do it ===

Revision as of 13:07, 25 September 2013

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>
  1. Add other fields and merge the with the picture field (above)
  2. 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
 }