Aine Sherlock/Sandbox2: Difference between revisions
Jump to navigation
Jump to search
(created second sandbox just for ribbon display experiments) |
(adjusting star positions) |
||
| Line 30: | Line 30: | ||
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 stars on 106px, 306px, and 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. | |||
{{StartColumns|50%}} | {{StartColumns|50%}} | ||
<div style="text-align: center;"> | <div style="text-align: center;"> | ||
<div style="background:clear; width:600px; height:60px;"></div> | <div style="background:clear; width:600px; height:60px;"></div> | ||
<div style="position: relative;">[[File:Awards_General_Neelix_2011.jpg|200|link-Neelix_Award|Neelix Award]][[File:Vega_Award.png|200 | |||
<div style="position: relative;"><div style="position: absolute; left: 306px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Vega Award]]</div>[[File:Awards_General_Neelix_2011.jpg|200|link-Neelix_Award|Neelix Award]][[File:Vega_Award.png|200|link-Vega_Award|Vega Award]][[File:Awards_DutyPost_NatashaYarPinAward_2011.jpg|200|link-Natasha_Yar_Pin|Natasha Yar Pin]]</div> | |||
<div style="position: relative;">[[File:Awards_General_SheathedSword_2011.jpg|200|link-Sheathed_Sword|Sheathed Sword]][[File:Okuda_Award.png|200|link-Okuda_Award|Okuda Award]][[File:Awards_General_1Year.jpg|200|link-1-year_Member|1 Year Member]]</div> | <div style="position: relative;">[[File:Awards_General_SheathedSword_2011.jpg|200|link-Sheathed_Sword|Sheathed Sword]][[File:Okuda_Award.png|200|link-Okuda_Award|Okuda Award]][[File:Awards_General_1Year.jpg|200|link-1-year_Member|1 Year Member]]</div> | ||
{{Column}} | {{Column}} | ||
</div> | </div> | ||
<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: absolute; left: | |||
<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: 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;">[[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}} | ||
| Line 45: | Line 54: | ||
<div style="text-align: center;"> | <div style="text-align: center;"> | ||
<div style="background:clear; width:600px; height:60px;"></div> | <div style="background:clear; width:600px; height:60px;"></div> | ||
<div style="position: relative;">[[File:Awards_General_Neelix_2011.jpg|200|link-Neelix_Award|Neelix Award]][[File:Vega_Award.png|200 | |||
<div style="position: relative;"><div style="position: absolute; left: 306px; top: 12.5px; padding: 0;">[[File:Award-goldstar.png|40px|link=Vega Award]]</div>[[File:Awards_General_Neelix_2011.jpg|200|link-Neelix_Award|Neelix Award]][[File:Vega_Award.png|200|link-Vega_Award|Vega Award]][[File:Awards_DutyPost_NatashaYarPinAward_2011.jpg|200|link-Natasha_Yar_Pin|Natasha Yar Pin]]</div> | |||
<div style="position: relative;">[[File:Awards_General_SheathedSword_2011.jpg|200|link-Sheathed_Sword|Sheathed Sword]][[File:Okuda_Award.png|200|link-Okuda_Award|Okuda Award]][[File:Awards_General_1Year.jpg|200|link-1-year_Member|1 Year Member]]</div> | <div style="position: relative;">[[File:Awards_General_SheathedSword_2011.jpg|200|link-Sheathed_Sword|Sheathed Sword]][[File:Okuda_Award.png|200|link-Okuda_Award|Okuda Award]][[File:Awards_General_1Year.jpg|200|link-1-year_Member|1 Year Member]]</div> | ||
{{Column}} | {{Column}} | ||
</div> | </div> | ||
<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: | |||
<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: 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;">[[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}} | ||
Revision as of 23:16, 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.
Center stars on 106px, 306px, and 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.
      |
     |
|
|
|