Team:Groningen/style.css
From 2012.igem.org
Line 79: | Line 79: | ||
width:55px; | width:55px; | ||
height:55px; | height:55px; | ||
+ | } | ||
+ | #navigation { | ||
+ | margin:0; | ||
+ | padding: 0; | ||
+ | clear:both; | ||
+ | width:950px; | ||
+ | height:51px; | ||
+ | background: #d6eaf8 url(images/dropdown-bg.gif) repeat-x left top; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.nav-main, | ||
+ | ul.nav-main li { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.nav-main { | ||
+ | position: relative; | ||
+ | z-index: 597; | ||
+ | } | ||
+ | |||
+ | ul.nav-main li:hover > ul { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.nav-main li.hover, | ||
+ | ul.nav-main li:hover { | ||
+ | position: relative; | ||
+ | z-index: 599; | ||
+ | cursor: pointer; | ||
+ | background: url(images/dropdown-bg-hover.gif) repeat-x left top; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | ul.nav-main li { | ||
+ | float:left; | ||
+ | display:block; | ||
+ | height: 51px; | ||
+ | color: #999; | ||
+ | font: 14px Arial, Helvetica, sans-serif; | ||
+ | background: url(images/separator.gif) no-repeat right center; | ||
+ | } | ||
+ | |||
+ | ul.nav-main li a { | ||
+ | display:block; | ||
+ | padding: 16px 16px 0 16px; | ||
+ | height: 35px; | ||
+ | color: #999; | ||
+ | font: 14px Arial, Helvetica, sans-serif; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | ul.nav-main li a:hover { | ||
+ | color:#D6D6D6; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | ul.nav-main *.list { | ||
+ | padding-right: 22px; | ||
+ | background: url(images/navigation-arrow.gif) no-repeat right top; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | ul.nav-sub { | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | padding:10px; | ||
+ | top: 48px; | ||
+ | left: 0; | ||
+ | z-index: 598; | ||
+ | background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top; | ||
+ | border-right: 1px solid #000; | ||
+ | border-bottom: 1px solid #000; | ||
+ | border-left: 1px solid #000; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.nav-sub li { | ||
+ | list-style:none; | ||
+ | display:block; | ||
+ | padding: 0; | ||
+ | height: 27px; | ||
+ | float: none; | ||
+ | width:145px; | ||
+ | border-bottom: 1px solid #5a5a5a; | ||
+ | background: none; | ||
+ | } | ||
+ | |||
+ | ul.nav-sub li a { | ||
+ | list-style:none; | ||
+ | display:block; | ||
+ | padding: 6px 5px 6px 5px; | ||
+ | height: 15px; | ||
+ | float: none; | ||
+ | width:145px; | ||
+ | background: none; | ||
+ | font: 12px Arial, Helvetica, sans-serif; | ||
} | } | ||
Revision as of 22:34, 8 August 2012
/* Ismael-
Don't worry, the previous style.css has been moved to Team:Groningen/styletest.css. I wanted to play around with the menu elements for a bit. You're right, the menu image is too narrow. The options need to be spaced further apart. There isn't enough space in between for the little cogs.
-Jon
- /
/*Header*/
- top-section
{
height: 208px; width: 550px; border: none;
}
/*test the menubar ID_8-8-2012-16:08*/
- p-logo
{
background-image:url(); background-repeat:no-repeat;
}
- expand
.expand-down {
font-family:Arial, Helvetica, sans-serif; line-height:normal; margin-top:20px; background-image: url(https://2012.igem.org/File:Groningen2012_AD_20120802_SmallCog.png) height:150px; width:800px; margin-left:200px; no-repeat; margin-bottom:30px;
} .expand-down * {
margin: 10; padding: 0;
} .expand-down ul {
padding-top:60px; margin-left:10px;
} .expand-down ul li {
float:left; list-style-type:none;
} .expand-down ul li a { text-decoration:none; } .expand-down ul li a img {
width:82px; height:80px; border:none;
} .expand-down ul li a span {
display:none;
} .expand-down ul li:hover a span {
display:block; font-size:14px; text-align:center; color:#fff;
} .expand-down ul li:hover a img {
width:100px; height:100px;
} .expand-down ul li:hover + li a img {
width:60px; height:60px;
} .expand-down ul li:hover + li + li a img {
width:55px; height:55px;
}
- navigation {
margin:0; padding: 0; clear:both; width:950px; height:51px; background: #d6eaf8 url(images/dropdown-bg.gif) repeat-x left top; }
ul.nav-main,
ul.nav-main li {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-main {
position: relative;
z-index: 597;
}
ul.nav-main li:hover > ul { visibility: visible; }
ul.nav-main li.hover,
ul.nav-main li:hover {
position: relative;
z-index: 599;
cursor: pointer;
background: url(images/dropdown-bg-hover.gif) repeat-x left top;
}
ul.nav-main li { float:left; display:block; height: 51px; color: #999; font: 14px Arial, Helvetica, sans-serif; background: url(images/separator.gif) no-repeat right center; }
ul.nav-main li a { display:block; padding: 16px 16px 0 16px; height: 35px; color: #999; font: 14px Arial, Helvetica, sans-serif; text-decoration:none; }
ul.nav-main li a:hover { color:#D6D6D6; }
ul.nav-main *.list { padding-right: 22px; background: url(images/navigation-arrow.gif) no-repeat right top; }
ul.nav-sub { visibility: hidden; position: absolute; padding:10px; top: 48px; left: 0; z-index: 598; background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; }
ul.nav-sub li {
list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
background: none;
}
ul.nav-sub li a { list-style:none; display:block; padding: 6px 5px 6px 5px; height: 15px; float: none; width:145px; background: none; font: 12px Arial, Helvetica, sans-serif; }
.bigcog {
background-image:url(); height: 100px; width: 100px; opacity: 40%; top: 25%; border: none; z-index: 0;
} .smallcog {
background-image:url(); height: 37px; width: 36px; opacity: 40%; top: 37.5%; border: none; z-index: 0;
}
- windmillarms
{
background-image:url(); height: 120px; width: 104px; border: none; z-index: 2;
}
/*Body*/ body {
background-attachment:fixed; background-image:url(); text-align: justify; border: none;
}
- content
{
position: relative; top:-5px; width: 1024px; padding: 0px 0px 0px 0px; background-color:transparent; border: none;
}
- bodyContent
{
width: 1024px; position: relative; padding: 0px 0px 0px 0px; background-color:transparent; border: none;
}
/*Suppress iGEM defaults*/ a[title="Main Page"]{display: none;} .firstHeading{display: none;}
- menubar{display: none;}
- search-controls{display: none;}
- contentSub{display: none;}
- catlinks{display: none;}
- footer-box{display: none;}
|}