Team:Groningen/style.css

From 2012.igem.org

(Difference between revisions)
 
(61 intermediate revisions not shown)
Line 7: Line 7:
*/
*/
-
<html>
+
/*Header*/
-
<style type="text/css">
+
 
-
<!--
+
/*test the menubar ID_8-8-2012-16:08*/
-
.expand-down {
+
 
-
  font-family:Arial, Helvetica, sans-serif;
+
#expand
-
  line-height:normal;
+
 
-
  margin-top:20px;
+
.expand-down  
-
  height:150px;
+
{
-
  width:500px;
+
 
-
  background: url(images/macosx-style-background.png) no-repeat;
+
    font-family: Arial,Helvetica,sans-serif;
-
  margin-bottom:30px;
+
    line-height: normal;
 +
    margin-bottom: 30px;
 +
 
 +
    margin-top: 0px;
 +
z-index:1;
}
}
.expand-down * {
.expand-down * {
-
   margin: 0;
+
   margin: 0px;
   padding: 0;
   padding: 0;
 +
z-index:1;
 +
}
}
.expand-down ul {
.expand-down ul {
-
   padding-top:10px;
+
   padding-top:60px;
-
  margin-left:10px;
+
z-index:1;
 +
 
}
}
.expand-down ul li {
.expand-down ul li {
-
  float:left;
+
 
   list-style-type:none;
   list-style-type:none;
 +
z-index:1;
}
}
.expand-down ul li a {
.expand-down ul li a {
text-decoration:none;
text-decoration:none;
 +
z-index:1;
}
}
.expand-down ul li a img {
.expand-down ul li a img {
-
   width:50px;
+
   width:82px;
-
   height:50px;
+
   height:80px;
   border:none;
   border:none;
 +
z-index:1;
}
}
.expand-down ul li a span {
.expand-down ul li a span {
   display:none;
   display:none;
 +
z-index:1;
}
}
.expand-down ul li:hover a span {
.expand-down ul li:hover a span {
Line 47: Line 58:
   text-align:center;
   text-align:center;
   color:#fff;
   color:#fff;
 +
z-index:1;
}
}
.expand-down ul li:hover a img {
.expand-down ul li:hover a img {
-
   width:100px;
+
   width:80px;
-
   height:100px;
+
   height:82px;
 +
z-index:1;
}
}
.expand-down ul li:hover + li a img {
.expand-down ul li:hover + li a img {
-
   width:60px;
+
   width:80px;
-
   height:60px;
+
   height:82px;
 +
z-index:1;
}
}
.expand-down ul li:hover + li + li a img {
.expand-down ul li:hover + li + li a img {
-
   width:55px;
+
   width:80px;
-
   height:55px;
+
   height:82px;
-
}
+
z-index:1;
-
.expand-up {
 
-
  font-family:Arial, Helvetica, sans-serif;
 
-
  line-height:normal;
 
-
  height:150px;
 
-
  width:500px;
 
-
  background: url(images/macosx-style-background.png) no-repeat;
 
-
  overflow:visible;
 
-
  margin-bottom:30px;
 
-
}
 
-
.expand-up * {
 
-
  margin: 0;
 
-
  padding: 0;
 
-
}
 
-
.expand-up ul {
 
-
  margin-left:10px;
 
-
}
 
-
.expand-up ul li {
 
-
  float:left;
 
-
  list-style-type:none;
 
-
  padding-top:65px;
 
-
  margin-top:25px;
 
-
}
 
-
.expand-up ul li a {
 
-
text-decoration:none;
 
-
}
 
-
.expand-up ul li a img {
 
-
  width:50px;
 
-
  height:50px;
 
-
  border:none;
 
-
}
 
-
.expand-up ul li a span {
 
-
  display:none;
 
-
  font-size:14px;
 
-
  text-align:center;
 
-
  color:#fff;
 
-
}
 
-
.expand-up ul li:hover a span {
 
-
  display:block;
 
-
  margin-top:-65px;
 
-
}
 
-
.expand-up ul li:hover a img {
 
-
  width:100px;
 
-
  height:100px;
 
-
}
 
-
.expand-up ul li:hover + li a img {
 
-
  width:60px;
 
-
  height:60px;
 
-
  margin-top:-10px;
 
}
}
-
-->
+
#image{
-
</style>
+
  margin:80px 82px;
-
 
+
-
</head>
+
-
<body>
+
-
<div class="expand-down">
+
-
<ul>
+
-
  <li>
+
-
    <a href="https://2012.igem.org/Team:Groningen" title="Home" rel="nofollow" target="_blank">
+
-
      <img src="https://static.igem.org/mediawiki/2012/6/61/Groningen2012_ID_20120808_Menu_Home.png" alt="Home" title="Home" />
+
-
  <span>Valid CSS</span>
+
-
    </a>
+
-
  </li>
+
-
  <li>
+
-
    <a href="https://2012.igem.org/Team:Groningen/Team" title="Team" rel="nofollow" target="_blank">
+
-
      <img src="https://static.igem.org/mediawiki/2012/f/fc/Groningen2012_ID_20120808_Menu_Team.png" alt="Team" title="TEAM" />
+
-
      <span>Team</span>
+
-
    </a>
+
-
  </li>
+
-
  <li>
+
-
    <a href="https://2012.igem.org/Team:Groningen/Project" title="Project" rel="nofollow" target="_blank">
+
-
      <img src="https://static.igem.org/mediawiki/2012/1/19/Groningen2012_ID_20120808_Menu_Project.png" alt="Project" title="Project" />
+
-
      <span>Project</span>
+
-
    </a>
+
-
  </li>
+
-
  <li>
+
-
    <a href="https://2012.igem.org/Team:Groningen/Parts" title="Internet Explorer" rel="Parts" target="_blank">
+
-
      <img src="https://static.igem.org/mediawiki/2012/0/06/Groningen2012_ID_20120808_Menu_Parts.png" alt="Parts" title="Parts" />
+
-
      <span>Internet Explorer</span>
+
-
    </a>
+
-
  </li>
+
-
  <li>
+
-
    <a href="https://2012.igem.org/Team:Groningen/Safety" title="Safety" rel="nofollow" target="_blank">
+
-
      <img src="https://static.igem.org/mediawiki/2012/d/d4/Groningen2012_ID_20120808_Menu_Safety.png" alt="Safety" title="Safety" />
+
-
      <span>Safety</span>
+
-
    </a>
+
-
  </li>
+
-
  <li>
+
-
    <a href="https://2012.igem.org/Team:Groningen/PublicRelations" title="Public Relation" rel="nofollow" target="_blank">
+
-
      <img src="https://static.igem.org/mediawiki/2012/6/6f/Groningen2012_ID_20120808_Menu_Public_Relations.png" alt="Public Relation" title="Public Relation" />
+
-
      <span>Public Relation</span>
+
-
    </a>
+
-
  </li>
+
-
  <li>
+
-
    <a href="https://2012.igem.org/Team:Groningen/Sponsors" title="Sponsors" rel="nofollow" target="_blank">
+
-
      <img src="https://static.igem.org/mediawiki/2012/d/d4/Groningen2012_ID_20120808_Menu_Sponsors.png" alt="Sponsors" title="Sponsors" />
+
-
      <span>Sponsors</span>
+
-
    </a>
+
-
  </li>
+
-
</ul>
+
-
</div>
+
-
</body>
+
-
</html>
+
-
 
+
-
 
+
-
 
+
-
/*Header*/
+
-
#top-section
+
-
{
+
-
    height: 208px;
+
-
    width: 550px;
+
-
    border: none;  
+
}
}
-
/*test the menubar ID_8-8-2012-16:08*/
 
-
 
-
 
-
#p-logo
 
-
{
 
-
    background-image:url(https://static.igem.org/mediawiki/2012/6/61/Groningen2012_ID_20120808_Menu_Home.png);
 
-
    background-repeat:no-repeat;
 
-
 
-
}
 
-
 
-
 
-
 
-
 
-
.bigcog
 
-
{
 
-
    background-image:url(https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png);
 
-
    height: 100px;
 
-
    width: 100px;
 
-
    opacity: 40%;
 
-
    top: 25%;
 
-
    border: none;
 
-
    z-index: 0;
 
-
}
 
-
.smallcog
 
-
{
 
-
    background-image:url(https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png);
 
-
    height: 37px;
 
-
    width: 36px;
 
-
    opacity: 40%;
 
-
    top: 37.5%;
 
-
    border: none;
 
-
    z-index: 0;
 
-
}
 
#windmillarms
#windmillarms
{
{
Line 242: Line 115:
     border: none;
     border: none;
}
}
 +
/*Suppress iGEM defaults*/
/*Suppress iGEM defaults*/

Latest revision as of 13:21, 14 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*/

/*test the menubar ID_8-8-2012-16:08*/

  1. expand

.expand-down {

   font-family: Arial,Helvetica,sans-serif;
   line-height: normal;
   margin-bottom: 30px;
   margin-top: 0px;

z-index:1; } .expand-down * {

 margin: 0px;
 padding: 0;

z-index:1;

} .expand-down ul {

 padding-top:60px;

z-index:1;

} .expand-down ul li {

 list-style-type:none;

z-index:1; } .expand-down ul li a { text-decoration:none; z-index:1; } .expand-down ul li a img {

 width:82px;
 height:80px;
 border:none;

z-index:1; } .expand-down ul li a span {

 display:none;

z-index:1; } .expand-down ul li:hover a span {

 display:block;
 font-size:14px;
 text-align:center;
 color:#fff;

z-index:1; } .expand-down ul li:hover a img {

 width:80px;
 height:82px;

z-index:1; } .expand-down ul li:hover + li a img {

 width:80px;
 height:82px;

z-index:1; } .expand-down ul li:hover + li + li a img {

 width:80px;
 height:82px;

z-index:1;

}

  1. image{
 margin:80px 82px;

}

  1. windmillarms

{

   background-image:url(Groningen2012_AD_20120802_WindmillArms.png);
   height: 120px;
   width: 104px;
   border: none; 
   z-index: 2;

}

/*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-color:transparent;
   border: none;

}

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

  1. menubar{display: none;}
  2. search-controls{display: none;}
  3. contentSub{display: none;}
  4. catlinks{display: none;}
  5. footer-box{display: none;}

|}