Team:Johns Hopkins/Templates/css/navbar

From 2011.igem.org

(Difference between revisions)
(navbar css)
Line 1: Line 1:
-
#dolphincontainer{position:relative;border-bottom: 2px solid navy; color:#E0E0E0;background:#143D55;
+
.droplinetabs{
-
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
+
overflow: hidden;
-
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
+
border-bottom: 1px solid gray; /*underline across bottom of main tabs*/
-
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
+
}
-
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
+
-
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
+
-
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
+
-
#dolphinnav ul li a:hover{color:#fff;background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}
+
-
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
+
-
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
+
-
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
+
-
#dolphin_inner{color: white; padding: 5px; font-size: 80%; height: 1em}
+
.droplinetabs ul{
 +
font: bold 11px Verdana, sans-serif;
 +
margin: 0;
 +
padding: 0;
 +
width: 100%;
 +
list-style: none;
 +
}
-
#dolphin_inner a:link, #dolphin_inner a:visited, #dolphin_inner a:active{color: white}
+
.droplinetabs li{
-
#dolphin_inner a:hover{color: yellow}
+
display: inline;
 +
margin: 0 2px 0 0;
 +
padding: 0;
 +
text-transform: uppercase;
 +
}
-
.innercontent{display: none;}
+
 
 +
.droplinetabs a{
 +
float: left;
 +
color: white;
 +
background: #c76023 url(leftedge.gif) no-repeat left top; /*default background color of tabs, left corner image*/
 +
margin: 0 4px 0 0;
 +
padding: 0 0 4px 3px;
 +
text-decoration: none;
 +
letter-spacing: 1px;
 +
}
 +
 
 +
.droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{
 +
color: white;
 +
}
 +
 
 +
.droplinetabs a span{
 +
float: left;
 +
display: block;
 +
background: transparent url(rightedge.gif) no-repeat right top; /*right corner image*/
 +
padding: 7px 9px 3px 6px;
 +
cursor: pointer;
 +
}
 +
 
 +
.droplinetabs a span{
 +
float: none;
 +
}
 +
 
 +
 
 +
.droplinetabs a:hover{
 +
background-color: #b05016; /*background color of tabs onMouseover*/
 +
color: white;
 +
}
 +
 
 +
.droplinetabs a:hover span{
 +
background-color: transparent;
 +
}
 +
 
 +
/* Sub level menus*/
 +
.droplinetabs ul li ul{
 +
position: absolute;
 +
z-index: 100;
 +
left: 0;
 +
top: 0;
 +
background: #c76023; /*sub menu background color */
 +
visibility: hidden;
 +
}
 +
 
 +
/* Sub level menu links style */
 +
.droplinetabs ul li ul li a{
 +
font: normal 13px Verdana;
 +
padding: 6px;
 +
padding-right: 8px;
 +
margin: 0;
 +
background: #c76023; /*sub menu background color */
 +
}
 +
 
 +
.droplinetabs ul li ul li a span{
 +
background: #c76023; /*sub menu background color */
 +
}
 +
 
 +
.droplinetabs ul li ul li a:hover{ /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */
 +
background: #714421;
 +
-webkit-border-radius: 5px; 
 +
-moz-border-radius: 5px;
 +
-khtml-border-radius: 5px; 
 +
border-radius: 5px;
 +
}

Revision as of 21:31, 14 July 2011

.droplinetabs{ overflow: hidden; border-bottom: 1px solid gray; /*underline across bottom of main tabs*/ }

.droplinetabs ul{ font: bold 11px Verdana, sans-serif; margin: 0; padding: 0; width: 100%; list-style: none; }

.droplinetabs li{ display: inline; margin: 0 2px 0 0; padding: 0; text-transform: uppercase; }


.droplinetabs a{ float: left; color: white; background: #c76023 url(leftedge.gif) no-repeat left top; /*default background color of tabs, left corner image*/ margin: 0 4px 0 0; padding: 0 0 4px 3px; text-decoration: none; letter-spacing: 1px; }

.droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{ color: white; }

.droplinetabs a span{ float: left; display: block; background: transparent url(rightedge.gif) no-repeat right top; /*right corner image*/ padding: 7px 9px 3px 6px; cursor: pointer; }

.droplinetabs a span{ float: none; }


.droplinetabs a:hover{ background-color: #b05016; /*background color of tabs onMouseover*/ color: white; }

.droplinetabs a:hover span{ background-color: transparent; }

/* Sub level menus*/ .droplinetabs ul li ul{ position: absolute; z-index: 100; left: 0; top: 0; background: #c76023; /*sub menu background color */ visibility: hidden; }

/* Sub level menu links style */ .droplinetabs ul li ul li a{ font: normal 13px Verdana; padding: 6px; padding-right: 8px; margin: 0; background: #c76023; /*sub menu background color */ }

.droplinetabs ul li ul li a span{ background: #c76023; /*sub menu background color */ }

.droplinetabs ul li ul li a:hover{ /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */ background: #714421; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }

Retrieved from "http://2011.igem.org/Team:Johns_Hopkins/Templates/css/navbar"