Template:Caltech Menubar

From 2012.igem.org

(Difference between revisions)
m (removed <head> tags)
 
(112 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<head>
 
<!-- This is a comment in html -->
<!-- This is a comment in html -->
Line 8: Line 7:
/* This is a comment in css */
/* This is a comment in css */
 +
/* Took tips from https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki */
/* Remove unwanted wiki formatting */
/* Remove unwanted wiki formatting */
/****************************/
/****************************/
Line 14: Line 14:
#top-section {
#top-section {
-
background-image:url('https://static.igem.org/mediawiki/2012/a/a8/Caltech_Header.png');
+
background-image:url('https://static.igem.org/mediawiki/2012/c/c5/Caltech2012Banner.gif');
background-repeat: no-repeat;
background-repeat: no-repeat;
         background-position: center top;
         background-position: center top;
-
height:275px ! important;
+
height:100px ! important;
}
}
-
#bodyContent { padding: 10px auto; width: 910px; margin: auto; clear: none; color:black}
+
#bodyContent { padding: 10px auto; width: 910px; margin: auto; clear: none; color:black; padding-bottom: 2em;}
 +
#left {
 +
width: 45%;
 +
float: left;}
 +
 +
#right {
 +
width: 55%;
 +
float: right;}
 +
 +
#left_2 {
 +
width: 92%;
 +
float: left;}
 +
 +
#right_2 {
 +
width: 8%;
 +
float: right;}
/* This sets the orange background of the screen. */
/* This sets the orange background of the screen. */
Line 43: Line 58:
#innercontent p {
#innercontent p {
     margin: 0.6em 0;}
     margin: 0.6em 0;}
-
h3, h4, h5, h6 {
+
h3, h4, h6 {
     border: none;
     border: none;
     font-weight: lighter;
     font-weight: lighter;
     color: #E56717; text-align:left}
     color: #E56717; text-align:left}
 +
 +
h5 {
 +
font-weight: lighter;
 +
color: #565051;
 +
text-align:right;}
 +
}
 +
/*
h1 {
h1 {
     border: none;
     border: none;
Line 52: Line 74:
     text-shadow: 0 1px rgba(255, 255, 255, 0.5);
     text-shadow: 0 1px rgba(255, 255, 255, 0.5);
     font-size: 30px;
     font-size: 30px;
-
     margin: 5px 0 0 0;
+
     margin: 5px 1px 1px 1px;
 +
    padding: 1px;
 +
 
     font-weight: bold;}
     font-weight: bold;}
 +
*/
 +
h1 {
 +
    color: #383838;
 +
    border: none;
 +
    padding: 25px 0 5px;
 +
    font-family: Arial;
 +
    font-size: 30px;
 +
    font-weight: bold;
 +
    line-height:28px;
 +
    margin-bottom: 0;}
 +
 +
h2 {
h2 {
     color: #383838;
     color: #383838;
Line 62: Line 98:
     font-weight: bold;
     font-weight: bold;
     margin-bottom: 0;}
     margin-bottom: 0;}
 +
#bodyContent h1, #bodyContent h2 {
#bodyContent h1, #bodyContent h2 {
     margin-bottom: 0;}
     margin-bottom: 0;}
Line 104: Line 141:
/************************************************************/
/************************************************************/
/* Main menu settings */
/* Main menu settings */
-
#centeredmenu {
+
/* lots of advice and some code taken from
-
   clear:both;
+
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/,
 +
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/,
 +
and the comment sections */
 +
#nav {
 +
   /* clear:both; */
   float:left;
   float:left;
   margin:0;
   margin:0;
   padding:0;
   padding:0;
-
   border-bottom:1px solid #000; /* black line below menu */
+
  border-top:2px solid #000; /* black line above menu */
-
   width:100%;
+
   border-bottom:2px solid #000; /* black line below menu */
-
   font-family:Verdana, Geneva, sans-serif; /* Menu font */
+
   /* width: auto; */
-
   font-size:90%; /* Menu text size */
+
   width:830px;
 +
  /* font-family: Verdana, Geneva, sans-serif; Menu font */
 +
   /* font-size:100%; Menu text size */
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   position:relative;
   position:relative;
Line 118: Line 161:
/* Top menu items */
/* Top menu items */
-
#centeredmenu ul {
+
#nav ul {
   margin:0;
   margin:0;
   padding:0;
   padding:0;
 +
padding-below: .5em;
   list-style:none;
   list-style:none;
   float:right;
   float:right;
Line 126: Line 170:
   right:50%;
   right:50%;
}
}
-
#centeredmenu ul li {
+
#nav ul li {
-
   margin:0 0 0 1px;
+
   margin:0 0 0 5px;
   padding:0;
   padding:0;
   float:left;
   float:left;
Line 133: Line 177:
   left:50%;
   left:50%;
   top:1px;
   top:1px;
 +
  display: block;
}
}
-
#centeredmenu ul li a {
+
#nav ul li a {
   display:block;
   display:block;
   margin:0;
   margin:0;
-
   padding:.6em .5em .4em;
+
  /* padding: .8em; */
-
   font-size:1em;
+
   padding:.6em .5em .4em;  
 +
   /* font-size:1em; */
   line-height:1em;
   line-height:1em;
-
   background:#ddd;
+
   /* background:#A9A9A9;  
   text-decoration:none;
   text-decoration:none;
-
   color:#444;
+
   color:##E56717;
-
   font-weight:bold;
+
   font-weight:bold; */
 +
  background: #000000;
   border-bottom:1px solid #000;
   border-bottom:1px solid #000;
 +
  width: auto;
}
}
-
#centeredmenu ul li.active a {
+
#nav ul li.active a {
   color:#fff;
   color:#fff;
   background:#000;
   background:#000;
}
}
-
#centeredmenu ul li a:hover {
+
#nav ul li a:hover {
   background:#36f; /* Top menu items background colour */
   background:#36f; /* Top menu items background colour */
   color:#fff;
   color:#fff;
   border-bottom:1px solid #03f;
   border-bottom:1px solid #03f;
}
}
-
#centeredmenu ul li:hover a,
+
#nav ul li:hover a,
-
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
+
#nav ul li.hover a { /* This line is required for IE 6 and below */
   background:#36f; /* Top menu items background colour */
   background:#36f; /* Top menu items background colour */
   color:#fff;
   color:#fff;
Line 163: Line 211:
/* Submenu items */
/* Submenu items */
-
#centeredmenu ul ul {
+
#nav ul ul {
   display:none; /* Sub menus are hiden by default */
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   position:absolute;
Line 169: Line 217:
   left:0;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   right:auto; /*resets the right:50% on the parent ul */
-
   width:10em; /* width of the drop-down menus */
+
   width:auto /* 10em */; /* width of the drop-down menus */
}
}
-
#centeredmenu ul ul li {
+
#nav ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   margin:0; /* Reset the 1px margin from the top menu */
Line 177: Line 225:
   width:100%;
   width:100%;
}
}
-
#centeredmenu ul ul li a,
+
#nav ul ul li a,
-
#centeredmenu ul li.active li a,
+
#nav ul li.active li a,
-
#centeredmenu ul li:hover ul li a,
+
#nav ul li:hover ul li a,
-
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
+
#nav ul li.hover ul li a { /* This line is required for IE 6 and below */
-
   font-size:.8em;
+
   /*font-size:.8em; .8em; */
   font-weight:normal; /* resets the bold set for the top level menu items */
   font-weight:normal; /* resets the bold set for the top level menu items */
   background:#eee;
   background:#eee;
Line 188: Line 236:
   border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
   border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
}
}
-
#centeredmenu ul ul li a:hover,
+
#nav ul ul li a:hover,
-
#centeredmenu ul li.active ul li a:hover,
+
#nav ul li.active ul li a:hover,
-
#centeredmenu ul li:hover ul li a:hover,
+
#nav ul li:hover ul li a:hover,
-
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
+
#nav ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background:#36f; /* Sub menu items background colour */
   background:#36f; /* Sub menu items background colour */
   color:#fff;
   color:#fff;
Line 197: Line 245:
/* Flip the last submenu so it stays within the page */
/* Flip the last submenu so it stays within the page */
-
#centeredmenu ul ul.last {
+
#nav ul ul.last {
   left:auto; /* reset left:0; value */
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
   right:0; /* Set right value instead */
Line 203: Line 251:
/* Make the sub menus appear on hover */
/* Make the sub menus appear on hover */
-
#centeredmenu ul li:hover ul,
+
#nav ul li:hover ul,
-
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
+
#nav ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
   display:block; /* Show the sub menus */
}
}
-
 
</style>
</style>
-
</head>
 
</html>
</html>

Latest revision as of 19:00, 3 October 2012

Retrieved from "http://2012.igem.org/Template:Caltech_Menubar"