Team:UCLondon/Templates/links-footerv2
From 2012e.igem.org
(Difference between revisions)
(Created page with "<html> <div id="footer-links"> <div id="foot-icon1"></div> <div class="vertical"> <p class="left-footer">Morph Bioinformatics</p> <ul class="ri...") |
|||
(61 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <div id="MBFooter"> | ||
+ | <div style="clear:both; height:1px;"></div> | ||
<div id="footer-links"> | <div id="footer-links"> | ||
<div id="foot-icon1"></div> | <div id="foot-icon1"></div> | ||
Line 6: | Line 8: | ||
<p class="left-footer">Morph Bioinformatics</p> | <p class="left-footer">Morph Bioinformatics</p> | ||
<ul class="right-footer"> | <ul class="right-footer"> | ||
- | <li><a href=" | + | <li><a href="http://dl.dropbox.com/u/3703109/igeme/home.html">Home</a></li> |
- | <li><a href=" | + | <li><a href="http://dl.dropbox.com/u/3703109/igeme/downloads.html">Downloads</a></li> |
- | <li><a href=" | + | <li><a href="http://dl.dropbox.com/u/3703109/igeme/news.html">News</a></li> |
- | <li><a href=" | + | <li><a href="http://dl.dropbox.com/u/3703109/igeme/jobs.html">Job Opportunities</a></li> |
- | <li><a href=" | + | <li><a href="http://dl.dropbox.com/u/3703109/igeme/contact.html">Contact Us</a></li> |
<li><a href="#">MediaWiki</a><ul class='mediawiki-footer'><li>item1</li></ul></li> | <li><a href="#">MediaWiki</a><ul class='mediawiki-footer'><li>item1</li></ul></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
<div id="foot-icon2"></div> | <div id="foot-icon2"></div> | ||
+ | </div> | ||
</div> | </div> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | #MBFooter { background: url(http://db.tt/cPPm1hVY) repeat-x; width:100%; margin:auto; height:100px; position:relative; bottom:-40px; left:0; } | ||
+ | |||
+ | #MBFooter:before { content:""; display:block; width:100%; height:3px; | ||
+ | |||
+ | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 0.7) ), to( rgb(0, 0, 0) ) ); | ||
+ | background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(0, 0, 0) ); | ||
+ | background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(0, 0, 0) ); | ||
+ | background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(0, 0, 0) ); | ||
+ | background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(0, 0, 0) ); | ||
+ | background-image: linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(0, 0, 0) ); | ||
+ | |||
+ | box-shadow: 1px #888; | ||
+ | |||
+ | } | ||
#foot-icon1 { float: left; } | #foot-icon1 { float: left; } | ||
#foot-icon2 { float: left; } | #foot-icon2 { float: left; } | ||
- | #footer-links * { | + | #footer-links * { |
- | + | ||
- | + | ||
list-style-type:none; | list-style-type:none; | ||
+ | color: rgb(250, 250, 250); | ||
} | } | ||
Line 33: | Line 50: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
- | + | ||
- | + | #footer-links div li ul { | |
- | + | display: none; | |
+ | background-color:white; | ||
+ | width: 140px; | ||
+ | border: solid 1px #b4b4b4; | ||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | ||
- | + | z-index: 10; | |
- | + | color:black; | |
+ | } | ||
+ | |||
+ | #footer-links div li:hover > ul { display: block; position:absolute; bottom:50%; } | ||
+ | |||
+ | #footer-links div li ul li { color:black; width:140px; padding:0 !important; border:0 !important; } | ||
+ | #footer-links div li ul li a { color:black; width:140px; } | ||
+ | #footer-links div li ul li:hover { background-color:rgb(56, 90, 79); } | ||
+ | #footer-links div li ul li:hover > a { color:white;} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#footer-links .left-footer { | #footer-links .left-footer { | ||
Line 86: | Line 78: | ||
list-style: none; | list-style: none; | ||
float:left; | float:left; | ||
+ | margin-right: 10px; | ||
+ | padding-top:2px; | ||
} | } | ||
Line 98: | Line 92: | ||
#footer-links .right-footer li:last-child { | #footer-links .right-footer li:last-child { | ||
border:none; | border:none; | ||
- | padding-right: none; | + | padding-right: none !important; |
} | } | ||
Line 104: | Line 98: | ||
- | #footer-links { width: | + | #footer-links { width:761px; margin-left:auto; margin-right:auto; padding-top:40px; } |
- | + | ||
</style> | </style> | ||
Latest revision as of 01:02, 9 January 2013