Team:Aberdeen Scotland/css
From 2010.igem.org
(Difference between revisions)
Line 2: | Line 2: | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | /* change the igem style to fit my design */ | ||
+ | #content {background: #283234; border: 0px;} | ||
+ | #content h1.firstHeading {display: none;} | ||
- | |||
- | |||
- | #pagewrapper {display: block; width: 975px; background: #FFFFFF; text-align: left; margin: 0; font: 90%, | + | /* layout */ |
+ | * {font-size: 100%; margin: 0; padding: 0;} | ||
+ | body {position: relative; background: url(https://static.igem.org/mediawiki/igem.org/b/ba/Circuit_section_colour.jpg) top left repeat-x #283234;} | ||
+ | #pagewrapper {display: block; width: 975px; background:#FFFFFF; text-align: left; margin: 0 auto; font: 90%, Verdana, Arial, Helvetica, sans-serif; } | ||
+ | #titleheader {display:block;background: url(https://static.igem.org/mediawiki/igem.org/3/34/Header_background.jpg); } | ||
+ | #subtitle { 0px 50% no-repeat; padding: 7px 0px 12px 21px; color:#fff;} | ||
+ | h3.toptitle {font: Tahoma, Verdana, Arial, sans-serif; color: #fff; letter-spacing: -1px;} | ||
+ | h1.maintitle {font: 2.2em Tahoma, Verdana, Arial, sans-serif; color: #fff; letter-spacing: -1px;} | ||
+ | h3.maintitle {font: 2.2em Tahoma, Verdana, Arial, sans-serif; color: #fff; letter-spacing: -1px;} | ||
+ | h1.maintitle a, h1 a:link, h1 a:visited, h1 a:hover {color: #fff; text-decoration: none;} | ||
+ | h3.maintitle a, h3 a:link, h3 a:visited, h3 a:hover {color: #fff; text-decoration: none;} | ||
+ | .commentbar {color: #FFFFFF; margin: 5px 0px 0px 0px;} | ||
+ | .commentbar a, a:visited {color: white; text-decoration: none;} | ||
+ | #mainnavigation {margin: 0px 7px 0px 7px; padding: 20px 20px 9px 20px;} | ||
+ | #mainpic {height:350px; border-top: 3px solid gray;border-bottom: 3px solid gray;margin: 0px 8px 10px 8px;} | ||
+ | #pagetitlewrapper {border-top: 3px solid gray; height: 75px; position :relative; padding: 10px 0px 5px 20px; top:260px; background: url(https://static.igem.org/mediawiki/2009/a/a1/Transparent.jpg)} | ||
- | + | .wide { width: 975px; background-color:#FFFFFF; color: #000000; padding: 10px; border: 1px solid #AAAAAA; padding: 10px; margin: 0px 10px 10px 17px; float:center; display: inline;} | |
+ | .wide img {border: 0px solid #AAAAAA;} | ||
+ | .wide p {margin: 10px 0 5px 0; } | ||
+ | .wide h2 {font-weight: bold;} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | . | + | table.nav {width:100%; margin:0; cellpadding:5px; cellspacing:0; border:1px; bordercolor:#AAAAAA; font color:#000000; background:#FFFFFF;} |
+ | |||
+ | table.parameter {width:90%; display: block; margin-left: auto; margin-right: auto; cellpadding:0px; cellspacing:0; border:0px; bordercolor:#AAAAAA; font color:#000000; align:center; background:#FFFFFF; } | ||
+ | table.parameter td { padding:5px; } | ||
+ | |||
+ | table.hill {width:60%; display: block; float:right; cellpadding:0px; cellspacing:0; border:0px; bordercolor:#AAAAAA; font color:#000000; align:center; background:#FFFFFF; } | ||
+ | table.hill td { padding:5px;} | ||
img.floatleft {float: left; margin: 4px; clear:both;} | img.floatleft {float: left; margin: 4px; clear:both;} | ||
Line 30: | Line 44: | ||
.space {clear:both; } | .space {clear:both; } | ||
+ | |||
+ | |||
.left { width: 775px; background-color:#FFFFFF; color: #555555; padding: 10px; border: 1px solid #AAAAAA; padding: 10px; margin: 0px 10px 10px 10px; float:left; display: inline;} | .left { width: 775px; background-color:#FFFFFF; color: #555555; padding: 10px; border: 1px solid #AAAAAA; padding: 10px; margin: 0px 10px 10px 10px; float:left; display: inline;} | ||
.left img {border: 0px solid #AAAAAA; } | .left img {border: 0px solid #AAAAAA; } | ||
+ | .left p {margin: 10px 0 5px 0; } | ||
+ | .left h2 {font-weight: bold;} | ||
+ | |||
.right { width: 200px; background-color: #FFFFFF; color: #555555; padding: 10px; border: 1px solid #AAAAAA; margin: 0px 10px 10px 0px; float:right; display:inline;} | .right { width: 200px; background-color: #FFFFFF; color: #555555; padding: 10px; border: 1px solid #AAAAAA; margin: 0px 10px 10px 0px; float:right; display:inline;} | ||
.right img {border: 0px solid #AAAAAA; } | .right img {border: 0px solid #AAAAAA; } | ||
+ | .right p {margin: 10px 0 5px 0; } | ||
+ | .right h2 {font-weight: bold;} | ||
- | div.thumbnail {padding: 10px; border: solid #AAAAAA 1px; width: 152px; background-color: # | + | |
+ | div.thumbnail {padding: 10px; border: solid #AAAAAA 1px; width: 152px; background-color: #fff} | ||
Line 43: | Line 65: | ||
.description {color: #003000; margin: 0 37px 0px 37px;} | .description {color: #003000; margin: 0 37px 0px 37px;} | ||
- | .title h2 {font: | + | .title h2 {font: 1.05em Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 9px 24px 12px 24px;} |
- | .title h3 {font: | + | .title h3 {font: 1.05em Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 9px 24px 12px 24px;} |
.title small {float: right; padding: 14px 24px 0 0; color: #67939B;} | .title small {float: right; padding: 14px 24px 0 0; color: #67939B;} | ||
#pagetitle {} | #pagetitle {} | ||
#pagesubtitle {color: #283234;} | #pagesubtitle {color: #283234;} | ||
- | #maintitle {font: | + | #maintitle {font: 2.0em Tahoma, Verdana, Arial, sans-serif; margin: 4px 0 0 0;} |
Line 54: | Line 76: | ||
a:link, a:visited {text-decoration: none; color:#003399;} | a:link, a:visited {text-decoration: none; color:#003399;} | ||
a:hover {color: #D76519;} | a:hover {color: #D76519;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
Line 59: | Line 93: | ||
- | .menuminwidth0 { | + | .menuminwidth0 { /* for all browsers (non-IE) that obey min-width */ |
position:relative; | position:relative; | ||
border:0; | border:0; | ||
Line 65: | Line 99: | ||
padding:0; | padding:0; | ||
width:90%; | width:90%; | ||
- | height:35px; | + | height:35px;/* 36px masthead height + 18px button height + 1px lower border*/ |
min-width:975px; | min-width:975px; | ||
} | } | ||
- | * html .menuminwidth1 { | + | * html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */ |
- | position:relative; | + | position:relative; /* we can simulate a minimum width by creating a large */ |
- | float:left; | + | float:left; /* border in this first div, then placing our content */ |
- | height: 1px; | + | height: 1px; /* into a second nested div (see 2nd nested div next */ |
- | border-left:560px solid #fff; | + | border-left:560px solid #fff; /* CSS box-model borders are a fixed size */ |
} | } | ||
- | * html .menuminwidth2 { | + | * html .menuminwidth2 { /* used to simulate min-width capability for IE5/6 */ |
position:relative; | position:relative; | ||
margin-left:-560px; | margin-left:-560px; | ||
Line 88: | Line 122: | ||
.menu { | .menu { | ||
- | position:relative; | + | position:relative; /* establish a menu-relative positioning context */ |
- | float:left; | + | float:left; /* play nicely with others */ |
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
border:0; | border:0; | ||
- | height:30px; | + | height:30px; /* the menu's overall height */ |
- | width:100%; | + | width:100%; /* we always want our menu to fill the available space */ |
font-family: Verdana, Arial, Helvetica, sans-serif; | font-family: Verdana, Arial, Helvetica, sans-serif; | ||
- | font-size:14px; | + | font-size:14px; /* this (and also below) sets the menu's font size */ |
- | border-bottom:0; | + | border-bottom:0; /* give us a black border underneath */ |
} | } | ||
.menu img { | .menu img { | ||
- | vertical-align: top; | + | vertical-align: top; /* prevent images from being pushed down by text */ |
} | } | ||
Line 109: | Line 143: | ||
margin:0; | margin:0; | ||
border:0; | border:0; | ||
- | list-style-type:none; | + | list-style-type:none; /* we don't want to view the list as a list */ |
- | line-height:2em; | + | line-height:2em; /* globally set the menu's item spacing. note */ |
- | } | + | } /* this must be 1.0 or 1.5 or 2.0 for Mozilla */ |
+ | |||
.menu li { | .menu li { | ||
- | float:left; | + | float:left; /* this creates the side-by-side array of top-level buttons */ |
- | position:relative; | + | position:relative; /* create local positioning contexts for each button */ |
margin:0; | margin:0; | ||
list-style: none; | list-style: none; | ||
Line 120: | Line 155: | ||
.menu ul li table { | .menu ul li table { | ||
- | margin:-1px 0; | + | margin:-1px 0; /* IE5 needs -1px top and bottom table margins */ |
- | m\argin:0; | + | m\argin:0; /* re-zero the table margins for everyone but IE5 */ |
- | border-collapse:collapse; | + | border-collapse:collapse; /* IE5 needs this for the sub-menus to work */ |
- | font-size:12px; | + | font-size:12px; /* this sets the base font size for our entire menu */ |
list-style: none; | list-style: none; | ||
Line 130: | Line 165: | ||
.drop { | .drop { | ||
display:block; | display:block; | ||
- | padding:0px .5em; | + | padding:0px .5em; /* this sets the l/r margins for our menu item */ |
margin:0; | margin:0; | ||
text-align:right; /* this right alignment goes with the float:left below */ | text-align:right; /* this right alignment goes with the float:left below */ |
Revision as of 13:14, 16 August 2010