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;
 +
}
-
  <!-- to są właściwe style, w sekcji head -->
+
body, div, td, th, h2, h3, h4 { /* redundant rules for bad browsers */ 
-
   <style type="text/css">
+
    font-family: verdana,sans-serif;
-
    #main {
+
font-size:   x-small;
-
border: 1px solid #666;
+
voice-family: "\"}\"";
 +
voice-family: inherit;
 +
font-size: small;
 +
color: #333;
 +
} 
-
clear: both;
+
a { color: #06C; }
 +
a:hover { color: #333; }
 +
a:active { color: #000; }
-
background: #FFF3B3;
+
p { line-height: 140%; }
-
padding-top: 2em;
+
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%;
 +
}
-
#contents {
+
#main {
-
padding: 1.5em;
+
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 {
-
#header {
+
padding-bottom: 0.5em;
-
position: relative;
+
font-family: trebuchet ms,verdana,sans-serif;
-
 
+
font-weight: bold;
-
width: 100%;
+
font-size: 200%;
-
+
-
height: 3em;
+
-
 
+
-
width: 45em;/* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
+
}
}
 +
#topbar a { text-decoration: none; color: #000; }
-
#header ul#primary {
+
#topbar a:hover { text-decoration: underline; }
-
margin: 0;
+
-
padding: 0;
+
/*///////////// Tabs Code ////////////*/
-
+
-
position: absolute;
+
-
bottom: -1px;
+
#tabs {
-
 
+
font-family: tahoma,verdana,sans-serif;
-
width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
+
font-size: 85%;
 +
clear: both;
 +
text-align: center;
}
}
-
 
+
#tabs ul {
-
#header ul#primary li  {
+
display: inline;
display: inline;
-
 
+
list-style-type: none;
-
list-style: none;
+
margin: 0;
 +
padding: 0;
}
}
 +
#tabs li { float: left; }
-
#header ul#primary a,#header ul#primary span,#header ul#primary a.current {
+
#tabs a,span { width: 90px; }
-
width: 8em;
+
-
 
+
-
display: block;
+
 +
#tabs span {
 +
position: relative;
 +
top: 0;
 +
margin: 0 2px 0 0;
float: left;
float: left;
-
+
background: #FFF3B3;
-
padding: 4px 0;
+
border-right: 1px solid #666;
-
margin: 1px 2px 0 0;
+
border-top: 1px solid #666;
-
 
+
border-left: 1px solid #666;
-
text-align: center;
+
padding: 6px 4px 6px 10px;
-
 
+
-
font-family: tahoma, verdana, sans-serif;
+
-
 
+
-
font-size: 85%;
+
text-decoration: none;
text-decoration: none;
-
 
color: #333;
color: #333;
}
}
-
 
+
#tabs a {
-
#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
+
position: relative;
-
border: 1px solid #666;
+
top: 0;
-
 
+
margin: 1px 2px 0 0;
-
border-bottom: none;
+
float: left;
-
 
+
-
background: #FFF3B3;
+
-
 
+
-
padding-bottom: 6px;
+
-
 
+
-
margin-top: 0;
+
-
}
+
-
 
+
-
 
+
-
#header ul#primary a {
+
background: #FFFAE1;
background: #FFFAE1;
-
 
+
border-right: 1px solid #AAA;
-
border: 1px solid #AAA;
+
border-top: 1px solid #AAA;
-
 
+
border-left: 1px solid #AAA;
-
border-bottom: none;
+
padding: 5px 4px 5px 10px;
 +
text-decoration: none;
 +
color: #333;
}
}
-
 
+
#tabs a:hover {
-
#header ul#primary a:hover {
+
-
margin-top: 0;
+
-
 
+
-
border-color: #666;
+
-
 
+
background: #FFF7CD;
background: #FFF7CD;
-
 
+
position: relative;
-
padding-bottom: 5px;
+
top: 0;
 +
padding: 5px 4px 6px 10px;
 +
margin-top: 0px;
}
}
-
 
+
#tabs a.active {
-
#header ul#secondary {
+
position: relative;
-
position: absolute;
+
top: 0;
-
 
+
margin: 0 2px 0 0;
-
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;
float: left;
-
 
+
background: #FFF3B3;
-
padding: 0 10px;
+
border-right: 1px solid #666;
-
 
+
border-top: 1px solid #666;
-
margin: 0;
+
border-left: 1px solid #666;
-
 
+
padding: 6px 4px 6px 10px;
-
text-align: auto;
+
text-decoration: none;
-
 
+
-
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;
color: #333;
-
 
-
background: transparent;
 
-
 
-
padding: 0 10px;
 
-
 
-
border: none;
 
-
 
-
border-right: 1px dotted #AAA;
 
}
}
-
 
+
#tabs a.active:hover {
-
#header ul#secondary li a:active {
+
position: relative;
-
color: #000;
+
top: 0;
-
 
+
margin: 0 2px 0 0;
-
background: transparent;
+
float: left;
-
}
+
background: #FFF3B3;
-
 
+
border-right: 1px solid #666;
-
 
+
border-top: 1px solid #666;
-
#header ul#secondary li:last-child a { border: none; }
+
border-left: 1px solid #666;
-
<!-- basic css -->
+
padding: 6px 4px 6px 10px;
-
html { min-width: 600px; }
+
text-decoration: none;
-
 
+
-
 
+
-
 
+
-
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;
color: #333;
-
} 
 
-
 
-
 
-
.clearhack { display: inline; } /*Clears Box Model Hack in IE5*/
 
-
 
-
 
-
 
-
body {
 
-
background: #EDEBE3;
 
-
 
-
color: #333;
 
-
 
-
padding: 1em 20px 3em 20px;
 
-
 
-
margin: 0;
 
}
}
-
 
+
#subtabs ul {
-
 
+
list-style-type: none;
-
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;
margin: 0;
 +
padding: 0;
}
}
-
 
+
#subtabs li {
-
 
+
float: left;
-
h1 a { text-decoration: none;
+
padding: 0 8px 0 8px;
-
color: #333; }
+
border-left: 1px solid #CCC;
-
 
+
white-space: nowrap;
-
 
+
-
h1 a:hover { border-bottom: 1px dotted #666;
+
-
color: #000; }
+
-
 
+
-
 
+
-
 
+
-
h2 {
+
-
font-size: 140%;
+
-
 
+
-
padding-bottom: 2px;
+
-
 
+
-
border-bottom: 1px solid #CCC;
+
-
 
+
-
margin: 0;
+
}
}
 +
#subtabs li:first-child { border-left: none; }
-
p.note {
+
#subtabs {
-
background: #EEE;
+
font-family: tahoma,verdana,sans-serif;
-
 
+
-
padding: 4px;
+
-
 
+
-
font-family: tahoma;
+
-
 
+
font-size: 85%;
font-size: 85%;
-
 
+
background: #FFF3B3;
-
line-height: 130%;
+
color: #666;
-
 
+
padding: 5px 7px 7px 7px; /* for All other Browsers */
-
margin-top: 0;
+
}
}
-
  </style>
+
        </style>
  <!-- koniec stylów -->
  <!-- koniec stylów -->
-
 
</head>
</head>

Revision as of 16:21, 1 July 2010

Example Tabs

Retrieved from "http://2010.igem.org/Template:TemplateTop"