Template:TemplateTop
From 2010.igem.org
(Difference between revisions)
Line 3: | Line 3: | ||
<title>Example Tabs</title> | <title>Example Tabs</title> | ||
- | < | + | <!-- to są właściwe style, w sekcji head --> |
+ | <style type="text/css"> | ||
+ | #main { | ||
+ | border: 1px solid #666; | ||
+ | |||
+ | clear: both; | ||
+ | |||
+ | background: #FFF3B3; | ||
+ | |||
+ | padding-top: 2em; | ||
+ | } | ||
+ | |||
+ | |||
+ | #contents { | ||
+ | padding: 1.5em; | ||
+ | |||
+ | background: #FFFDF3; | ||
+ | |||
+ | min-height: 300px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header { | ||
+ | position: relative; | ||
+ | |||
+ | width: 100%; | ||
+ | height: 3em; | ||
+ | |||
+ | width: 45em;/* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */ | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#primary { | ||
+ | margin: 0; | ||
+ | |||
+ | padding: 0; | ||
- | + | position: absolute; | |
- | + | bottom: -1px; | |
+ | width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */ | ||
+ | } | ||
+ | |||
+ | #header ul#primary li { | ||
+ | display: inline; | ||
+ | |||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#primary a,#header ul#primary span,#header ul#primary a.current { | ||
+ | width: 8em; | ||
+ | |||
+ | display: block; | ||
+ | |||
+ | float: left; | ||
- | + | padding: 4px 0; | |
+ | margin: 1px 2px 0 0; | ||
+ | |||
+ | text-align: center; | ||
+ | |||
+ | font-family: tahoma, verdana, sans-serif; | ||
+ | |||
+ | font-size: 85%; | ||
+ | text-decoration: none; | ||
+ | |||
+ | color: #333; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover { | ||
+ | border: 1px solid #666; | ||
+ | |||
+ | border-bottom: none; | ||
+ | |||
+ | background: #FFF3B3; | ||
+ | |||
+ | padding-bottom: 6px; | ||
+ | |||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#primary a { | ||
+ | background: #FFFAE1; | ||
+ | |||
+ | border: 1px solid #AAA; | ||
+ | |||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#primary a:hover { | ||
+ | margin-top: 0; | ||
+ | |||
+ | border-color: #666; | ||
+ | |||
+ | background: #FFF7CD; | ||
+ | |||
+ | padding-bottom: 5px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#secondary { | ||
+ | position: absolute; | ||
+ | |||
+ | margin: 0; | ||
+ | |||
+ | padding: 0; | ||
+ | |||
+ | bottom: -1.4em; | ||
+ | left: 1px; | ||
+ | |||
+ | width: 50em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */ | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#secondary li a,#header ul#secondary li span { | ||
+ | width: auto; | ||
+ | |||
+ | display: block; | ||
+ | |||
+ | float: left; | ||
+ | |||
+ | padding: 0 10px; | ||
+ | |||
+ | margin: 0; | ||
+ | |||
+ | text-align: auto; | ||
+ | |||
+ | border: none; | ||
+ | |||
+ | border-right: | ||
+ | 1px dotted #AAA; | ||
+ | |||
+ | background: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#secondary li a { | ||
+ | color: #06C; | ||
+ | |||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#secondary li a:hover { | ||
+ | color: #333; | ||
+ | |||
+ | background: transparent; | ||
+ | |||
+ | padding: 0 10px; | ||
+ | |||
+ | border: none; | ||
+ | |||
+ | border-right: 1px dotted #AAA; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#secondary li a:active { | ||
+ | color: #000; | ||
+ | |||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header ul#secondary li:last-child a { border: none; } | ||
+ | <!-- basic css --> | ||
+ | html { min-width: 600px; } | ||
+ | |||
+ | |||
+ | |||
+ | body, div, td, th, h2, h3, h4 { /* redundant rules for bad browsers */ | ||
+ | |||
+ | font-family: verdana,sans-serif; | ||
+ | |||
+ | font-size: x-small; | ||
+ | |||
+ | voice-family: "\"}\""; | ||
+ | |||
+ | voice-family: inherit; | ||
- | + | font-size: small; | |
- | + | color: #333; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | .clearhack { display: inline; } /*Clears Box Model Hack in IE5*/ | |
- | </ | + | |
- | < | + | |
- | </ | + | |
+ | body { | ||
+ | background: #EDEBE3; | ||
+ | |||
+ | color: #333; | ||
+ | |||
+ | padding: 1em 20px 3em 20px; | ||
+ | |||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | a { color: #06C; } | ||
+ | |||
+ | a:hover { color: #333; } | ||
+ | |||
+ | a:active { color: #000; } | ||
+ | |||
+ | |||
+ | |||
+ | p { line-height: 140%; } | ||
+ | |||
+ | |||
+ | |||
+ | h1,h2 { | ||
+ | font-family: trebuchet ms; | ||
+ | |||
+ | font-weight: bold; | ||
+ | |||
+ | color: #333; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | h1 { | ||
+ | font-size: 180%; | ||
+ | |||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | h1 a { text-decoration: none; | ||
+ | color: #333; } | ||
+ | |||
+ | |||
+ | h1 a:hover { border-bottom: 1px dotted #666; | ||
+ | color: #000; } | ||
+ | |||
+ | |||
+ | |||
+ | h2 { | ||
+ | font-size: 140%; | ||
+ | |||
+ | padding-bottom: 2px; | ||
+ | |||
+ | border-bottom: 1px solid #CCC; | ||
+ | |||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | p.note { | ||
+ | background: #EEE; | ||
+ | |||
+ | padding: 4px; | ||
+ | |||
+ | font-family: tahoma; | ||
+ | |||
+ | font-size: 85%; | ||
+ | |||
+ | line-height: 130%; | ||
+ | |||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <!-- koniec stylów --> | ||
+ | |||
+ | </head> |
Revision as of 16:06, 1 July 2010