Team:Groningen/styletest2.css
From 2012.igem.org
m |
m |
||
(28 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 | ||
{ | { | ||
- | + | height: 100px; | |
- | + | width: 80%; | |
- | + | ||
} | } | ||
- | + | .menu | |
{ | { | ||
- | + | width: 100px; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .sponsorsmenu | |
{ | { | ||
- | + | width: 100px; | |
- | + | ||
- | + | ||
} | } | ||
Line 59: | 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 70: | 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: 37px; | |
- | + | height: 36px; | |
- | + | ||
- | + | ||
border: none; | border: none; | ||
- | |||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/*Body*/ | /*Body*/ | ||
Line 102: | Line 105: | ||
width: 1024px; | width: 1024px; | ||
padding: 0px 0px 0px 0px; | padding: 0px 0px 0px 0px; | ||
- | background | + | background: none; |
border: none; | border: none; | ||
} | } | ||
Line 110: | Line 113: | ||
position: relative; | position: relative; | ||
padding: 0px 0px 0px 0px; | padding: 0px 0px 0px 0px; | ||
- | background | + | background: none; |
border: none; | border: none; | ||
} | } | ||
Line 117: | 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;}