"
Team:UESTC Life/css/style dock.css
From 2013.igem.org
Neptune Yu (Talk | contribs) (Created page with "#dock { display: block; - →margin: 30px auto;: margin: 0px auto; top: 0px; width: 100%; text-align: center; overflow: hidden; } #dock ul { margin: 0px -60px; padding:...") |
Neptune Yu (Talk | contribs) |
||
| Line 18: | Line 18: | ||
white-space: nowrap; | white-space: nowrap; | ||
display: inline-block; | display: inline-block; | ||
| - | /* background: url("../img/ | + | /* background: url("../img/uestclifebiot_dock-middle.png") bottom left repeat-x; */ |
} | } | ||
| Line 35: | Line 35: | ||
padding-left: 60px; | padding-left: 60px; | ||
margin-left: -60px; | margin-left: -60px; | ||
| - | /* background: url("../img/ | + | /* background: url("../img/uestclifebiot_dock-left.png") bottom left repeat-x; */ |
} | } | ||
| Line 41: | Line 41: | ||
padding-right: 60px; | padding-right: 60px; | ||
margin-right: -60px; | margin-right: -60px; | ||
| - | /* background: url("../img/ | + | /* background: url("../img/uestclifebiot_dock-right.png") bottom right repeat-x; */ |
} | } | ||
| Line 55: | Line 55: | ||
#dock li.seperator { | #dock li.seperator { | ||
| - | background: url("../img/ | + | background: url("../img/uestclifebiot_dock-seperator.png") bottom left no-repeat; |
width: 20px; | width: 20px; | ||
height: 158px; | height: 158px; | ||
| Line 115: | Line 115: | ||
height: 9px; | height: 9px; | ||
color: transparent; | color: transparent; | ||
| - | /* background: transparent url("../img/span.png") center top no-repeat; */ | + | /* background: transparent url("../img/uestclifebiot_span.png") center top no-repeat; */ |
| + | position: absolute; | ||
| + | content: ""; | ||
| + | text-align: center; | ||
| + | margin: 0px; | ||
| + | padding: 0px; | ||
| + | width: 100%; | ||
| + | margin-left: -16px; | ||
| + | } | ||
| + | |||
| + | #dock li a img { | ||
| + | height: auto; | ||
| + | width: 100%; | ||
| + | position: absolute; | ||
| + | left: 0px; | ||
| + | bottom: 10px; | ||
| + | text-align: center; | ||
| + | border: 0px none; | ||
| + | /* margin-bottom: 15px; */ | ||
| + | margin-bottom: 45px; | ||
| + | |||
| + | box-reflect: below 1px gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); | ||
| + | -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); | ||
| + | -moz-box-reflect: below 1px -moz-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); | ||
| + | }#dock { | ||
| + | display: block; | ||
| + | /* margin: 30px auto; */ | ||
| + | margin: 0px auto; | ||
| + | top: 0px; | ||
| + | width: 100%; | ||
| + | text-align: center; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | #dock ul { | ||
| + | margin: 0px -60px; | ||
| + | padding: 0px; | ||
| + | list-style: none; | ||
| + | height: 198px; | ||
| + | line-height: 198px; | ||
| + | text-align: center; | ||
| + | white-space: nowrap; | ||
| + | display: inline-block; | ||
| + | /* background: url("../img/uestclifebiot_dock-middle.png") bottom left repeat-x; */ | ||
| + | } | ||
| + | |||
| + | #dock ul:before, | ||
| + | #dock ul:after { | ||
| + | content: ""; | ||
| + | color: transparent; | ||
| + | display: inline-block; | ||
| + | width: 0px; | ||
| + | padding-top: 60px; | ||
| + | margin-top: -60px; | ||
| + | vertical-align: bottom; | ||
| + | } | ||
| + | |||
| + | #dock ul:before { | ||
| + | padding-left: 60px; | ||
| + | margin-left: -60px; | ||
| + | /* background: url("../img/uestclifebiot_dock-left.png") bottom left repeat-x; */ | ||
| + | } | ||
| + | |||
| + | #dock ul:after { | ||
| + | padding-right: 60px; | ||
| + | margin-right: -60px; | ||
| + | /* background: url("../img/uestclifebiot_dock-right.png") bottom right repeat-x; */ | ||
| + | } | ||
| + | |||
| + | /* Dock Icons */ | ||
| + | #dock li { | ||
| + | display: inline-block; | ||
| + | vertical-align: bottom; | ||
| + | margin: 0px; | ||
| + | padding: 0px; | ||
| + | position: relative; | ||
| + | overflow: visible; | ||
| + | } | ||
| + | |||
| + | #dock li.seperator { | ||
| + | background: url("../img/uestclifebiot_dock-seperator.png") bottom left no-repeat; | ||
| + | width: 20px; | ||
| + | height: 158px; | ||
| + | position: relative; | ||
| + | vertical-align: bottom; | ||
| + | } | ||
| + | |||
| + | #dock li a { | ||
| + | height: 153px; | ||
| + | width: 48px; | ||
| + | display: inline-block; | ||
| + | text-align: center; | ||
| + | position: relative; | ||
| + | vertical-align: bottom; | ||
| + | text-decoration: none; | ||
| + | color: black; | ||
| + | white-space: normal; | ||
| + | letter-spacing: normal; | ||
| + | line-height: 1.3em; | ||
| + | text-align: center; | ||
| + | font-family: Arial; | ||
| + | padding-top: 40px; | ||
| + | margin-bottom: 5px; | ||
| + | overflow: visible; | ||
| + | } | ||
| + | |||
| + | body.no_js #dock li a:hover { | ||
| + | width: 128px !important; | ||
| + | } | ||
| + | |||
| + | #dock li a span { | ||
| + | position: relative; | ||
| + | line-height: 1.3em; | ||
| + | display: none; | ||
| + | text-align: center; | ||
| + | font-weight: bold; | ||
| + | font-size: 80%; | ||
| + | padding: 4px 12px; | ||
| + | background-color: #EEE; | ||
| + | |||
| + | opacity: 0.4; | ||
| + | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; | ||
| + | |||
| + | margin: 0px auto; | ||
| + | |||
| + | top: -40px; | ||
| + | |||
| + | border-radius: 10px; | ||
| + | -moz-border-radius: 10px; | ||
| + | -webkit-border-radius: 10px; | ||
| + | } | ||
| + | |||
| + | #dock li a:hover span { | ||
| + | display: inline-block; | ||
| + | } | ||
| + | |||
| + | #dock li a:hover span:after { | ||
| + | display: block; | ||
| + | height: 9px; | ||
| + | color: transparent; | ||
| + | /* background: transparent url("../img/uestclifebiot_span.png") center top no-repeat; */ | ||
position: absolute; | position: absolute; | ||
content: ""; | content: ""; | ||
Revision as of 07:32, 26 August 2013
- dock {
display: block; /* margin: 30px auto; */ margin: 0px auto; top: 0px; width: 100%; text-align: center; overflow: hidden; }
- dock ul {
margin: 0px -60px; padding: 0px; list-style: none; height: 198px; line-height: 198px; text-align: center; white-space: nowrap; display: inline-block; /* background: url("../img/uestclifebiot_dock-middle.png") bottom left repeat-x; */ }
- dock ul:before,
- dock ul:after {
content: ""; color: transparent; display: inline-block; width: 0px; padding-top: 60px; margin-top: -60px; vertical-align: bottom; }
- dock ul:before {
padding-left: 60px; margin-left: -60px; /* background: url("../img/uestclifebiot_dock-left.png") bottom left repeat-x; */ }
- dock ul:after {
padding-right: 60px; margin-right: -60px; /* background: url("../img/uestclifebiot_dock-right.png") bottom right repeat-x; */ }
/* Dock Icons */
- dock li {
display: inline-block; vertical-align: bottom; margin: 0px; padding: 0px; position: relative; overflow: visible; }
- dock li.seperator {
background: url("../img/uestclifebiot_dock-seperator.png") bottom left no-repeat; width: 20px; height: 158px; position: relative; vertical-align: bottom; }
- dock li a {
height: 153px; width: 48px; display: inline-block; text-align: center; position: relative; vertical-align: bottom; text-decoration: none; color: black; white-space: normal; letter-spacing: normal; line-height: 1.3em; text-align: center; font-family: Arial; padding-top: 40px; margin-bottom: 5px; overflow: visible; }
body.no_js #dock li a:hover { width: 128px !important; }
- dock li a span {
position: relative; line-height: 1.3em; display: none; text-align: center; font-weight: bold; font-size: 80%; padding: 4px 12px; background-color: #EEE;
opacity: 0.4; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
margin: 0px auto;
top: -40px;
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- dock li a:hover span {
display: inline-block; }
- dock li a:hover span:after {
display: block; height: 9px; color: transparent; /* background: transparent url("../img/uestclifebiot_span.png") center top no-repeat; */ position: absolute; content: ""; text-align: center; margin: 0px; padding: 0px; width: 100%; margin-left: -16px; }
- dock li a img {
height: auto; width: 100%; position: absolute; left: 0px; bottom: 10px; text-align: center; border: 0px none; /* margin-bottom: 15px; */ margin-bottom: 45px;
box-reflect: below 1px gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); -moz-box-reflect: below 1px -moz-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); }#dock { display: block; /* margin: 30px auto; */ margin: 0px auto; top: 0px; width: 100%; text-align: center; overflow: hidden; }
- dock ul {
margin: 0px -60px; padding: 0px; list-style: none; height: 198px; line-height: 198px; text-align: center; white-space: nowrap; display: inline-block; /* background: url("../img/uestclifebiot_dock-middle.png") bottom left repeat-x; */ }
- dock ul:before,
- dock ul:after {
content: ""; color: transparent; display: inline-block; width: 0px; padding-top: 60px; margin-top: -60px; vertical-align: bottom; }
- dock ul:before {
padding-left: 60px; margin-left: -60px; /* background: url("../img/uestclifebiot_dock-left.png") bottom left repeat-x; */ }
- dock ul:after {
padding-right: 60px; margin-right: -60px; /* background: url("../img/uestclifebiot_dock-right.png") bottom right repeat-x; */ }
/* Dock Icons */
- dock li {
display: inline-block; vertical-align: bottom; margin: 0px; padding: 0px; position: relative; overflow: visible; }
- dock li.seperator {
background: url("../img/uestclifebiot_dock-seperator.png") bottom left no-repeat; width: 20px; height: 158px; position: relative; vertical-align: bottom; }
- dock li a {
height: 153px; width: 48px; display: inline-block; text-align: center; position: relative; vertical-align: bottom; text-decoration: none; color: black; white-space: normal; letter-spacing: normal; line-height: 1.3em; text-align: center; font-family: Arial; padding-top: 40px; margin-bottom: 5px; overflow: visible; }
body.no_js #dock li a:hover { width: 128px !important; }
- dock li a span {
position: relative; line-height: 1.3em; display: none; text-align: center; font-weight: bold; font-size: 80%; padding: 4px 12px; background-color: #EEE;
opacity: 0.4; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
margin: 0px auto;
top: -40px;
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- dock li a:hover span {
display: inline-block; }
- dock li a:hover span:after {
display: block; height: 9px; color: transparent; /* background: transparent url("../img/uestclifebiot_span.png") center top no-repeat; */ position: absolute; content: ""; text-align: center; margin: 0px; padding: 0px; width: 100%; margin-left: -16px; }
- dock li a img {
height: auto; width: 100%; position: absolute; left: 0px; bottom: 10px; text-align: center; border: 0px none; /* margin-bottom: 15px; */ margin-bottom: 45px;
box-reflect: below 1px gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); -moz-box-reflect: below 1px -moz-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1))); }
