Aine Sherlock/Sandbox2

< Aine Sherlock
Revision as of 19:51, 11 June 2024 by Aine Sherlock (talk | contribs) (new experiment)

My Ribbon Rack Experiments

Current single table.

Awards ServiceRibbons PurpleHeart 2011.jpg
Award-goldstar.png
Award-goldstar.png
Awards ServiceRibbons Commendation.jpg
Awards ServiceRibbons JointMeritoriousUnit 2011.jpg
Awards General Neelix 2011.jpg
Award-goldstar.png
Vega Award.png
Awards DutyPost NatashaYarPinAward 2011.jpg
Award-goldstar.png
Awards ServiceRibbons FirstContact 2011.jpg
Awards ServiceRibbons Peacekeeper 2011.jpg
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
Awards ServiceRibbons Explorers 2011.jpg
Awards General SheathedSword 2011.jpg
Okuda Award.png
Awards General 1Year.jpg
Awards ServiceRibbons TemporalFlow 2011.jpg
Legacy Ribbon.png
Awards ServiceRibbons Graduate.jpg

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.

Award-goldstar.png
Neelix AwardVega AwardNatasha Yar Pin
Sheathed SwordOkuda Award1 Year Member
Award-goldstar.png
Award-goldstar.png
Purple HeartCaptain's CommendationJoint Meritorious Unit Award
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
First Contact RibbonPeacekeeper RibbonExplorer's Ribbon
Defense of Temporal Flow RibbonLegacy RibbonStarfleet Academy Graduate Ribbon


Award-goldstar.png
Neelix AwardVega AwardNatasha Yar Pin
Sheathed SwordOkuda Award1 Year Member
Award-goldstar.png
Award-goldstar.png
Captain's CommendationJoint Meritorious Unit Award
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
First Contact RibbonPeacekeeper RibbonExplorer's Ribbon
Defense of Temporal Flow RibbonLegacy RibbonStarfleet Academy Graduate Ribbon


New Experiment Based Off Wikipedia Article

Using coding from wikipedia. Able to get two columns, correct centering. Need to figure out if I can align to the bottom (so far no go). Next to find out how to get the stars in correctly. So far...janky.

Orders, decorations and medals