"
Team:Aberdeen Scotland/css
From 2009.igem.org
(Difference between revisions)
| (61 intermediate revisions not shown) | |||
| Line 8: | Line 8: | ||
/* layout */ | /* layout */ | ||
| - | * {font-size: 100%; margin: 0; padding: 0 | + | * {font-size: 100%; margin: 0; padding: 0;} |
body {position: relative; background: url(https://static.igem.org/mediawiki/2009/0/0e/Bg_body_edge.gif) top left repeat-x #A0C8DA;} | body {position: relative; background: url(https://static.igem.org/mediawiki/2009/0/0e/Bg_body_edge.gif) top left repeat-x #A0C8DA;} | ||
| - | #pagewrapper {display: block; width: 950px; background: url(https://static.igem.org/mediawiki/2009/3/37/Bg_main_wide.gif) top repeat-y; text-align: left; margin: 0 auto; font: | + | #pagewrapper {display: block; width: 950px; background: url(https://static.igem.org/mediawiki/2009/3/37/Bg_main_wide.gif) top repeat-y; text-align: left; margin: 0 auto; font: 90% Verdana, Arial, Helvetica, sans-serif; } |
#titleheader {display:block;background: url(https://static.igem.org/mediawiki/2009/f/f7/Bg_header2.GIF); } | #titleheader {display:block;background: url(https://static.igem.org/mediawiki/2009/f/f7/Bg_header2.GIF); } | ||
#subtitle { 0px 50% no-repeat; padding: 7px 0px 12px 21px; color:#fff;} | #subtitle { 0px 50% no-repeat; padding: 7px 0px 12px 21px; color:#fff;} | ||
| Line 24: | Line 24: | ||
#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)} | #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: 890px; background-color: #E4E9EE; color: # | + | .wide { width: 890px; background-color:#E4E9EE; color: #000000; padding: 10px; border: 1px solid #AAAAAA; padding: 10px; margin: 0px 10px 10px 17px; float:left; display: inline;} |
| - | .wide img {border: | + | .wide img {border: 0px solid #AAAAAA;} |
.wide p {margin: 10px 0 5px 0; } | .wide p {margin: 10px 0 5px 0; } | ||
.wide h2 {font-weight: bold;} | .wide h2 {font-weight: bold;} | ||
| + | |||
| + | |||
| + | table.nav {width:100%; margin:0; cellpadding:5px; cellspacing:0; border:1px; bordercolor:#AAAAAA; font color:#000000; background:#E4E9EE;} | ||
| + | |||
| + | 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:#E4E9EE; } | ||
| + | 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:#E4E9EE; } | ||
| + | table.hill td { padding:5px;} | ||
img.floatleft {float: left; margin: 4px; clear:both;} | img.floatleft {float: left; margin: 4px; clear:both;} | ||
| Line 38: | Line 47: | ||
| - | .left { width: 650px; background-color: #E4E9EE; color: #555555; padding: 10px; border: 1px solid #AAAAAA; padding: 10px; margin: 0px 10px 10px 17px; float:left; display: inline;} | + | .left { width: 650px; background-color:#E4E9EE; color: #555555; padding: 10px; border: 1px solid #AAAAAA; padding: 10px; margin: 0px 10px 10px 17px; float:left; display: inline;} |
| - | .left img {border: | + | .left img {border: 0px solid #AAAAAA; } |
.left p {margin: 10px 0 5px 0; } | .left p {margin: 10px 0 5px 0; } | ||
.left h2 {font-weight: bold;} | .left h2 {font-weight: bold;} | ||
| Line 67: | 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;} | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
/*======================== MENU STYLE =========================*/ | /*======================== MENU STYLE =========================*/ | ||
| Line 77: | Line 99: | ||
padding:0; | padding:0; | ||
width:90%; | width:90%; | ||
| - | + | height:35px;/* 36px masthead height + 18px button height + 1px lower border*/ | |
min-width:560px; | min-width:560px; | ||
| - | |||
} | } | ||
| Line 88: | Line 109: | ||
height: 1px; /* into a second nested div (see 2nd nested div next */ | height: 1px; /* into a second nested div (see 2nd nested div next */ | ||
border-left:560px solid #fff; /* CSS box-model borders are a fixed size */ | border-left:560px solid #fff; /* CSS box-model borders are a fixed size */ | ||
| - | |||
} | } | ||
| Line 95: | Line 115: | ||
margin-left:-560px; | margin-left:-560px; | ||
height: 1px; | height: 1px; | ||
| - | |||
} | } | ||
| Line 105: | Line 124: | ||
position:relative; /* establish a menu-relative positioning context */ | position:relative; /* establish a menu-relative positioning context */ | ||
float:left; /* play nicely with others */ | float:left; /* play nicely with others */ | ||
| - | + | margin:0; | |
padding:0; | padding:0; | ||
border:0; | border:0; | ||
| - | height: | + | height:30px; /* the menu's overall height */ |
width:100%; /* we always want our menu to fill the available space */ | 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; /* this (and also below) sets the menu's font size */ | font-size:14px; /* this (and also below) sets the menu's font size */ | ||
border-bottom:0; /* give us a black border underneath */ | border-bottom:0; /* give us a black border underneath */ | ||
| - | |||
} | } | ||
| Line 121: | Line 139: | ||
.menu ul { | .menu ul { | ||
| + | list-style: none; | ||
padding:0; | padding:0; | ||
| - | |||
margin:0; | margin:0; | ||
border:0; | border:0; | ||
| Line 133: | Line 151: | ||
position:relative; /* create local positioning contexts for each button */ | position:relative; /* create local positioning contexts for each button */ | ||
margin:0; | margin:0; | ||
| - | + | list-style: none; | |
} | } | ||
.menu ul li table { | .menu ul li table { | ||
| - | + | margin:-1px 0; /* IE5 needs -1px top and bottom table margins */ | |
| - | margin:0; /* re-zero the table margins for everyone but IE5 */ | + | m\argin:0; /* re-zero the table margins for everyone but IE5 */ |
border-collapse:collapse; /* IE5 needs this for the sub-menus to work */ | border-collapse:collapse; /* IE5 needs this for the sub-menus to work */ | ||
| - | font-size: | + | font-size:12px; /* this sets the base font size for our entire menu */ |
| - | + | list-style: none; | |
} | } | ||
| Line 147: | Line 165: | ||
.drop { | .drop { | ||
display:block; | display:block; | ||
| - | padding: | + | 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 */ | ||
| Line 158: | Line 176: | ||
} | } | ||
| + | .rightmenu { | ||
| + | position:relative; /* establish a local positioning context for YAH label */ | ||
| + | float:right; /* and right-align it at the top of our page */ | ||
| + | } | ||
| Line 165: | Line 187: | ||
display:none; /* initially hide the entire list hierarchy */ | display:none; /* initially hide the entire list hierarchy */ | ||
padding:1px; /* this is our box border width */ | padding:1px; /* this is our box border width */ | ||
| + | list-style: none; | ||
} | } | ||
| Line 173: | Line 196: | ||
float:left; | float:left; | ||
text-decoration:none; | text-decoration:none; | ||
| - | height: | + | height:30px; |
| - | width:9em; | + | width:9em; |
| + | list-style: none; | ||
} | } | ||
| Line 190: | Line 214: | ||
position:absolute; | position:absolute; | ||
margin:0; | margin:0; | ||
| - | top: | + | top:22px; /* place us just up underneath the top-level images */ |
left:8px; /* left-align our drop-down to the previous button border */ | left:8px; /* left-align our drop-down to the previous button border */ | ||
height:auto; /* the drop-down height will be determiend by line count */ | height:auto; /* the drop-down height will be determiend by line count */ | ||
| - | width: | + | width:14em; |
color:black; /* this sets the unselected-text color */ | color:black; /* this sets the unselected-text color */ | ||
background:#ffffff; /* this sets our menu's effective "border" color */ | background:#ffffff; /* this sets our menu's effective "border" color */ | ||
font-size:12px; /* this (and also below) sets the menu's font size */ | font-size:12px; /* this (and also below) sets the menu's font size */ | ||
| + | list-style: none; | ||
} | } | ||
| Line 225: | Line 250: | ||
padding:0; | padding:0; | ||
height:auto; | height:auto; | ||
| - | color:# | + | color:#ffffff; /* this sets the unselected drop-down text color */ |
| - | background:# | + | background:#7fa4d8; /* this sets the drop-down menu background color */ |
| - | width: | + | width:14em; |
} | } | ||
| Line 256: | Line 281: | ||
margin-top:-1px; /* bring the top edge of the 3rd level menu up one */ | margin-top:-1px; /* bring the top edge of the 3rd level menu up one */ | ||
top:0; | top:0; | ||
| - | left: | + | left:14em; |
width:14em; | width:14em; | ||
| Line 264: | Line 289: | ||
.menu ul li a:hover ul li a:hover ul li a { /* 3rd level unselected items */ | .menu ul li a:hover ul li a:hover ul li a { /* 3rd level unselected items */ | ||
width:14em; | width:14em; | ||
| - | background:# | + | background:#7fa4d8; |
| + | color:#ffffff; | ||
} | } | ||
| Line 271: | Line 297: | ||
width:14em; | width:14em; | ||
background:white; | background:white; | ||
| + | color:#000000; | ||
} | } | ||
| Line 289: | Line 316: | ||
table { | table { | ||
| - | font-color: # | + | font-color: #ffffff; |
| - | + | ||
} | } | ||
a.menu { | a.menu { | ||
| - | color: | + | color: #ffffff; |
width: 12em; | width: 12em; | ||
} | } | ||
| - | + | ||
| - | + | ||
| - | + | ||
| + | |||
| + | |||
| + | |||
/* footer */ | /* footer */ | ||
#wikifooter {clear: both; display: block; width: 950px; background: url(https://static.igem.org/mediawiki/2009/8/8d/Bg_footer.gif) bottom no-repeat; border-bottom: 20px solid #A0C8DA; text-align: center;} | #wikifooter {clear: both; display: block; width: 950px; background: url(https://static.igem.org/mediawiki/2009/8/8d/Bg_footer.gif) bottom no-repeat; border-bottom: 20px solid #A0C8DA; text-align: center;} | ||
| Line 306: | Line 336: | ||
#wikifooter p {color: #808080; padding: 0px 37px 20px 37px;} | #wikifooter p {color: #808080; padding: 0px 37px 20px 37px;} | ||
#wikifooter a, #wikifooter a:visited {color: #808080;} | #wikifooter a, #wikifooter a:visited {color: #808080;} | ||
| + | |||
</style> | </style> | ||
</html> | </html> | ||
Latest revision as of 12:09, 17 August 2009
