Team:Groningen/styletest2.css
From 2012.igem.org
m |
m |
||
(27 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | /* opacity and background-color:transparent must be placed in the html code, it does not work here*/ | ||
+ | |||
+ | #navmenu{ | ||
+ | list-style:none; | ||
+ | font-weight:bold; | ||
+ | margin-bottom:10px; | ||
+ | /* Clear floats */ | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | /* Bring the nav above everything else--uncomment if needed. | ||
+ | position:relative; | ||
+ | z-index:5; | ||
+ | */ | ||
+ | } | ||
+ | #navmenu li{ | ||
+ | float:left; | ||
+ | margin-right:10px; | ||
+ | position:relative; | ||
+ | } | ||
+ | #navmenu a{ | ||
+ | display:block; | ||
+ | padding:5px; | ||
+ | color:#fff; | ||
+ | background:#333; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | #navmenu a:hover{ | ||
+ | color:#fff; | ||
+ | background:#6b0c36; | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | |||
+ | #navmenu ul{ | ||
+ | background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */ | ||
+ | background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */ | ||
+ | list-style:none; | ||
+ | position:absolute; | ||
+ | left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ | ||
+ | } | ||
+ | #navmenu ul li{ | ||
+ | padding-top:0px; /* No padding between the li */ | ||
+ | float:none; | ||
+ | } | ||
+ | #navmenu ul a{ | ||
+ | white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ | ||
+ | } | ||
+ | #navmenu li:hover ul{ /* Display the dropdown on hover */ | ||
+ | left:0; /* Bring back on-screen when needed */ | ||
+ | } | ||
+ | #navmenu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ | ||
+ | background:#6b0c36; | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | #navmenu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */ | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | #navmenu li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ | ||
+ | background:#333; | ||
+ | } | ||
+ | |||
+ | |||
/*Header*/ | /*Header*/ | ||
- | + | .header | |
{ | { | ||
- | height: | + | height: 100px; |
- | width: | + | width: 80%; |
- | + | ||
} | } | ||
.menu | .menu | ||
{ | { | ||
- | + | width: 100px; | |
- | width: | + | |
} | } | ||
.sponsorsmenu | .sponsorsmenu | ||
{ | { | ||
- | + | width: 100px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | width: | + | |
} | } | ||
Line 24: | Line 78: | ||
{ | { | ||
background-image:url(https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png); | background-image:url(https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png); | ||
- | |||
- | |||
border: none; | border: none; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
Line 32: | Line 84: | ||
{ | { | ||
background-image:url(https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png); | background-image:url(https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png); | ||
- | width: | + | width: 37px; |
- | + | height: 36px; | |
- | + | ||
border: none; | border: none; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/*Body*/ | /*Body*/ | ||
Line 61: | Line 105: | ||
width: 1024px; | width: 1024px; | ||
padding: 0px 0px 0px 0px; | padding: 0px 0px 0px 0px; | ||
- | background | + | background: none; |
border: none; | border: none; | ||
} | } | ||
Line 69: | Line 113: | ||
position: relative; | position: relative; | ||
padding: 0px 0px 0px 0px; | padding: 0px 0px 0px 0px; | ||
- | background | + | background: none; |
border: none; | border: none; | ||
} | } | ||
Line 76: | Line 120: | ||
a[title="Main Page"]{display: none;} | a[title="Main Page"]{display: none;} | ||
.firstHeading{display: none;} | .firstHeading{display: none;} | ||
+ | #top-section{display: none;} | ||
#menubar{display: none;} | #menubar{display: none;} | ||
#p-logo{display: none;} | #p-logo{display: none;} |
Latest revision as of 22:48, 8 August 2012
/* opacity and background-color:transparent must be placed in the html code, it does not work here*/
- navmenu{
list-style:none; font-weight:bold; margin-bottom:10px; /* Clear floats */ float:left; width:100%; /* Bring the nav above everything else--uncomment if needed. position:relative; z-index:5; */ }
- navmenu li{
float:left; margin-right:10px; position:relative; }
- navmenu a{
display:block; padding:5px; color:#fff; background:#333; text-decoration:none; }
- navmenu a:hover{
color:#fff; background:#6b0c36; text-decoration:underline; }
- navmenu ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */ background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */ list-style:none; position:absolute; left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ }
- navmenu ul li{
padding-top:0px; /* No padding between the li */ float:none; }
- navmenu ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ }
- navmenu li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */ }
- navmenu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36; text-decoration:underline; }
- navmenu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none; }
- navmenu li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333; }
/*Header*/
.header
{
height: 100px; width: 80%;
} .menu {
width: 100px;
} .sponsorsmenu {
width: 100px;
}
.bigcog {
background-image:url(); border: none; background-repeat: no-repeat;
} .smallcog {
background-image:url(); width: 37px; height: 36px; border: none; background-repeat: no-repeat; background-position: center;
}
/*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: none; border: none;
}
- bodyContent
{
width: 1024px; position: relative; padding: 0px 0px 0px 0px; background: none; border: none;
}
/*Suppress iGEM defaults*/ a[title="Main Page"]{display: none;} .firstHeading{display: none;}
- top-section{display: none;}
- menubar{display: none;}
- p-logo{display: none;}
- search-controls{display: none;}
- contentSub{display: none;}
- catlinks{display: none;}
- footer-box{display: none;}