Template:Caltech Menubar
From 2012.igem.org
(Difference between revisions)
m (removed <head> tags) |
|||
(149 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | |||
<!-- This is a comment in html --> | <!-- This is a comment in html --> | ||
Line 8: | Line 7: | ||
/* This is a comment in css */ | /* This is a comment in css */ | ||
+ | /* Took tips from https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki */ | ||
/* Remove unwanted wiki formatting */ | /* Remove unwanted wiki formatting */ | ||
/****************************/ | /****************************/ | ||
Line 14: | Line 14: | ||
#top-section { | #top-section { | ||
- | background-image:url('https://static.igem.org/mediawiki/2012/ | + | background-image:url('https://static.igem.org/mediawiki/2012/c/c5/Caltech2012Banner.gif'); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center top; | background-position: center top; | ||
- | height: | + | height:100px ! important; |
} | } | ||
- | #bodyContent { padding: 10px auto; width: 910px; margin: auto; clear: none; color:black} | + | #bodyContent { padding: 10px auto; width: 910px; margin: auto; clear: none; color:black; padding-bottom: 2em;} |
+ | #left { | ||
+ | width: 45%; | ||
+ | float: left;} | ||
+ | |||
+ | #right { | ||
+ | width: 55%; | ||
+ | float: right;} | ||
+ | |||
+ | #left_2 { | ||
+ | width: 92%; | ||
+ | float: left;} | ||
+ | |||
+ | #right_2 { | ||
+ | width: 8%; | ||
+ | float: right;} | ||
/* This sets the orange background of the screen. */ | /* This sets the orange background of the screen. */ | ||
body {background: #EBA243} | body {background: #EBA243} | ||
- | /* Removes "teams" from the menubar */ | + | /* Removes "teams" option from the menubar */ |
#menubar > ul > li:last-child { | #menubar > ul > li:last-child { | ||
display: none;} | display: none;} | ||
Line 39: | Line 54: | ||
font-size: 14px; | font-size: 14px; | ||
color: #444444;} | color: #444444;} | ||
- | |||
p { | p { | ||
margin: 0; color: #000000; text-align:left;} | margin: 0; color: #000000; text-align:left;} | ||
#innercontent p { | #innercontent p { | ||
margin: 0.6em 0;} | margin: 0.6em 0;} | ||
- | h3, h4 | + | h3, h4, h6 { |
border: none; | border: none; | ||
font-weight: lighter; | font-weight: lighter; | ||
color: #E56717; text-align:left} | color: #E56717; text-align:left} | ||
+ | |||
+ | h5 { | ||
+ | font-weight: lighter; | ||
+ | color: #565051; | ||
+ | text-align:right;} | ||
+ | } | ||
+ | /* | ||
h1 { | h1 { | ||
border: none; | border: none; | ||
Line 53: | Line 74: | ||
text-shadow: 0 1px rgba(255, 255, 255, 0.5); | text-shadow: 0 1px rgba(255, 255, 255, 0.5); | ||
font-size: 30px; | font-size: 30px; | ||
- | margin: 5px | + | margin: 5px 1px 1px 1px; |
+ | padding: 1px; | ||
+ | |||
font-weight: bold;} | font-weight: bold;} | ||
+ | */ | ||
+ | h1 { | ||
+ | color: #383838; | ||
+ | border: none; | ||
+ | padding: 25px 0 5px; | ||
+ | font-family: Arial; | ||
+ | font-size: 30px; | ||
+ | font-weight: bold; | ||
+ | line-height:28px; | ||
+ | margin-bottom: 0;} | ||
+ | |||
+ | |||
h2 { | h2 { | ||
color: #383838; | color: #383838; | ||
Line 63: | Line 98: | ||
font-weight: bold; | font-weight: bold; | ||
margin-bottom: 0;} | margin-bottom: 0;} | ||
+ | |||
#bodyContent h1, #bodyContent h2 { | #bodyContent h1, #bodyContent h2 { | ||
margin-bottom: 0;} | margin-bottom: 0;} | ||
Line 104: | Line 140: | ||
/************************************************************/ | /************************************************************/ | ||
+ | /* Main menu settings */ | ||
+ | /* lots of advice and some code taken from | ||
+ | http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/, | ||
+ | http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/, | ||
+ | and the comment sections */ | ||
+ | #nav { | ||
+ | /* clear:both; */ | ||
+ | float:left; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | border-top:2px solid #000; /* black line above menu */ | ||
+ | border-bottom:2px solid #000; /* black line below menu */ | ||
+ | /* width: auto; */ | ||
+ | width:830px; | ||
+ | /* font-family: Verdana, Geneva, sans-serif; Menu font */ | ||
+ | /* font-size:100%; Menu text size */ | ||
+ | z-index:1000; /* This makes the dropdown menus appear above the page content below */ | ||
+ | position:relative; | ||
+ | } | ||
- | /* | + | /* Top menu items */ |
- | + | #nav ul { | |
- | + | margin:0; | |
- | + | padding:0; | |
- | #nav{ | + | padding-below: .5em; |
- | + | list-style:none; | |
- | + | float:right; | |
- | + | position:relative; | |
- | + | right:50%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | #nav li{ | + | #nav ul li { |
- | + | margin:0 0 0 5px; | |
- | + | padding:0; | |
- | + | float:left; | |
+ | position:relative; | ||
+ | left:50%; | ||
+ | top:1px; | ||
+ | display: block; | ||
} | } | ||
- | #nav a{ | + | #nav ul li a { |
- | + | display:block; | |
- | + | margin:0; | |
- | + | /* padding: .8em; */ | |
+ | padding:.6em .5em .4em; | ||
+ | /* font-size:1em; */ | ||
+ | line-height:1em; | ||
+ | /* background:#A9A9A9; | ||
+ | text-decoration:none; | ||
+ | color:##E56717; | ||
+ | font-weight:bold; */ | ||
+ | background: #000000; | ||
+ | border-bottom:1px solid #000; | ||
+ | width: auto; | ||
} | } | ||
- | #nav a | + | #nav ul li.active a { |
- | + | color:#fff; | |
- | + | background:#000; | |
} | } | ||
- | + | #nav ul li a:hover { | |
- | + | background:#36f; /* Top menu items background colour */ | |
- | #nav ul{ | + | color:#fff; |
- | + | border-bottom:1px solid #03f; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | #nav ul li{ | + | #nav ul li:hover a, |
- | + | #nav ul li.hover a { /* This line is required for IE 6 and below */ | |
- | + | background:#36f; /* Top menu items background colour */ | |
+ | color:#fff; | ||
+ | border-bottom:1px solid #03f; | ||
} | } | ||
- | #nav ul | + | |
- | + | /* Submenu items */ | |
+ | #nav ul ul { | ||
+ | display:none; /* Sub menus are hiden by default */ | ||
+ | position:absolute; | ||
+ | top:2em; | ||
+ | left:0; | ||
+ | right:auto; /*resets the right:50% on the parent ul */ | ||
+ | width:auto /* 10em */; /* width of the drop-down menus */ | ||
} | } | ||
- | #nav | + | #nav ul ul li { |
- | + | left:auto; /*resets the left:50% on the parent li */ | |
+ | margin:0; /* Reset the 1px margin from the top menu */ | ||
+ | clear:left; | ||
+ | width:100%; | ||
} | } | ||
- | #nav li:hover a{ /* | + | #nav ul ul li a, |
- | + | #nav ul li.active li a, | |
- | + | #nav ul li:hover ul li a, | |
+ | #nav ul li.hover ul li a { /* This line is required for IE 6 and below */ | ||
+ | /*font-size:.8em; .8em; */ | ||
+ | font-weight:normal; /* resets the bold set for the top level menu items */ | ||
+ | background:#eee; | ||
+ | color:#444; | ||
+ | line-height:1.4em; /* overwrite line-height value from top menu */ | ||
+ | border-bottom:1px solid #ddd; /* sub menu item horizontal lines */ | ||
} | } | ||
- | #nav li:hover ul a{ /* | + | #nav ul ul li a:hover, |
- | + | #nav ul li.active ul li a:hover, | |
+ | #nav ul li:hover ul li a:hover, | ||
+ | #nav ul li.hover ul li a:hover { /* This line is required for IE 6 and below */ | ||
+ | background:#36f; /* Sub menu items background colour */ | ||
+ | color:#fff; | ||
} | } | ||
- | #nav | + | |
- | + | /* Flip the last submenu so it stays within the page */ | |
+ | #nav ul ul.last { | ||
+ | left:auto; /* reset left:0; value */ | ||
+ | right:0; /* Set right value instead */ | ||
} | } | ||
+ | |||
+ | /* Make the sub menus appear on hover */ | ||
+ | #nav ul li:hover ul, | ||
+ | #nav ul li.hover ul { /* This line is required for IE 6 and below */ | ||
+ | display:block; /* Show the sub menus */ | ||
+ | } | ||
+ | |||
</style> | </style> | ||
- | |||
</html> | </html> |
Latest revision as of 19:00, 3 October 2012