Team:Aberdeen Scotland/css
From 2009.igem.org
(Difference between revisions)
(75 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 108: | Line 127: | ||
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:12px; /* this sets the base font size for our entire menu */ | 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