Aine Sherlock/Sandbox2: Difference between revisions

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.

@@ Line 1: / Line 1: @@
 ===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'
 |-
@@ Line 74: / Line 74: @@
 {{EndColumns}}
+==Let's Try again!==
-===New Experiment Based Off Wikipedia Article===
+Going to try a weird table thing...we'll see.
-Using coding from wikipedia in order to make the display more friendly for both browser and mobile...<s>still janky as the single top ribbon is huge on mobile</s> turns out mobile just sucks and doesn't do columns and for whatever reason it doesn't size the single top ribbon (and probably won't with two either!) despite having all of the ribbons set to the same px! Able to get two columns, correct centering. <s>Need to figure out if I can align to the bottom (so far no go)</s> probably won't work. Next to find out how to get the stars in correctly. So far...janky.
+Ok, this works well enough.
-==Orders, decorations and medals==
+{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0'
-{{StartColumns|50%}}
-{| style="margin:1em auto; text-align:center;"
-|colspan="3"|[[File:Denali_Invitational_Ribbon.png|200px|link=Denali_Invitational_Ribbon|Denali Invitational Ribbon]]
 |-
-|[[File:Awards_General_Neelix_2011.jpg|200px|link=Neelix_Award|Neelix Award]]
+! style="background:grey; width:120px" |{{Ribbons|UFP Medal of Freedom|200|1}}
-|[[File:Vega_Award.png|200px|2|link=Vega_Award|Vega Award]]
+! style="background:grey; width:200px;" |{{Ribbons|Purple Heart|200|1}}
-|[[File:Awards_DutyPost_NatashaYarPinAward_2011.jpg|200px|link=Natasha_Yar_Pin|Natasha Yar Pin]]
+! style="background:grey; width:100px;" |{{Ribbons|Captain's Commendation|200|2}}
 |-
-|[[File:Awards_General_SheathedSword_2011.jpg|200px|link=Sheathed_Sword|Sheathed Sword]]
+! style="background:grey;" |{{Ribbons|Joint Meritorious Unit Award|200|2}}
-|[[File:Okuda_Award.png|200px|link=Okuda_Award|Okuda Award]]
+! style="background:grey;" |{{Ribbons|Prisoner of War Ribbon|200|1}}
-|[[File:Awards_General_1Year.jpg|200px|link=1-year_Member|1 Year Member]]
+! style="background:grey;" |{{Ribbons|Leadership Excellence Ribbon|200|1}}
 |-
-|}
+! style="background:grey; width:200px" |{{Ribbons|Good Conduct Ribbon|200|2}}
-{{Column}}
+! style="background:grey; width:200px" |{{Ribbons|First Contact Ribbon|200|3}}
-{{StartColumns|50%}}
+! style="background:grey; width:200px" |{{Ribbons|Peacekeeper Service Ribbon|200|1}}
-{| style="margin:1em auto; text-align:center;"
-|colspan="3"|[[File:Awards_ServiceRibbons_MedalOfFreedom_2011.jpg|200px|link=UFP_Medal_of_Freedom|UFP Medal of Freedom]]
 |-
-|[[File:Awards_ServiceRibbons_PurpleHeart_2011.jpg|200px|link=Purple_Heart|Purple Heart]]
+! style="background:grey; width:200px" |{{Ribbons|Explorer's Ribbon|200|4}}
-|[[File:Awards_ServiceRibbons_Commendation.jpg|200px|link=Captain's_Commendation|Captain's Commendation]]
+! style="background:grey; width:200px" |{{Ribbons|Innovation Ribbon|200|1}}
-|[[File:Awards_ServiceRibbons_JointMeritoriousUnit_2011.jpg|200px|link=Joint_Meritorious_Unit_Award|Joint Meritorious Unit Award]]
+! style="background:grey; width:200px" |{{Ribbons|Diplomacy Ribbon|200|2}}
 |-
-|[[File:Leadership_Excellence_Ribbon.png|200px|link=Leadership_Excellence_Ribbon|Leadership Excellence Ribbon]]
+! style="background:grey; width:200px" |{{Ribbons|Starfleet Investigation Ribbon|200|1}}
-|[[File:Awards_ServiceRibbons_GoodConduct_2011.jpg|200px|link=Good_Conduct_Ribbon|Good Conduct Ribbon]]
+! style="background:grey; width:200px" |{{Ribbons|Defense of Temporal Flow Ribbon|200|3}}
-|[[File:Awards_ServiceRibbons_FirstContact_2011.jpg|200px|link=First_Contact_Ribbon|First Contact Ribbon]]
+! style="background:grey; width:200px" |{{Ribbons|Department Chief Ribbon|200|1}}
-|-
-|[[File:Awards_ServiceRibbons_Peacekeeper_2011.jpg|200px|link=Peacekeeper_Service_Ribbon|Peacekeeper Ribbon]]
-|[[File:Awards_ServiceRibbons_Explorers_2011.jpg|200px|link=Explorer's_Ribbon|Explorer's Ribbon]]
-|[[File:Awards_ServiceRibbons_Innovationribbon_2014.jpg|200px|link=Innovation_Ribbon|Innovation Ribbon]]
-|-
-|[[File:Awards_ServiceRibbons_diplomacyribbon_2014.jpg|200px|link=Diplomacy_Ribbon|Diplomacy Ribbon]]
-|[[File:Starfleet_Investigation_Ribbon.png|200px|link=Starfleet_Investigation_Ribbon|Starfleet Investigation Ribbon]]
-|[[File:Awards_ServiceRibbons_TemporalFlow_2011.jpg|200px|link=Defense_of_Temporal_Flow_Ribbon|Defense of Temporal Flow Ribbon]]
-|-
-|[[File:Awards_ServiceRibbons_DepartmentChief.jpg|200px|link=Department_Chief_Ribbon|Department Chief Ribbon]]
-|[[File:Legacy_Ribbon.png|200px|link=Legacy_Ribbon|Legacy Ribbon]]
-|[[File:Awards_ServiceRibbons_Graduate.jpg|200px|link=Starfleet_Academy_Graduate_Ribbon|Starfleet Academy Graduate Ribbon]]
 |-
+! 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}}
 |}
-{{EndColumns}}
-Attempt at using individual ribbon templates.
+Now let's try with two ribbons on the top row.
-<!--{{StartColumns|50%}}-->
+{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0'
-{| style="margin:1em auto; text-align:center;"
+! style="background:grey; width:200px;" |{{Ribbons|UFP Medal of Freedom|200|1}}
-|colspan="3"|{{Ribbons|Denali Invitational Ribbon|200|3}}
+! style="background:grey; width:200px;" |{{Ribbons|Purple Heart|200|1}}
-|-
+|}
-|{{Ribbons|Neelix Award|200|2}}
+{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0'
-|{{Ribbons|Vega Award|200|2}}
-|{{Ribbons|Natasha Yar Pin|200|1}}
-|-
-|{{Ribbons|Sheathed Sword|200|2}}
-|{{Ribbons|Okuda Award|200|1}}
-|{{Ribbons|1-year Member|200|1}}
 |-
+! 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}}
 |}
-<!--{{Column}}-->
+{| style="margin: 1em auto 1em auto;" border='0' cellspacing='0'
-<!--{{StartColumns|50%}}-->
+! style="background:grey; width:200px;" |{{Ribbons|Maiden Voyage Ribbon|200|1}}
-{| style="margin:1em auto; text-align:center;"
+! style="background:grey; width:200px;" |{{Ribbons|Legacy Ribbon|200|1}}
-|colspan="3"|{{Ribbons|UFP Medal of Freedom|200|1}}
+! style="background:grey; width:200px;" |{{Ribbons|Starfleet Academy Graduate Ribbon|200|1}}
-|-
-|{{Ribbons|Purple Heart|200|1}}
-|{{Ribbons|Captain's Commendation|200|2}}
-|{{Ribbons|Joint Meritorious Unit Award|200|2}}
-|-
-|{{Ribbons|Leadership Excellence Ribbon|200|1}}
-|{{Ribbons|Good Conduct Ribbon|200|2}}
-|{{Ribbons|First Contact Ribbon|200|2}}
-|-
-|{{Ribbons|Peacekeeper Service Ribbon|200|1}}
-|{{Ribbons|Explorer's Ribbon|200|4}}
-|{{Ribbons|Innovation Ribbon|200|1}}
-|-
-|{{Ribbons|Diplomacy Ribbon|200|1}}
-|{{Ribbons|Starfleet Investigation Ribbon|200|1}}
-|{{Ribbons|Defense of Temporal Flow Ribbon|200|3}}
-|-
-|{{Ribbons|Department Chief Ribbon|200|1}}
-|{{Ribbons|Legacy Ribbon|200|1}}
-|{{Ribbons|Starfleet Academy Graduate Ribbon|200|1}}
-|-
 |}
-<!--{{EndColumns}}-->

Aine Sherlock/Sandbox2: Difference between revisions

Latest revision as of 04:36, 24 July 2024

My Ribbon Rack Experiments

Let's Try again!

Navigation menu

Search