Aine Sherlock/Sandbox2: Difference between revisions
Jump to navigation
Jump to search
(adjusting star positions) |
(updates to formulas and positions) |
||
| Line 9: | Line 9: | ||
! style="background:clear; width:200px" | | ! style="background:clear; width:200px" | | ||
! style="background:grey; width:200px" |{{Ribbons|Purple Heart|200|1}} | ! style="background:grey; width:200px" |{{Ribbons|Purple Heart|200|1}} | ||
! style="background:grey; width:200px" |{{Ribbons|Captain's Commendation|200| | ! style="background:grey; width:200px" |{{Ribbons|Captain's Commendation|200|3}} | ||
! style="background:grey; width:200px" |{{Ribbons|Joint Meritorious Unit Award|200|1}} | ! style="background:grey; width:200px" |{{Ribbons|Joint Meritorious Unit Award|200|1}} | ||
|- | |- | ||
| Line 31: | Line 31: | ||
Partial example to experiment with centering 2 ribbons on line. Got the columns, and now have stars overlaying ribbons with proper links to ribbon pages! Thanks Noa! Lower example shows ribbon removed from top row to show how it properly centers. | Partial example to experiment with centering 2 ribbons on line. Got the columns, and now have stars overlaying ribbons with proper links to ribbon pages! Thanks Noa! Lower example shows ribbon removed from top row to show how it properly centers. | ||
Center | For 3 ribbons per row: | ||
Center star on ribbon 1 106px, on ribbon 2 306px, and on ribbon 3 506px. Put div style="position: absolute; left: px; top:12.5 etc after div style="position: relative etc. For 3 stars, plus or minus 56px from center star position. | |||
For two stars, first star is single star position minus 38, second star is previous formula but plus 38. | |||
For 2 ribbons per row: | |||
Center star on ribbon 1 206, on ribbon 2 406 . Other formulas follow suite. | |||
{{StartColumns|50%}} | {{StartColumns|50%}} | ||
| Line 44: | Line 49: | ||
<div style="text-align: center;"> | <div style="text-align: center;"> | ||
<div style="position: relative;">[[File:Awards_ServiceRibbons_PurpleHeart_2011.jpg|200|link-Purple_Heart|Purple Heart]][[File:Awards_ServiceRibbons_Commendation.jpg|200|link-Captain's_Commendation|Captain's Commendation]][[File:Awards_ServiceRibbons_JointMeritoriousUnit_2011.jpg|200|link-Joint_Meritorious_Unit_Award|Joint Meritorious Unit Award]]</div> | <div style="position: relative;"><div style="position: relative;"><div style="position: absolute; left: 268px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Captain's Commendation]]</div><div style="position: absolute; left: 344px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Captain's Commendation]]</div>[[File:Awards_ServiceRibbons_PurpleHeart_2011.jpg|200|link-Purple_Heart|Purple Heart]][[File:Awards_ServiceRibbons_Commendation.jpg|200|link-Captain's_Commendation|Captain's Commendation]][[File:Awards_ServiceRibbons_JointMeritoriousUnit_2011.jpg|200|link-Joint_Meritorious_Unit_Award|Joint Meritorious Unit Award]]</div> | ||
<div style="position: relative;"><div style="position: absolute; left: 106px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=First Contact Ribbon]]</div><div style="position: absolute; left: 450px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div><div style="position: absolute; left: 506px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div><div style="position: absolute; left: 562px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div>[[File:Awards_ServiceRibbons_FirstContact_2011.jpg|200|link=First_Contact_Ribbon|First Contact Ribbon]][[File:Awards_ServiceRibbons_Peacekeeper_2011.jpg|200|link=Peacekeeper_Service_Ribbon|Peacekeeper Ribbon]][[File:Awards_ServiceRibbons_Explorers_2011.jpg|200|link=Explorer's_Ribbon|Explorer's Ribbon]]</div> | <div style="position: relative;"><div style="position: absolute; left: 106px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=First Contact Ribbon]]</div><div style="position: absolute; left: 450px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div><div style="position: absolute; left: 506px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div><div style="position: absolute; left: 562px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div>[[File:Awards_ServiceRibbons_FirstContact_2011.jpg|200|link=First_Contact_Ribbon|First Contact Ribbon]][[File:Awards_ServiceRibbons_Peacekeeper_2011.jpg|200|link=Peacekeeper_Service_Ribbon|Peacekeeper Ribbon]][[File:Awards_ServiceRibbons_Explorers_2011.jpg|200|link=Explorer's_Ribbon|Explorer's Ribbon]]</div> | ||
| Line 62: | Line 67: | ||
<div style="text-align: center;"> | <div style="text-align: center;"> | ||
<div style="position: relative;">[[File:Awards_ServiceRibbons_Commendation.jpg|200|link-Captain's_Commendation|Captain's Commendation]][[File:Awards_ServiceRibbons_JointMeritoriousUnit_2011.jpg|200|link-Joint_Meritorious_Unit_Award|Joint Meritorious Unit Award]]</div> | <div style="position: relative;"><div style="position: absolute; left: 168px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Captain's Commendation]]</div><div style="position: absolute; left: 244px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Captain's Commendation]]</div>[[File:Awards_ServiceRibbons_Commendation.jpg|200|link-Captain's_Commendation|Captain's Commendation]][[File:Awards_ServiceRibbons_JointMeritoriousUnit_2011.jpg|200|link-Joint_Meritorious_Unit_Award|Joint Meritorious Unit Award]]</div> | ||
<div style="position: relative;"><div style="position: absolute; left: 106px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=First Contact Ribbon]]</div><div style="position: absolute; left: 450px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div><div style="position: absolute; left: 506px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div><div style="position: absolute; left: 562px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div>[[File:Awards_ServiceRibbons_FirstContact_2011.jpg|200|link=First_Contact_Ribbon|First Contact Ribbon]][[File:Awards_ServiceRibbons_Peacekeeper_2011.jpg|200|link=Peacekeeper_Service_Ribbon|Peacekeeper Ribbon]][[File:Awards_ServiceRibbons_Explorers_2011.jpg|200|link=Explorer's_Ribbon|Explorer's Ribbon]]</div> | <div style="position: relative;"><div style="position: absolute; left: 106px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=First Contact Ribbon]]</div><div style="position: absolute; left: 450px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div><div style="position: absolute; left: 506px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div><div style="position: absolute; left: 562px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Explorer's Ribbon]]</div>[[File:Awards_ServiceRibbons_FirstContact_2011.jpg|200|link=First_Contact_Ribbon|First Contact Ribbon]][[File:Awards_ServiceRibbons_Peacekeeper_2011.jpg|200|link=Peacekeeper_Service_Ribbon|Peacekeeper Ribbon]][[File:Awards_ServiceRibbons_Explorers_2011.jpg|200|link=Explorer's_Ribbon|Explorer's Ribbon]]</div> | ||
Revision as of 23:31, 14 November 2022
My Ribbon Rack Experiments
Current single table.
 |
  |
 | ||||
|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 | |
 |
 |
 |
 |
 |
 |
Partial example to experiment with centering 2 ribbons on line. Got the columns, and now have stars overlaying ribbons with proper links to ribbon pages! Thanks Noa! Lower example shows ribbon removed from top row to show how it properly centers.
For 3 ribbons per row: Center star on ribbon 1 106px, on ribbon 2 306px, and on ribbon 3 506px. Put div style="position: absolute; left: px; top:12.5 etc after div style="position: relative etc. For 3 stars, plus or minus 56px from center star position. For two stars, first star is single star position minus 38, second star is previous formula but plus 38.
For 2 ribbons per row: Center star on ribbon 1 206, on ribbon 2 406 . Other formulas follow suite.
      |
     |
|
|
|