Template:MIT-header

From 2011.igem.org

(Difference between revisions)
 
(58 intermediate revisions not shown)
Line 25: Line 25:
}
}
#top-section {
#top-section {
 +
   
     background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
     background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
     background-position: top;
     background-position: top;
Line 31: Line 32:
     border-width:0px;
     border-width:0px;
     border-top-width:1px;
     border-top-width:1px;
 +
}
}
 +
 +
#content {
#content {
     border-left-width:0px;
     border-left-width:0px;
Line 47: Line 51:
     background-color: white;
     background-color: white;
}
}
-
</style>
 
-
<style type="text/css">
 
-
<html>
+
#navbar
-
<head>
+
ul.navbar {
-
<style type="text/css">
+
-
ul
+
-
{
+
float:left;
float:left;
width:100%;
width:100%;
Line 61: Line 60:
list-style-type:none;
list-style-type:none;
}
}
-
a
+
 
-
{
+
ul.navbar a {
float:left;
float:left;
-
width:6em;
+
text-align:center;
 +
width:7em;
text-decoration:none;
text-decoration:none;
color:white;
color:white;
-
background-color:purple;
+
background-color:#1A2B32;
padding:0.2em 0.6em;
padding:0.2em 0.6em;
border-right:1px solid white;
border-right:1px solid white;
}
}
-
a:hover {background-color:#ff3300;}
+
ul.navbar a:hover {background-color:#A3ABAE;}
-
li {display:inline;}
+
ul.navbar li {display:inline;}
 +
 
 +
#long {
 +
width:10em;
 +
}
 +
 
 +
 
 +
.navbar {
 +
padding:0 20px;
 +
}
 +
 
</style>
</style>
</head>
</head>
<body>
<body>
-
<ul>
 
-
<li><a href="#">Link one</a></li>
 
-
<li><a href="#">Link two</a></li>
 
-
<li><a href="#">Link three</a></li>
 
-
<li><a href="#">Link four</a></li>
 
-
</ul>
 
-
<p>
+
 
-
In the example above, we let the ul element and the a element float to the left.
+
<!--navigation menu-->
-
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
+
<ul class="navbar">
-
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
+
<li><a href="https://2011.igem.org/Team:MIT">HOME</a></li>
-
We add some colors and borders to make it more fancy.
+
<li><a href="https://2011.igem.org/Team:MIT/Project/">PROJECT</a></li>
-
</p>
+
<li><a href="https://2011.igem.org/Team:MIT/Results/">DATA</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Notebook/">NOTEBOOK</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Tools/">MODEL</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Partners/">PARTNERS</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">TEAM</a></li>
 +
<li><a id="long" href="https://2011.igem.org/Team:MIT/HumanPractices/">HUMAN PRACTICES</a></li>
 +
</ul>
</body>
</body>
</html>
</html>

Latest revision as of 02:28, 29 October 2011

Retrieved from "http://2011.igem.org/Template:MIT-header"