Difference between revisions of "Picture and element positioning"

From TempusServa wiki
Jump to navigation Jump to search
old>Admin
old>Admin
Line 9: Line 9:
# Create a stylesheet extension and link to the solution
# Create a stylesheet extension and link to the solution
#* The outer element of the picture should have the following CSS
#* The outer element of the picture should have the following CSS
 
#: position: relative;
  position: relative;
 
#* The picture and fields inside should have the following CSS
#* The picture and fields inside should have the following CSS



Revision as of 13:10, 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>
  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
 }