Template:TemplateTop

From 2010.igem.org

(Difference between revisions)
Line 3: Line 3:
<title>Example Tabs</title>
<title>Example Tabs</title>
-
<link rel="stylesheet" href="https://static.igem.org/mediawiki/2010/4/4e/Basic.txt" />
+
<!-- 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;
-
<style type="text/css" media="screen">@import "https://static.igem.org/mediawiki/2010/d/df/Tabs.txt";</style>
+
position: absolute;
-
</head>
+
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;
-
<h1><a href="index.html">Example Tabs</a></h1>
+
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;
-
<div id="header">
+
font-size: small;
-
<ul id="primary">
+
color: #333;
-
+
-
<li><a href="index.html">Home</a></li>
+
 
-
+
 
-
<li><span>About Us</span>
+
.clearhack { display: inline; } /*Clears Box Model Hack in IE5*/
-
</div>
+
 
-
</ul>
+
 
-
</html>
+
 
 +
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

Example Tabs