Template:TemplateTop
From 2010.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
- | <title>Example Tabs</title> | + | <title>Example Tabs</title> |
+ | <!-- to są właściwe style, w sekcji head --> | ||
+ | <style type="text/css"> | ||
+ | html { | ||
+ | min-width: 600px; | ||
+ | background: #EDEBE3; | ||
+ | padding: 0.5em 2em 3em 2em; | ||
+ | } | ||
- | + | 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; | ||
+ | } | ||
- | + | a { color: #06C; } | |
+ | a:hover { color: #333; } | ||
+ | a:active { color: #000; } | ||
- | + | p { line-height: 140%; } | |
- | padding- | + | h1 { |
+ | font-family: trebuchet ms,arial,verdana,sans-serif; | ||
+ | font-weight: bold; | ||
+ | font-size: 140%; | ||
+ | color: #333; | ||
+ | padding-bottom: 2px; | ||
+ | border-bottom: 1px dotted #CCC; | ||
+ | margin: 0; | ||
} | } | ||
+ | .note { | ||
+ | background: #EEE; | ||
+ | padding: 4px; | ||
+ | font-family: tahoma,verdana,sans-serif; | ||
+ | font-size: 85%; | ||
+ | line-height: 130%; | ||
+ | } | ||
- | # | + | #main { |
- | + | text-align: left; | |
- | + | border: 1px solid #666; | |
background: #FFFDF3; | background: #FFFDF3; | ||
+ | clear: both; | ||
+ | width: 98%; | ||
+ | margin-top: -1px; | ||
+ | } | ||
+ | #bodyarea { | ||
+ | padding: 20px; | ||
min-height: 300px; | min-height: 300px; | ||
} | } | ||
- | + | #topbar { | |
- | # | + | padding-bottom: 0.5em; |
- | + | font-family: trebuchet ms,verdana,sans-serif; | |
- | + | font-weight: bold; | |
- | + | font-size: 200%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | #topbar a { text-decoration: none; color: #000; } | ||
- | # | + | #topbar a:hover { text-decoration: underline; } |
- | + | ||
- | + | /*///////////// Tabs Code ////////////*/ | |
- | + | ||
- | + | ||
- | + | #tabs { | |
- | + | font-family: tahoma,verdana,sans-serif; | |
- | + | font-size: 85%; | |
+ | clear: both; | ||
+ | text-align: center; | ||
} | } | ||
- | + | #tabs ul { | |
- | # | + | |
display: inline; | display: inline; | ||
- | + | list-style-type: none; | |
- | list-style: none; | + | margin: 0; |
+ | padding: 0; | ||
} | } | ||
+ | #tabs li { float: left; } | ||
- | # | + | #tabs a,span { width: 90px; } |
- | + | ||
- | + | ||
- | + | ||
+ | #tabs span { | ||
+ | position: relative; | ||
+ | top: 0; | ||
+ | margin: 0 2px 0 0; | ||
float: left; | float: left; | ||
- | + | background: #FFF3B3; | |
- | + | border-right: 1px solid #666; | |
- | + | border-top: 1px solid #666; | |
- | + | border-left: 1px solid #666; | |
- | + | padding: 6px 4px 6px 10px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
text-decoration: none; | text-decoration: none; | ||
- | |||
color: #333; | color: #333; | ||
} | } | ||
- | + | #tabs a { | |
- | # | + | position: relative; |
- | + | top: 0; | |
- | + | margin: 1px 2px 0 0; | |
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
background: #FFFAE1; | background: #FFFAE1; | ||
- | + | border-right: 1px solid #AAA; | |
- | border: 1px solid #AAA; | + | border-top: 1px solid #AAA; |
- | + | border-left: 1px solid #AAA; | |
- | border- | + | padding: 5px 4px 5px 10px; |
+ | text-decoration: none; | ||
+ | color: #333; | ||
} | } | ||
- | + | #tabs a:hover { | |
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
background: #FFF7CD; | background: #FFF7CD; | ||
- | + | position: relative; | |
- | padding | + | top: 0; |
+ | padding: 5px 4px 6px 10px; | ||
+ | margin-top: 0px; | ||
} | } | ||
- | + | #tabs a.active { | |
- | # | + | position: relative; |
- | position: | + | top: 0; |
- | + | margin: 0 2px 0 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
float: left; | float: left; | ||
- | + | background: #FFF3B3; | |
- | + | border-right: 1px solid #666; | |
- | + | border-top: 1px solid #666; | |
- | + | border-left: 1px solid #666; | |
- | + | padding: 6px 4px 6px 10px; | |
- | + | text-decoration: none; | |
- | + | ||
- | border: | + | |
- | + | ||
- | border- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | text-decoration: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
color: #333; | color: #333; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | #tabs a.active:hover { | |
- | # | + | position: relative; |
- | + | top: 0; | |
- | + | margin: 0 2px 0 0; | |
- | + | float: left; | |
- | + | background: #FFF3B3; | |
- | + | border-right: 1px solid #666; | |
- | + | border-top: 1px solid #666; | |
- | + | border-left: 1px solid #666; | |
- | + | padding: 6px 4px 6px 10px; | |
- | + | text-decoration: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
color: #333; | color: #333; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | #subtabs ul { | |
- | + | list-style-type: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
margin: 0; | margin: 0; | ||
+ | padding: 0; | ||
} | } | ||
- | + | #subtabs li { | |
- | + | float: left; | |
- | + | padding: 0 8px 0 8px; | |
- | + | border-left: 1px solid #CCC; | |
- | + | white-space: nowrap; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | padding | + | |
- | + | ||
- | border- | + | |
- | + | ||
- | + | ||
} | } | ||
+ | #subtabs li:first-child { border-left: none; } | ||
- | + | #subtabs { | |
- | + | font-family: tahoma,verdana,sans-serif; | |
- | + | ||
- | + | ||
- | + | ||
- | font-family: tahoma; | + | |
- | + | ||
font-size: 85%; | font-size: 85%; | ||
- | + | background: #FFF3B3; | |
- | + | color: #666; | |
- | + | padding: 5px 7px 7px 7px; /* for All other Browsers */ | |
- | + | ||
} | } | ||
- | + | </style> | |
<!-- koniec stylów --> | <!-- koniec stylów --> | ||
- | |||
</head> | </head> |
Revision as of 16:21, 1 July 2010