Team:UCLondon/Templates/Navigationv2

From 2012e.igem.org

(Difference between revisions)
 
(25 intermediate revisions not shown)
Line 16: Line 16:
     <ul class="menu links">
     <ul class="menu links">
-
         <li class="hov"><a class="nothing" href="#" title="Contact Us"><img src="http://db.tt/Zw3GxxwW" height="30" /></a></li>
+
         <li class="hov"><a class="nothing tooltip" href="#" udit="Contact Us"><img src="http://db.tt/Zw3GxxwW" height="30" /></a></li>
-
               <li class="hov"><a href="https://igem.org/Main_Page" title="iGEM"><img src="https://static.igem.org/mediawiki/2011/d/de/IGEM_basic_Logo_stylized.png" height="30"  /></a></li>
+
               <li class="hov"><a class="tooltip" href="https://igem.org/Main_Page" udit="iGEM"><img src="https://static.igem.org/mediawiki/2011/d/de/IGEM_basic_Logo_stylized.png" height="30"  /></a></li>
     </ul>
     </ul>
Line 27: Line 27:
       //body { background-color: white;  }
       //body { background-color: white;  }
       #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
       #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
-
       #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: hidden; height:100%;}
+
       #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; height:100%;}
       #search-controls { display:none; }
       #search-controls { display:none; }
       #top-section { height: 10px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;}
       #top-section { height: 10px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;}
Line 163: Line 163:
   .links  { position: absolute ; top: 5px; right:20px; background-color: rgba(249, 249, 249, 0.2); border-radius: 3px; height:33px; width:145px; }
   .links  { position: absolute ; top: 5px; right:20px; background-color: rgba(249, 249, 249, 0.2); border-radius: 3px; height:33px; width:145px; }
-
   .links li { padding-left: 1px; }
+
   .links li { padding-left: 1px; padding-right:1px; }
-
   //.links:before { content:""; border:5px black; display:block; width:100%; position:absolute; }
+
 
 +
 
 +
   .links:before {
 +
            content:"";
 +
            border:2px black;  
 +
            //display:block;
 +
            width:143px;
 +
            height:32px;
 +
          position:absolute;
 +
    }
 +
 
 +
 
 +
.tooltip{display:inline;position:relative}
 +
.tooltip:hover{text-decoration:none}
 +
.tooltip:hover:after{
 +
  background:#111;
 +
  background:rgba(0,0,0,.8);
 +
  border-radius:5px;
 +
  bottom:-26px;
 +
  color:#fff;
 +
  content:attr(udit);
 +
  display:block;
 +
  left:20%;
 +
  padding:5px 15px;
 +
  position:absolute;
 +
  white-space:nowrap;
 +
  z-index:98
 +
  }
 +
  .tooltip:hover:before{
 +
    border:solid;
 +
    border-color:#111 transparent;
 +
    border-width:0 6px 6px 6px;
 +
    bottom:-2px;
 +
    content:"";
 +
    display:block;
 +
    left:50%;
 +
    position:absolute;
 +
    z-index:99
 +
  }
   
   

Latest revision as of 21:30, 21 September 2012