Team:Wageningen UR/Templates/test NavigationTop
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
- | |||
<head> | <head> | ||
- | < | + | <style> |
- | + | body { | |
+ | background-color:#000; | ||
+ | height:2000px; | ||
+ | color:#ccc; | ||
+ | font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif; | ||
+ | } | ||
+ | #floatMenu { | ||
+ | position:absolute; | ||
+ | top:150px; | ||
+ | left:50%; | ||
+ | margin-left:235px; | ||
+ | width:200px; | ||
+ | } | ||
+ | #floatMenu ul { | ||
+ | margin-bottom:20px; | ||
+ | } | ||
+ | #floatMenu ul li a { | ||
+ | display:block; | ||
+ | border:1px solid #999; | ||
+ | background-color:#222; | ||
+ | border-left:6px solid #999; | ||
+ | text-decoration:none; | ||
+ | color:#ccc; | ||
+ | padding:5px 5px 5px 25px; | ||
+ | } | ||
- | + | #floatMenu ul.menu1 li a:hover { | |
- | + | border-color:#09f; | |
- | + | } | |
- | + | #floatMenu ul.menu2 li a:hover { | |
+ | border-color:#9f0; | ||
+ | } | ||
+ | #floatMenu ul.menu3 li a:hover { | ||
+ | border-color:#f09; | ||
+ | } | ||
- | + | @charset "UTF-8"; | |
+ | /* CSS Document */ | ||
- | + | #page-wrap{ | |
- | + | border-right:1px solid #444; | |
- | + | border-left:1px solid #444; | |
- | + | width:900px; | |
- | + | margin:0 auto; | |
- | + | background-color:#222; | |
- | + | color:#ffffff; | |
- | + | font-family:"Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #page-wrap #header{ | |
- | + | background-color:#444; | |
- | + | padding-top:20px; | |
- | + | padding-bottom:30px; | |
- | + | ||
} | } | ||
- | + | #page-wrap #header h1{ | |
- | + | margin-left:45px; | |
- | + | font-size:2.8em; | |
+ | margin-bottom:10px; | ||
+ | line-height:0.9em; | ||
+ | } | ||
+ | #page-wrap #header h2{ | ||
+ | margin-left:45px; | ||
+ | font-size:1.7em; | ||
+ | } | ||
+ | #page-wrap #content{ | ||
+ | background:url(images/content_bg.jpg) no-repeat; | ||
+ | padding-top:85px; | ||
} | } | ||
- | + | #page-wrap #content h1{ | |
- | + | margin-left:45px; | |
- | + | font-size:2em; | |
- | + | margin-bottom:10px; | |
- | + | } | |
- | + | #page-wrap #content p{ | |
- | + | margin-left:45px; | |
- | </ | + | width:620px; |
+ | text-align:justify; | ||
+ | margin-bottom:25px; | ||
+ | line-height:1.5em; | ||
+ | } | ||
+ | #page-wrap #content p.first{ | ||
+ | font-size:1.2em; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | #page-wrap #content p.longer{ | ||
+ | width:810px; | ||
+ | } | ||
+ | #page-wrap #footer{ | ||
+ | background-color:#444; | ||
+ | } | ||
+ | #page-wrap #footer p{ | ||
+ | width:auto; | ||
+ | margin:auto; | ||
+ | text-align:center; | ||
+ | font-size:0.9em; | ||
+ | border:1px solid #000; | ||
+ | padding:15px 0; | ||
+ | } | ||
+ | #page-wrap #footer a:link{ | ||
+ | color:#09f; | ||
+ | } | ||
+ | #page-wrap #footer a:visited{ | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | #page-wrap #footer a:hover{ | ||
+ | color:#0f9; | ||
+ | } | ||
+ | #page-wrap #footer a:active{ | ||
+ | color:#f90; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="floatMenu"> | ||
+ | <ul class="menu1"> | ||
+ | <li><a href="#" onclick="return false;"> Home </a></li> | ||
+ | </ul> | ||
+ | |||
+ | <ul class="menu2"> | ||
+ | <li><a href="#" onclick="return false;"> Table of content </a></li> | ||
+ | <li><a href="#" onclick="return false;"> Exam </a></li> | ||
+ | <li><a href="#" onclick="return false;"> Wiki </a></li> | ||
+ | </ul> | ||
+ | |||
+ | <ul class="menu3"> | ||
+ | <li><a href="#" onclick="return false;"> Technical support </a></li> | ||
+ | </ul> | ||
+ | </div> | ||
</body> | </body> | ||
- | + | </html> | |
- | <html> | + |
Latest revision as of 19:56, 13 September 2011