Team:BasicallyAcid/Template:Bar

From 2012hs.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<style>
 +
.ribbon:after, .ribbon:before {
 +
    margin-top:0.5em;
 +
    content: "";
 +
    float:left;
 +
    border:1.5em solid #fff;
 +
}
-
<div id="Table_01" style="position:absolute; top:230px;">
+
.ribbon:after {
-
+
    border-right-color:transparent;
 +
}
-
<div id="bar-normal-02-norm">
+
.ribbon:before {
-
          <a href="https://2012hs.igem.org/Team:BasicallyAcid/Team">
+
    border-left-color:transparent;
-
<img src="https://static.igem.org/mediawiki/2012hs/e/ee/BA_Team.png" alt="" name="team" width="110" height="85" id="team"
+
}
-
onMouseOver="document.images['team'].src='https://static.igem.org/mediawiki/2012hs/d/d1/BA_Team-over.png'"
+
.ribbon a:link, .ribbon a:visited {
-
+
    color:#000;
-
onMouseOut="document.images['team'].src='https://static.igem.org/mediawiki/2012hs/e/ee/BA_Team.png'"
+
    text-decoration:none;
-
></a>
+
    float:left;
-
  </div>
+
    height:3.5em;
-
<div id="bar-normal-03-norm">
+
    overflow:hidden;
-
          <a href="https://2012hs.igem.org/Team:BasicallyAcid/Project">
+
}
-
<img src="https://static.igem.org/mediawiki/2012hs/3/3a/BA_Project.png" alt="" name="project" width="110" height="85" id="project"
+
.ribbon span {
-
onMouseOver="document.images['project'].src='https://static.igem.org/mediawiki/2012hs/2/27/BA_Project-over.png'"
+
    background:#fff;
-
+
    display:inline-block;
-
onMouseOut="document.images['project'].src='https://static.igem.org/mediawiki/2012hs/3/3a/BA_Project.png'"
+
    line-height:3em;
-
></a>
+
    padding:0 1em;
-
  </div>
+
    margin-top:0.5em;
-
<div id="bar-normal-04-norm">
+
    position:relative;
-
            <a href="https://2012hs.igem.org/Team:BasicallyAcid/Notebook">
+
 
-
<img src="https://static.igem.org/mediawiki/2012hs/3/3d/BA_Notebook.png" alt="" name="notebook" width="109" height="85" id="notebook"
+
    -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
-
onMouseOver="document.images['notebook'].src='https://static.igem.org/mediawiki/2012hs/5/55/BA_Notebook-over.png'"
+
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
-
+
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
-
onMouseOut="document.images['notebook'].src='https://static.igem.org/mediawiki/2012hs/3/3d/BA_Notebook.png'"
+
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
-
></a>
+
    transition: background-color 0.2s, margin-top 0.2s;
-
  </div>
+
}
-
<div id="bar-normal-05-norm">
+
 
-
<a href="https://2012hs.igem.org/Team:BasicallyAcid/Results">
+
.ribbon a:hover span {
-
<img src="https://static.igem.org/mediawiki/2012hs/7/77/BA_Results.png" alt="" name="results" width="108" height="85" id="results"
+
    background:#FFD204;
-
onMouseOver="document.images['results'].src='https://static.igem.org/mediawiki/2012hs/3/3f/BA_Results-over.png'"
+
    margin-top:0;
-
+
}
-
onMouseOut="document.images['results'].src='https://static.igem.org/mediawiki/2012hs/7/77/BA_Results.png'">
+
 
-
</a>
+
.ribbon span:before {
-
  </div>
+
    content: "";
-
<div id="bar-normal-06-norm">
+
    position:absolute;
-
<a href="https://2012hs.igem.org/Team:BasicallyAcid/Parts">
+
    top:3em;
-
<img src="https://static.igem.org/mediawiki/2012hs/c/c3/BA_Parts.png" alt="" name="parts" width="109" height="85" alt="" id="parts"
+
    left:0;
-
onMouseOver="document.images['parts'].src='https://static.igem.org/mediawiki/2012hs/8/8d/BA_Parts-over.png'"
+
    border-right:0.5em solid #9B8651;
-
+
    border-bottom:0.5em solid #fff;
-
onMouseOut="document.images['parts'].src='https://static.igem.org/mediawiki/2012hs/c/c3/BA_Parts.png'"
+
}
-
></a>
+
 
-
</div>
+
.ribbon span:after {
-
<div id="bar-normal-07-norm">
+
    content: "";
-
<a href="https://2012hs.igem.org/Team:BasicallyAcid/Safety">
+
    position:absolute;
-
<img src="https://static.igem.org/mediawiki/2012hs/0/03/BA_Safety.png" alt="" name="safety" width="109" height="85" alt="" id="saftey"
+
    top:3em;
-
onMouseOver="document.images['safety'].src='https://static.igem.org/mediawiki/2012hs/e/e0/BA_Safety-over.png'"
+
    right:0;
-
+
    border-left:0.5em solid #9B8651;
-
onMouseOut="document.images['safety'].src='https://static.igem.org/mediawiki/2012hs/0/03/BA_Safety.png'"
+
    border-bottom:0.5em solid #fff;
-
></a>
+
}
-
</div>
+
</style>
-
<div id="bar-normal-08-norm">
+
<html>
-
<a href="https://2012hs.igem.org/Team:BasicallyAcid/Attributions">
+
<div class='ribbon'>
-
<img src="https://static.igem.org/mediawiki/2012hs/e/e9/BA_Attributions.png" alt="" name="attributions" width="108" height="85" alt="" id="media"
+
    <a href='#'><span>Home</span></a>
-
onMouseOver="document.images['attributions'].src='https://static.igem.org/mediawiki/2012hs/b/b4/BA_Attributions-over.png'"
+
    <a href='#'><span>Team</span></a>
-
+
    <a href='#'><span>Project</span></a>
-
onMouseOut="document.images['attributions'].src='https://static.igem.org/mediawiki/2012hs/e/e9/BA_Attributions.png'"
+
    <a href='#'><span>Notebook</span></a>
-
></a>
+
    <a href='#'><span>Results</span></a>
-
</div>
+
    <a href='#'><span>Parts</span></a>
-
+
    <a href='#'><span>Safety</span></a>
 +
    <a href='#'><span>Attributions</span></a>
</div>
</div>
   
   
</html>
</html>

Revision as of 02:09, 5 June 2012

<style> .ribbon:after, .ribbon:before { 

   margin-top:0.5em;
   content: "";
   float:left;
   border:1.5em solid #fff;

}

.ribbon:after { 

   border-right-color:transparent;

}

.ribbon:before { 

   border-left-color:transparent;

} .ribbon a:link, .ribbon a:visited { 

   color:#000;
   text-decoration:none;
   float:left;
   height:3.5em;
   overflow:hidden;

} .ribbon span { 

   background:#fff;
   display:inline-block;
   line-height:3em;
   padding:0 1em;
   margin-top:0.5em;
   position:relative;

   -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
   -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
   -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
   -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
   transition: background-color 0.2s, margin-top 0.2s;

}

.ribbon a:hover span { 

   background:#FFD204;
   margin-top:0;

}

.ribbon span:before { 

   content: "";
   position:absolute;
   top:3em;
   left:0;
   border-right:0.5em solid #9B8651;
   border-bottom:0.5em solid #fff;

}

.ribbon span:after { 

   content: "";
   position:absolute;
   top:3em;
   right:0;
   border-left:0.5em solid #9B8651;
   border-bottom:0.5em solid #fff;

} </style>

Home Team Project Notebook Results Parts Safety Attributions

Retrieved from "http://2012hs.igem.org/Team:BasicallyAcid/Template:Bar"