API tools faq
paste
alejandrotecnimaq

instructivo cuadrar logos

alejandrotecnimaq
Oct 2nd, 2020 (edited)
237
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.49 KB | None | 0 0
raw download clone embed print report
  1. Para cuadrar el logo del CDA y el logo de ONAC aprovechando mejor el espacio se debe hacer lo siguiente:
  2.  
  3. 1. Quitarle el espacio en blanco que rodea el logo del CDA
  4.  
  5. 2. Reemplazar esta parte del formato:
  6.  
  7. .datosCDA
  8. {
  9. width:120mm;
  10. height:30mm;
  11. float:right;
  12. vertical-align: middle;
  13. position: relative;
  14. overflow: hidden;
  15. border: 1px solid black;
  16. }
  17. .datosCDA .img-logo-cda{
  18. padding-top:1mm;
  19. position: relative;
  20. left: 1mm;
  21.  
  22. padding-right:1mm;
  23. max-height: 10mm;
  24. width: 15mm;
  25. float: left;
  26. }
  27. .datosCDA .img-logo-onac{
  28. padding-top:1mm;
  29. position: relative;
  30. left: 1mm;
  31.  
  32. padding-right:1mm;
  33. bottom: 1mm;
  34. height: 15mm;
  35. max-width: 16.015mm;
  36. float: left;
  37. }
  38.  
  39. Por esto otro:
  40.  
  41. .datosCDA {
  42. width:120mm;
  43. height:30mm;
  44. float:right;
  45. vertical-align: middle;
  46. position: relative;
  47. overflow: hidden;
  48. border: 1px solid black;
  49. padding-top: 2.5mm;
  50. }
  51. .datosCDA .img-logo{
  52. height: 20mm;
  53. float: left;
  54. }
  55. .datosCDA .img-logo-onac{
  56. margin-left: 2.5mm;
  57. }
  58. .datosCDA .img-logo-onac img{
  59. max-height: 100%;
  60. }
  61.  
  62. 3. Reemplazar esta parte del formato:
  63.  
  64. <tr style="vertical-align: middle;">
  65. <td style='width: 34mm'>
  66. <img class="img-logo-cda" src="/images/logo-cda.png" alt="Logo del CDA" />
  67. <div class="img-logo-onac">
  68. <img class="logo-onac" src='<%= @revision.ensayo ? "/images/logo-onac.png1" : "/images/logo-onac.png" %>' alt="Logo de ONAC">
  69. <img class="logo-onac-bn" src='<%= @revision.ensayo ? "/images/logo-onac.png1" : "/images/logo-onac-bn.png" %>' alt="Logo de ONAC">
  70. <% if [email protected] %>
  71. <div style="font-size:0.5em;text-align:center;overflow:hidden;white-space: nowrap;font-family: Century Gothic;">
  72. ISO/IEC 17020:2012
  73. <br />
  74. <%= @revision.datos_fijos["Número de certifiación"] %>
  75. </div>
  76. <% end %>
  77. </div>
  78. </td>
  79.  
  80. <td>
  81. <div class="datos-fijos">
  82. <%= @revision.datos_fijos["Razón social"] %> </br>
  83. <%= "NIT: #{@revision.datos_fijos["NIT"]}" %> </br>
  84. <%= "Teléfono: #{@revision.datos_fijos["Teléfono 1"]}" %> <%= "- #{@revision.datos_fijos["Teléfono 2"]}" unless @revision.datos_fijos["Teléfono 2"].blank? %></br>
  85. <% unless @revision.datos_fijos["email"].blank? %>
  86. E-mail: <%= @revision.datos_fijos["email"] %> </br>
  87. <% end %>
  88. <%= "Dirección: #{@revision.datos_fijos["Dirección"]}" %> </br>
  89. <%= "Ciudad: #{@revision.datos_fijos["Ciudad"]}" %>
  90. </div>
  91. </td>
  92. </tr>
  93.  
  94.  
  95. Por esto otro:
  96. ===========================================================
  97. Caso 1: Si el logo del CDA es muy alargado horizontalmente:
  98. ===========================================================
  99.  
  100. <tr>
  101. <td>
  102. <img class="img-logo img-logo-cda" src="/images/logo-cda.png" alt="Logo del CDA" />
  103. <div class="img-logo img-logo-onac">
  104. <img class="logo-onac" src='<%= @revision.ensayo ? "/images/logo-onac.png1" : "/images/logo-onac.png" %>' alt="Logo de ONAC">
  105. <img class="logo-onac-bn" src='<%= @revision.ensayo ? "/images/logo-onac.png1" : "/images/logo-onac-bn.png" %>' alt="Logo de ONAC">
  106. <% if [email protected] %>
  107. <div style="font-size:0.5em;text-align:center;overflow:hidden;white-space: nowrap;font-family: Century Gothic;">
  108. ISO/IEC 17020:2012
  109. <br />
  110. <%= @revision.datos_fijos["Número de certifiación"] %>
  111. </div>
  112. <% end %>
  113. </div>
  114. </td>
  115. </tr>
  116. <tr>
  117. <td>
  118. <div class="datos-fijos">
  119. <%= @revision.datos_fijos["Razón social"] %>
  120. <%= "NIT: #{@revision.datos_fijos["NIT"]}" %>
  121. <%= "Teléfono: #{@revision.datos_fijos["Teléfono 1"]}" %> <%= "- #{@revision.datos_fijos["Teléfono 2"]}" unless @revision.datos_fijos["Teléfono 2"].blank? %>
  122. <% unless @revision.datos_fijos["email"].blank? %>
  123. E-mail: <%= @revision.datos_fijos["email"] %>
  124. <% end %>
  125. <%= "Dirección: #{@revision.datos_fijos["Dirección"]}" %>
  126. <%= "Ciudad: #{@revision.datos_fijos["Ciudad"]}" %>
  127. </div>
  128. </td>
  129. </tr>
  130.  
  131. ================================================
  132. Caso 2: Si el logo del CDA es más bien cuadrado:
  133. ================================================
  134.  
  135. <tr>
  136. <td>
  137. <img class="img-logo img-logo-cda" src="/images/logo-cda.png" alt="Logo del CDA" />
  138. <div class="img-logo img-logo-onac">
  139. <img class="logo-onac" src='<%= @revision.ensayo ? "/images/logo-onac.png1" : "/images/logo-onac.png" %>' alt="Logo de ONAC">
  140. <img class="logo-onac-bn" src='<%= @revision.ensayo ? "/images/logo-onac.png1" : "/images/logo-onac-bn.png" %>' alt="Logo de ONAC">
  141. <% if [email protected] %>
  142. <div style="font-size:0.5em;text-align:center;overflow:hidden;white-space: nowrap;font-family: Century Gothic;">
  143. ISO/IEC 17020:2012
  144. <br />
  145. <%= @revision.datos_fijos["Número de certifiación"] %>
  146. </div>
  147. <% end %>
  148. </div>
  149. </td>
  150. <td>
  151. <div class="datos-fijos">
  152. <%= @revision.datos_fijos["Razón social"] %> </br>
  153. <%= "NIT: #{@revision.datos_fijos["NIT"]}" %> </br>
  154. <%= "Teléfono: #{@revision.datos_fijos["Teléfono 1"]}" %> <%= "- #{@revision.datos_fijos["Teléfono 2"]}" unless @revision.datos_fijos["Teléfono 2"].blank? %></br>
  155. <% unless @revision.datos_fijos["email"].blank? %>
  156. E-mail: <%= @revision.datos_fijos["email"] %> </br>
  157. <% end %>
  158. <%= "Dirección: #{@revision.datos_fijos["Dirección"]}" %> </br>
  159. <%= "Ciudad: #{@revision.datos_fijos["Ciudad"]}" %>
  160. </div>
  161. </td>
  162. </tr>
  163.  
  164. 4. Cambiar algún dato de un FUR para que se vuelva a generar
  165.  
  166. 5. Jugar con el parámetro height: 20mm, que se definió en el paso 2 dentro del bloque .datosCDA .img-logo hasta lograr un tamaño óptimo, esto se puede hacer desde la opción "Inspeccionar elemento" para no tener que estar volviendo a generar el FUR. El tamaño mínimo es de 10mm de acuerdo a los criterios del uso del logo de ONAC
  167.  
  168. 6.Cuando se encuentre el tamaño óptimo se debe guardar en la planitlla del formato
  169.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!