"
Team:Tokyo-NoKoGen/css
From 2010.igem.org
(Difference between revisions)
m |
|||
| (131 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
| + | |||
| + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
| + | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
/* change the igem style to fit my design */ | /* change the igem style to fit my design */ | ||
| - | #content {background: | + | #content {background:#2000a0; border:0px; margin-top: 30px; margin-left: 20px; margin-right: 20px;} |
#content h1.firstHeading {display: none;} | #content h1.firstHeading {display: none;} | ||
| + | /* ===== Basic rules ===== */ | ||
| + | <!-- | ||
| + | body | ||
| + | {background-image: url(https://static.igem.org/mediawiki/2010/e/e3/NoKoGen_BackGround.png); background-repeat: repeat; | ||
| + | background-color: #FFFFFF; | ||
| + | } | ||
| + | --> | ||
| - | /* | + | /* ===== Roll up image ===== */ |
| - | + | a img.css-hover{ | |
| - | + | opacity:0; filter: alpha(opacity=0); | |
| - | + | } | |
| - | + | a:hover img.css-hover{ | |
| - | + | opacity:1.0; filter: alpha(opacity=100); | |
| - | + | } | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | . | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | img. | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | /* | + | /* ====== MENU STYLE ====== */ |
| Line 108: | Line 42: | ||
* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */ | * html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */ | ||
position:relative; /* we can simulate a minimum width by creating a large */ | position:relative; /* we can simulate a minimum width by creating a large */ | ||
| - | float: | + | float:center; /* border in this first div, then placing our content */ |
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 125: | Line 59: | ||
.menu { | .menu { | ||
position:relative; /* establish a menu-relative positioning context */ | position:relative; /* establish a menu-relative positioning context */ | ||
| - | float: | + | float:left; /* play nicely with others */ |
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
border:0; | border:0; | ||
| - | height: | + | height:15px; /* 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: | + | font-size:15px; /* 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 146: | Line 80: | ||
border:0; | border:0; | ||
list-style-type:none; /* we don't want to view the list as a list */ | list-style-type:none; /* we don't want to view the list as a list */ | ||
| - | line-height: | + | line-height:2.0; /* globally set the menu's item spacing. note */ |
} /* this must be 1.0 or 1.5 or 2.0 for Mozilla */ | } /* this must be 1.0 or 1.5 or 2.0 for Mozilla */ | ||
| Line 158: | Line 92: | ||
.menu ul li table { | .menu ul li table { | ||
margin:-1px 0; /* IE5 needs -1px top and bottom table margins */ | margin:-1px 0; /* IE5 needs -1px top and bottom table margins */ | ||
| - | + | margin: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 */ | ||
| Line 167: | Line 101: | ||
.drop { | .drop { | ||
display:block; | display:block; | ||
| - | padding:0px . | + | padding:0px .1em; /* 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 190: | Line 124: | ||
padding:1px; /* this is our box border width */ | padding:1px; /* this is our box border width */ | ||
list-style: none; | list-style: none; | ||
| + | |||
} | } | ||
| Line 196: | Line 131: | ||
.menu ul li a:visited { /* unselected top-level menu items */ | .menu ul li a:visited { /* unselected top-level menu items */ | ||
display:block; | display:block; | ||
| - | float: | + | float:center; |
text-decoration:none; | text-decoration:none; | ||
height:30px; | height:30px; | ||
| Line 216: | Line 151: | ||
position:absolute; | position:absolute; | ||
margin:0; | margin:0; | ||
| - | top: | + | top:15px; /* place us just up underneath the top-level images */ |
| - | left: | + | left:0px; /* 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:12em; |
color:black; /* this sets the unselected-text color */ | color:black; /* this sets the unselected-text color */ | ||
| - | background:# | + | background:#00ccff; /* 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; | list-style: none; | ||
| Line 233: | Line 168: | ||
.menu ul li:hover ul.skinny, | .menu ul li:hover ul.skinny, | ||
.menu ul li a:hover ul.skinny { /* 2nd level skinny drop-down box */ | .menu ul li a:hover ul.skinny { /* 2nd level skinny drop-down box */ | ||
| - | width: | + | width:14em; /* with a 12px default font, this is 97px width (97/12) */ |
} | } | ||
| Line 252: | Line 187: | ||
padding:0; | padding:0; | ||
height:auto; | height:auto; | ||
| - | color:# | + | color:#000000; /* this sets the unselected drop-down text color */ |
| - | background:# | + | background:#ccffff; /* this sets the drop-down menu background color */ |
| - | width: | + | width:12em; |
} | } | ||
| Line 292: | Line 227: | ||
width:14em; | width:14em; | ||
background:#838d84; | background:#838d84; | ||
| - | color:# | + | color:#000000; |
} | } | ||
| Line 309: | Line 244: | ||
a.menu { | a.menu { | ||
color: white; | color: white; | ||
| - | width: | + | width: 10em; |
| + | align:center; | ||
} | } | ||
| Line 318: | Line 254: | ||
table { | table { | ||
| - | font-color: # | + | font-color: #000000; |
} | } | ||
| + | |||
a.menu { | a.menu { | ||
| - | color: # | + | color: #000000; |
| - | width: | + | width: 10em; |
} | } | ||
| - | |||
| - | |||
| - | |||
| - | |||
| Line 338: | Line 271: | ||
#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 09:27, 27 October 2010
