Difference between revisions of "Template:Team:TU Eindhoven/Menu CSS"
Jan Willem (Talk | contribs) |
Jan Willem (Talk | contribs) |
||
| Line 18: | Line 18: | ||
} | } | ||
#menu1{ | #menu1{ | ||
| − | margin-left: | + | margin-left:calc((100% - (5 * 14%)) / 2); |
} | } | ||
#menu a:not(#menutwitter):not(#menufacebook), #submenu a { | #menu a:not(#menutwitter):not(#menufacebook), #submenu a { | ||
| Line 25: | Line 25: | ||
text-align: center; | text-align: center; | ||
line-height: 45px; | line-height: 45px; | ||
| − | width: | + | width:14%; |
display:block; | display:block; | ||
text-decoration: none; | text-decoration: none; | ||
| Line 46: | Line 46: | ||
#sub2a{ | #sub2a{ | ||
| − | margin-left: | + | margin-left:calc(((100% - (5 * 14%)) / 2) - (0.5 * 14%)); |
} | } | ||
#sub3a{ | #sub3a{ | ||
| − | margin-left: | + | margin-left:calc(((100% - (5 * 14%)) / 2) + (1.5 * 14%)); |
} | } | ||
#sub4a{ | #sub4a{ | ||
| − | margin-left: | + | margin-left:calc(((100% - (5 * 14%)) / 2) + (2 * 14%)); |
} | } | ||
#sub5a{ | #sub5a{ | ||
| − | margin-left: | + | margin-left:calc(((100% - (5 * 14%)) / 2) + (4 * 14%)); |
} | } | ||
Revision as of 21:06, 8 May 2015
#menu{ position:relative; background: #ddeebb; width:100%; height:45px; margin:0 auto; } #submenu{ position:relative; z-index:1; background: #f6f0cc; width:100%; height:0px; margin:0 auto; overflow:hidden; transition: height 0.2s; } #menu1{ margin-left:calc((100% - (5 * 14%)) / 2); } #menu a:not(#menutwitter):not(#menufacebook), #submenu a { position:relative; font-weight: bold; text-align: center; line-height: 45px; width:14%; display:block; text-decoration: none; float: left; color: #004415; } #menu1:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover{ color: #9DC671; } #sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover{ color: #9DC671; } #sub2,#sub3,#sub4,#sub5{ width:100%; height:100%; } #sub2a{ margin-left:calc(((100% - (5 * 14%)) / 2) - (0.5 * 14%)); } #sub3a{ margin-left:calc(((100% - (5 * 14%)) / 2) + (1.5 * 14%)); } #sub4a{ margin-left:calc(((100% - (5 * 14%)) / 2) + (2 * 14%)); } #sub5a{ margin-left:calc(((100% - (5 * 14%)) / 2) + (4 * 14%)); } #sub2,#sub3,#sub4,#sub5{ display:none; } #top{ background-image:url('http://www.moorsmagazine.com/images/boom.JPG'); height:960px; width:100%; position:absolute; top:45px; } /*Twitter*/ #twitter{ top:45px; right:0; z-index:1; display:none; position:absolute; } #twitter_logo{ height:45px; float:right; } /*FB*/ #facebook{ right:0; top:45px; z-index:1; display:none; position:absolute; } #facebook_logo{ height:45px; float:right; }