Template:MIT-header

From 2011.igem.org

(Difference between revisions)
Line 36: Line 36:
     width:965px;
     width:965px;
}
}
-
#menubar {
+
<html>
-
    background-color: white;
+
<head>
-
}
+
<style type="text/css">
-
#menubar
+
-
 
+
ul
ul
{
{
 +
float:left;
width:100%;
width:100%;
padding:0;
padding:0;
Line 54: Line 53:
text-decoration:none;
text-decoration:none;
color:white;
color:white;
-
background-color:gray;
+
background-color:purple;
padding:0.2em 0.6em;
padding:0.2em 0.6em;
border-right:1px solid white;
border-right:1px solid white;
}
}
-
a:hover {background-color:#666666;}
+
a:hover {background-color:#ff3300;}
li {display:inline;}
li {display:inline;}
-
.right-menu li a {
 
-
    color: black;
 
-
    background-color: white;
 
-
}
 
</style>
</style>
</head>
</head>
Line 75: Line 70:
</ul>
</ul>
 +
<p>
 +
In the example above, we let the ul element and the a element float to the left.
 +
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.
 +
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).
 +
We add some colors and borders to make it more fancy.
 +
</p>
</body>
</body>
</html>
</html>

Revision as of 00:43, 25 October 2011

In the example above, we let the ul element and the a element float to the left. 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. 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). We add some colors and borders to make it more fancy.

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