Template:WikiNav: Difference between revisions

From BIONICLEsector01
mNo edit summary
(I'm testing this layout out for awhile...)
Line 1: Line 1:
<div class="wikiNav" style="width:500px; left:50%; margin-left:-300px;">
<div class="wikiNav" style="width:1100px; left:50%; margin-left:-550px;">
<div class="wikiNavLinks">
<div class="wikiNavLinks">
<div class="wikiNavMainPage" style="text-align:center;">
<div class="wikiNavMainPage" style="text-align:center;">
<!---a line break here will add in a p element and mess up the formatting---><!---class needed to give images opacity on hover--->
<!---a line break here will add in a p element and mess up the formatting---><!---class needed to give images opacity on hover--->
<div style="display:table;border-spacing:1px;margin: 0 auto;">
<div style="display:table;border-spacing:1px;margin: 0 auto;">
<div style="display:table-row;">[[Characters|<img>http://biosector01.com/images/mpnav/new/g1char.png</img>]][[Locations|<img>http://biosector01.com/images/mpnav/new/g1loc.png</img>]][[Objects|<img>http://biosector01.com/images/mpnav/new/g1obj.png</img>]][[Powers|<img>http://biosector01.com/images/mpnav/new/g1pow.png</img>]][[Society|<img>http://biosector01.com/images/mpnav/new/g1soc.png</img>]][[Rahi|<img>http://biosector01.com/images/mpnav/new/rahi.png</img>]]</div>
<div style="display:table-row;">[[Characters|<img>http://biosector01.com/images/mpnav/new/g1char.png</img>]][[Locations|<img>http://biosector01.com/images/mpnav/new/g1loc.png</img>]][[Objects|<img>http://biosector01.com/images/mpnav/new/g1obj.png</img>]][[Powers|<img>http://biosector01.com/images/mpnav/new/g1pow.png</img>]][[Society|<img>http://biosector01.com/images/mpnav/new/g1soc.png</img>]][[Rahi|<img>http://biosector01.com/images/mpnav/new/rahi.png</img>]][[LEGO|<img>http://biosector01.com/images/mpnav/new/lego.png</img>]][[BIONICLEsector01:About|<img>http://biosector01.com/images/mpnav/new/bs01.png</img>]][[Hero Factory|<img>http://biosector01.com/images/mpnav/new/hf.png</img>]][[Saga Guides|<img>http://biosector01.com/images/mpnav/new/sg.png</img>]]</div>
<!---end 1st row navigation--->
<!---end 1st row navigation--->
<div style="display:table-row;">[[Sapient Species|<img>http://biosector01.com/images/mpnav/new/sapspe.png</img>]][[Flora|<img>http://biosector01.com/images/mpnav/new/flora.png</img>]][[Tools|<img>http://biosector01.com/images/mpnav/new/tools.png</img>]][[Vehicles|<img>http://biosector01.com/images/mpnav/new/veh.png</img>]][[Events|<img>http://biosector01.com/images/mpnav/new/events.png</img>]][[Creatures|<img>http://biosector01.com/images/mpnav/new/g1cre.png</img>]]</div>
<div style="display:table-row;">[[Sapient Species|<img>http://biosector01.com/images/mpnav/new/sapspe.png</img>]][[Flora|<img>http://biosector01.com/images/mpnav/new/flora.png</img>]][[Tools|<img>http://biosector01.com/images/mpnav/new/tools.png</img>]][[Vehicles|<img>http://biosector01.com/images/mpnav/new/veh.png</img>]][[Events|<img>http://biosector01.com/images/mpnav/new/events.png</img>]][[Creatures|<img>http://biosector01.com/images/mpnav/new/g1cre.png</img>]][[TECHNIC|<img>http://biosector01.com/images/mpnav/new/technic.png</img>]][[BIONICLEsector01:Policy|<img>http://biosector01.com/images/mpnav/new/policies.png</img>]][[Media|<img>http://biosector01.com/images/mpnav/new/media.png</img>]][[Timeline|<img>http://biosector01.com/images/mpnav/new/time.png</img>]]</div>
<!---end 2nd row navigation--->
<!---end 2nd row navigation--->
<div style="display:table-row;">[[Characters|<img>http://biosector01.com/images/mpnav/new/g2char.png</img>]][[Locations|<img>http://biosector01.com/images/mpnav/new/g2loc.png</img>]][[Objects|<img>http://biosector01.com/images/mpnav/new/g2obj.png</img>]][[Powers|<img>http://biosector01.com/images/mpnav/new/g2pow.png</img>]][[Society|<img>http://biosector01.com/images/mpnav/new/g2soc.png</img>]][[Creatures|<img>http://biosector01.com/images/mpnav/new/g2cre.png</img>]]</div>
<div style="display:table-row;">[[Characters|<img>http://biosector01.com/images/mpnav/new/g2char.png</img>]][[Locations|<img>http://biosector01.com/images/mpnav/new/g2loc.png</img>]][[Objects|<img>http://biosector01.com/images/mpnav/new/g2obj.png</img>]][[Powers|<img>http://biosector01.com/images/mpnav/new/g2pow.png</img>]][[Society|<img>http://biosector01.com/images/mpnav/new/g2soc.png</img>]][[Creatures|<img>http://biosector01.com/images/mpnav/new/g2cre.png</img>]][[BIONICLE|<img>http://biosector01.com/images/mpnav/new/bionicle.png</img>]][[BIONICLEsector01:Sources|<img>http://biosector01.com/images/mpnav/new/sources.png</img>]][[Sets|<img>http://biosector01.com/images/mpnav/new/sets.png</img>]][[:Category:Reviews|<img>http://biosector01.com/images/mpnav/new/reviews.png</img>]]</div>
<!---end 3rd row navigation--->
</div>
<div style="display:table-row;">[[LEGO|<img>http://biosector01.com/images/mpnav/new/lego.png</img>]][[TECHNIC|<img>http://biosector01.com/images/mpnav/new/technic.png</img>]][[BIONICLE|<img>http://biosector01.com/images/mpnav/new/bionicle.png</img>]][[Hero Factory|<img>http://biosector01.com/images/mpnav/new/hf.png</img>]][[Media|<img>http://biosector01.com/images/mpnav/new/media.png</img>]][[Sets|<img>http://biosector01.com/images/mpnav/new/sets.png</img>]]</div>
<!---end 4th row navigation--->
<div style="display:table-row;">[[BIONICLEsector01:About|<img>http://biosector01.com/images/mpnav/new/bs01.png</img>]][[BIONICLEsector01:Policy|<img>http://biosector01.com/images/mpnav/new/policies.png</img>]][[BIONICLEsector01:Sources|<img>http://biosector01.com/images/mpnav/new/sources.png</img>]][[Saga Guides|<img>http://biosector01.com/images/mpnav/new/sg.png</img>]][[Timeline|<img>http://biosector01.com/images/mpnav/new/time.png</img>]][[:Category:Reviews|<img>http://biosector01.com/images/mpnav/new/reviews.png</img>]]</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><noinclude><!--
Reasoning behind numbers:
link width * number of links = 7 * (100/7) = 7 * ~14% = 98%
link container width = 100% - (14% * 2.5) = 100% - (35%) = 65%
link width * number of links * (.01 * link container width) = 98% * .65 = 63.7% of parent's width
wikinui width = wikinui height = link container height
link container width / link container height ≈ 6 (tested at two different page widths)
link container height = x in (63.7%/x = 6) = x in (63.7%/6 = x) = 10.6166667%
wikinui width = wikinui height = 10.6166667%
total width / page width = 74.773289
amount to move total width to center = 100 - 74.773289  = 25.226711%
amount needed to counterbalance other side = 25.226711% / 2 = 12.6133555%
margin-left needed to include wikinui = 10.6166667 + 12.6133555 = 23.2300222%
placement of wikinui using right absolute positioning: 100 - ~23.3% + 2px = 76.7% + 2px = calc(76.7% + 2px)
min-width = 14*44px + 2px = 616px + 2px = 618px
Note: 2px in this case is sort of a magic number, but it seems like how the gap between the Wiki Nui image and the rest of the images is handled varies based on browser (and, of course, it varies by window size as well). If I put 1px, sometimes it'll render as 1px, sometimes as 0px. If I put 2px, the gap will always be there.
--></noinclude>

Revision as of 18:09, 18 May 2016