Team:Imperial College London/test
From 2011.igem.org
(Difference between revisions)
(Replaced content with "{{:Team:Imperial_College_London/Templates/Banner}} {{:Team:Imperial_College_London/Templates/Menu}}") |
|||
Line 1: | Line 1: | ||
- | {{: | + | <html> |
- | {{: | + | <head> |
+ | <style type="text/css"> | ||
+ | |||
+ | .animatedtabs{ | ||
+ | border-bottom: 1px solid gray; | ||
+ | overflow: hidden; | ||
+ | width: 100%; | ||
+ | font-size: 14px; /*font of menu text*/ | ||
+ | } | ||
+ | |||
+ | |||
+ | .animatedtabs ul{ | ||
+ | list-style-type: none; | ||
+ | margin: 0; | ||
+ | margin-left: 10px; /*offset of first tab relative to page left edge*/ | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .animatedtabs li{ | ||
+ | float: left; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .animatedtabs a{ | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */ | ||
+ | background: url(https://static.igem.org/mediawiki/2011/c/c7/ICL_tab_left.gif) no-repeat left top; | ||
+ | margin: 0; | ||
+ | margin-right: 3px; /*Spacing between each tab*/ | ||
+ | padding: 0 0 0 9px; | ||
+ | text-decoration: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | .animatedtabs a span{ | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | background: url(https://static.igem.org/mediawiki/2011/1/1e/ICL_tab_right.gif) no-repeat right top; | ||
+ | padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */ | ||
+ | font-weight: bold; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | /* Commented Backslash Hack hides rule from IE5-Mac \*/ | ||
+ | .animatedtabs a span {float:none;} | ||
+ | /* End IE5-Mac hack */ | ||
+ | |||
+ | |||
+ | .animatedtabs .selected a{ | ||
+ | background-position: 0 -125px; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | .animatedtabs .selected a span{ | ||
+ | background-position: 100% -125px; | ||
+ | color: black; | ||
+ | padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */ | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | .animatedtabs a:hover{ | ||
+ | background-position: 0% -125px; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | .animatedtabs a:hover span{ | ||
+ | background-position: 100% -125px; | ||
+ | padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */ | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div class="animatedtabs"> | ||
+ | <ul> | ||
+ | <li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li> | ||
+ | <li class="selected"><a href="http://www.dynamicdrive.com/style/" title="CSS Examples"><span>CSS</span></a></li> | ||
+ | <li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li> | ||
+ | <li><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li> | ||
+ | <li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li> | ||
+ | <li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> |
Revision as of 22:59, 24 July 2011