Team:Groningen/styletest2.css

From 2012.igem.org

(Difference between revisions)
m
m
 
(13 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
.header
Line 4: Line 65:
     height: 100px;
     height: 100px;
     width: 80%;
     width: 80%;
-
    background-color: transparent;
 
}
}
.menu
.menu
{
{
-
    height: 100px;
 
     width: 100px;
     width: 100px;
-
    background-repeat: no-repeat;
 
-
    background-color: transparent;
 
}
}
.sponsorsmenu
.sponsorsmenu
{
{
-
    height: 100px;
 
     width: 100px;
     width: 100px;
-
    background-repeat: no-repeat;
 
-
    background-color: transparent;
 
-
}
 
-
.menutext
 
-
{
 
-
    width: 100px;
 
-
    background-color: transparent;
 
}
}
 +
.bigcog
.bigcog
{
{
     background-image:url(http://2012.igem.org/wiki/images/b/b6/Groningen2012_AD_20120802_BigCog.png);
     background-image:url(http://2012.igem.org/wiki/images/b/b6/Groningen2012_AD_20120802_BigCog.png);
-
    width: 100px;
 
-
    height: 100px;
 
-
    opacity: 40%;
 
     border: none;  
     border: none;  
     background-repeat: no-repeat;
     background-repeat: no-repeat;
-
    background-color: transparent;
 
}
}
.smallcog
.smallcog
Line 40: Line 86:
     width: 37px;
     width: 37px;
     height: 36px;
     height: 36px;
-
    opacity: 40%;
 
     border: none;  
     border: none;  
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-position: center;
     background-position: center;
-
    background-color: transparent;
 
}
}
-
#windmillarms
 
-
{
 
-
    background-image:url(http://2012.igem.org/wiki/images/e/e4/Groningen2012_AD_20120802_WindmillArms.png);
 
-
    height: 120px;
 
-
    width: 104px;
 
-
    border: none;
 
-
    background-repeat: no-repeat;
 
-
    background-color: transparent;
 
-
}
 
-
 
/*Body*/
/*Body*/
Line 71: Line 105:
     width: 1024px;
     width: 1024px;
     padding: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
-
     background-color:transparent;
+
     background: none;
     border: none;
     border: none;
}
}
Line 79: Line 113:
     position: relative;
     position: relative;
     padding: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
-
     background-color:transparent;
+
     background: none;
     border: none;
     border: 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*/

  1. 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; */ }

  1. navmenu li{

float:left; margin-right:10px; position:relative; }

  1. navmenu a{

display:block; padding:5px; color:#fff; background:#333; text-decoration:none; }

  1. navmenu a:hover{

color:#fff; background:#6b0c36; text-decoration:underline; }

  1. 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;) */ }

  1. navmenu ul li{

padding-top:0px; /* No padding between the li */ float:none; }

  1. navmenu ul a{

white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ }

  1. navmenu li:hover ul{ /* Display the dropdown on hover */

left:0; /* Bring back on-screen when needed */ }

  1. 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; }

  1. 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; }

  1. 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(Groningen2012_AD_20120802_BigCog.png);
   border: none; 
   background-repeat: no-repeat;

} .smallcog {

   background-image:url(Groningen2012_AD_20120802_SmallCog.png);
   width: 37px;
   height: 36px;
   border: none; 
   background-repeat: no-repeat;
   background-position: center;

}

/*Body*/ body {

   background-attachment:fixed;
   background-image:url(Groningen2012_AD_20120802_Background.png);
   text-align: justify;
   border: none;

}

  1. content

{

   position: relative;
   top:-5px;
   width: 1024px;
   padding: 0px 0px 0px 0px;
   background: none;
   border: none;

}

  1. 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;}

  1. top-section{display: none;}
  2. menubar{display: none;}
  3. p-logo{display: none;}
  4. search-controls{display: none;}
  5. contentSub{display: none;}
  6. catlinks{display: none;}
  7. footer-box{display: none;}