Aine Sherlock/Sandbox2

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.

New Experiment Based Off Wikipedia Article

Using coding from wikipedia in order to make the display more friendly for both browser and mobile...still janky as the single top ribbon is huge on mobile 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. Need to figure out if I can align to the bottom (so far no go) probably won't work. Next to find out how to get the stars in correctly. So far...janky.

Orders, decorations and medals