Aine Sherlock/Sandbox2: Difference between revisions
Jump to navigation
Jump to search
(adjusting star positions) |
|||
| (17 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
===My Ribbon Rack Experiments=== | ===My Ribbon Rack Experiments=== | ||
Current single table. | Current single table. Problem arises when trying to put two ribbons on a line. Aligns left instead of center. | ||
{| style="margin: 0em auto 0em auto;" border='0' cellspacing='0' | {| style="margin: 0em auto 0em auto;" border='0' cellspacing='0' | ||
|- | |- | ||
| 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> | ||
| Line 68: | Line 73: | ||
<div style="position: relative;">[[File:Awards_ServiceRibbons_TemporalFlow_2011.jpg|200|link-Defense_of_Temporal_Flow_Ribbon|Defense of Temporal Flow Ribbon]][[File:Legacy_Ribbon.png|200|link-Legacy_Ribbon|Legacy Ribbon]][[File:Awards_ServiceRibbons_Graduate.jpg|200|link=Starfleet_Academy_Graduate_Ribbon|Starfleet Academy Graduate Ribbon]]</div> | <div style="position: relative;">[[File:Awards_ServiceRibbons_TemporalFlow_2011.jpg|200|link-Defense_of_Temporal_Flow_Ribbon|Defense of Temporal Flow Ribbon]][[File:Legacy_Ribbon.png|200|link-Legacy_Ribbon|Legacy Ribbon]][[File:Awards_ServiceRibbons_Graduate.jpg|200|link=Starfleet_Academy_Graduate_Ribbon|Starfleet Academy Graduate Ribbon]]</div> | ||
{{EndColumns}} | {{EndColumns}} | ||
==Let's Try again!== | |||
Going to try a weird table thing...we'll see. | |||
Ok, this works well enough. | |||
{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0' | |||
|- | |||
! style="background:grey; width:120px" |{{Ribbons|UFP Medal of Freedom|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Purple Heart|200|1}} | |||
! style="background:grey; width:100px;" |{{Ribbons|Captain's Commendation|200|2}} | |||
|- | |||
! style="background:grey;" |{{Ribbons|Joint Meritorious Unit Award|200|2}} | |||
! style="background:grey;" |{{Ribbons|Prisoner of War Ribbon|200|1}} | |||
! style="background:grey;" |{{Ribbons|Leadership Excellence Ribbon|200|1}} | |||
|- | |||
! style="background:grey; width:200px" |{{Ribbons|Good Conduct Ribbon|200|2}} | |||
! style="background:grey; width:200px" |{{Ribbons|First Contact Ribbon|200|3}} | |||
! style="background:grey; width:200px" |{{Ribbons|Peacekeeper Service Ribbon|200|1}} | |||
|- | |||
! style="background:grey; width:200px" |{{Ribbons|Explorer's Ribbon|200|4}} | |||
! style="background:grey; width:200px" |{{Ribbons|Innovation Ribbon|200|1}} | |||
! style="background:grey; width:200px" |{{Ribbons|Diplomacy Ribbon|200|2}} | |||
|- | |||
! style="background:grey; width:200px" |{{Ribbons|Starfleet Investigation Ribbon|200|1}} | |||
! style="background:grey; width:200px" |{{Ribbons|Defense of Temporal Flow Ribbon|200|3}} | |||
! style="background:grey; width:200px" |{{Ribbons|Department Chief Ribbon|200|1}} | |||
|- | |||
! style="background:grey; width:200px" |{{Ribbons|Maiden Voyage Ribbon|200|1}} | |||
! style="background:grey; width:200px: |{{Ribbons|Legacy Ribbon|200|1}} | |||
! style="background:grey; width:200px" |{{Ribbons|Starfleet Academy Graduate Ribbon|200|1}} | |||
|} | |||
Now let's try with two ribbons on the top row. | |||
{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0' | |||
! style="background:grey; width:200px;" |{{Ribbons|UFP Medal of Freedom|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Purple Heart|200|1}} | |||
|} | |||
{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0' | |||
|- | |||
! style="background:grey; width:200px;" |{{Ribbons|UFP Medal of Freedom|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Purple Heart|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Captain's Commendation|200|2}} | |||
|} | |||
{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0' | |||
! style="background:grey; width:200px;" |{{Ribbons|Joint Meritorious Unit Award|200|2}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Prisoner of War Ribbon|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Leadership Excellence Ribbon|200|1}} | |||
|} | |||
{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0' | |||
! style="background:grey; width:200px;" |{{Ribbons|Good Conduct Ribbon|200|2}} | |||
! style="background:grey; width:200px;" |{{Ribbons|First Contact Ribbon|200|3}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Peacekeeper Service Ribbon|200|1}} | |||
|} | |||
{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0' | |||
! style="background:grey; width:200px;" |{{Ribbons|Explorer's Ribbon|200|4}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Innovation Ribbon|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Diplomacy Ribbon|200|2}} | |||
|} | |||
{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0' | |||
! style="background:grey; width:200px;" |{{Ribbons|Starfleet Investigation Ribbon|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Defense of Temporal Flow Ribbon|200|3}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Department Chief Ribbon|200|1}} | |||
|} | |||
{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0' | |||
! style="background:grey; width:200px;" |{{Ribbons|Maiden Voyage Ribbon|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Legacy Ribbon|200|1}} | |||
! style="background:grey; width:200px;" |{{Ribbons|Starfleet Academy Graduate Ribbon|200|1}} | |||
|} | |||
Latest revision as of 04:36, 24 July 2024
My Ribbon Rack Experiments
Current single table. Problem arises when trying to put two ribbons on a line. Aligns left instead of center.
 |
  |
 | ||||
|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 | |
 |
 |
 |
 |
 |
 |
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.
      |
     |
|
|
|
Let's Try again!
Going to try a weird table thing...we'll see.
Ok, this works well enough.
 |
|
|
|---|---|---|
|
 |
 |
 |
|
|
|
 |
 |
 |
|
 |
 |
|
|
Now let's try with two ribbons on the top row.
|
|
|---|
|
|
|
|---|
|
|
|
|---|
|
|
|
|---|
|
|
|
|---|
|
|
|
|---|
|
|
|
|---|