Template:Team:NTNU-Trondheim/Press/css

From 2013.igem.org

(Difference between revisions)
 
(29 intermediate revisions not shown)
Line 46: Line 46:
-webkit-border-radius: 90px;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
-moz-border-radius: 90px;
 +
background: url(https://static.igem.org/mediawiki/2013/b/b2/Marialab.jpg) no-repeat;
 +
}
 +
 +
.circular3 {
 +
width: 230px;
 +
height: 230px;
 +
border-radius: 115px;
 +
-webkit-border-radius: 115px;
 +
-moz-border-radius: 115px;
background: url(https://static.igem.org/mediawiki/2013/b/b2/Marialab.jpg) no-repeat;
background: url(https://static.igem.org/mediawiki/2013/b/b2/Marialab.jpg) no-repeat;
}
}
-
<code><span class="code-comment">/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */</span>
+
#cssmenu ul,
-
<span class="code-comment">/*------------------------------------*\
+
#cssmenu li,
-
    NAV
+
#cssmenu span,
-
\*------------------------------------*/</span>
+
 
-
#nav{
+
#cssmenu a {
-
    list-style:none;
+
  margin: 0;
-
    font-weight:bold;
+
  padding: 0;
-
    margin-bottom:10px;
+
  position: relative;
-
    <span class="code-comment">/* Clear floats */</span>
+
-
    float:left;
+
-
    width:100%;
+
-
    <span class="code-comment">/* Bring the nav above everything else--uncomment if needed.
+
-
    position:relative;
+
-
    z-index:5;
+
-
    */</span>
+
}
}
-
#nav li{
+
#cssmenu {
-
    float:left;
+
  height: 49px;
-
    margin-right:10px;
+
  border-radius: 5px 5px 0 0;
-
    position:relative;
+
  -moz-border-radius: 5px 5px 0 0;
 +
  -webkit-border-radius: 5px 5px 0 0;
 +
  background: #fefefe;
 +
  background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
 +
  background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
 +
  background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
 +
  background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
 +
  background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
 +
  border-bottom: 2px solid #C3A7F3;
 +
  width: auto;
 +
  margin-top: 340px;
}
}
-
#nav a{
+
#cssmenu:after,
-
    display:block;
+
#cssmenu ul:after {
-
    padding:5px;
+
  content: '';
-
    color:#fff;
+
  display: block;
-
    background:#333;
+
  clear: both;
-
    text-decoration:none;
+
}
}
-
#nav a:hover{
+
#cssmenu a {
-
    color:#fff;
+
  background: #fefefe;
-
    background:#6b0c36;
+
  background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
-
    text-decoration:underline;
+
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
 +
  background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
 +
  background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
 +
  background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
 +
  background: linear-gradient(top, #fefefe 0%, #ececec 100%);
 +
  color: black;
 +
  display: inline-block;
 +
  font-family: Helvetica, Arial, Verdana, sans-serif;
 +
  font-size: 12px;
 +
  line-height: 49px;
 +
  padding: 0 20px;
 +
  text-decoration: none;
}
}
-
 
+
#cssmenu ul {
-
<span class="code-comment">/*--- DROPDOWN ---*/</span>
+
  list-style: none;
-
#nav ul{
+
-
    background:#fff; <span class="code-comment">/* 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). */</span>
+
-
    background:rgba(255,255,255,0); <span class="code-comment">/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */</span>
+
-
    list-style:none;
+
-
    position:absolute;
+
-
    left:-9999px; <span class="code-comment">/* Hide off-screen when not needed (this is more accessible than display:none;) */</span>
+
}
}
-
#nav ul li{
+
#cssmenu > ul {
-
    padding-top:1px; <span class="code-comment">/* Introducing a padding between the li and the a give the illusion spaced items */</span>
+
  float: left;
-
    float:none;
+
}
}
-
#nav ul a{
+
#cssmenu > ul > li {
-
    white-space:nowrap; <span class="code-comment">/* Stop text wrapping and creating multi-line dropdown items */</span>
+
  float: left;
}
}
-
#nav li:hover ul{ <span class="code-comment">/* Display the dropdown on hover */</span>
+
#cssmenu > ul > li > a {
-
    left:0; <span class="code-comment">/* Bring back on-screen when needed */</span>
+
  color: #000;
 +
  font-size: 12px;
}
}
-
#nav li:hover a{ <span class="code-comment">/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */</span>
+
#cssmenu > ul > li:hover:after {
-
    background:#6b0c36;
+
  content: '';
-
    text-decoration:underline;
+
  display: block;
 +
  width: 0;
 +
  height: 0;
 +
  position: absolute;
 +
  left: 50%;
 +
  bottom: 0;
 +
  border-left: 10px solid transparent;
 +
  border-right: 10px solid transparent;
 +
  border-bottom: 10px solid #C3A7F3;
 +
  margin-left: -10px;
}
}
-
#nav li:hover ul a{ <span class="code-comment">/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */</span>
+
#cssmenu > ul > li:first-child > a {
-
    text-decoration:none;
+
  border-radius: 5px 0 0 0;
 +
  -moz-border-radius: 5px 0 0 0;
 +
  -webkit-border-radius: 5px 0 0 0;
 +
}
 +
#cssmenu > ul > li.active:after {
 +
  content: '';
 +
  display: block;
 +
  width: 0;
 +
  height: 0;
 +
  position: absolute;
 +
  left: 50%;
 +
  bottom: 0;
 +
  border-left: 10px solid transparent;
 +
  border-right: 10px solid transparent;
 +
  border-bottom: 10px solid #C3A7F3;
 +
  margin-left: -10px;
 +
}
 +
#cssmenu > ul > li.active > a {
 +
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 +
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 +
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 +
  background: #ececec;
 +
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
 +
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
}
 +
#cssmenu > ul > li:hover > a {
 +
  background: #ececec;
 +
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
 +
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
 +
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 +
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 +
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 +
}
 +
#cssmenu .has-sub {
 +
  z-index: 1;
 +
}
 +
#cssmenu .has-sub:hover > ul {
 +
  display: block;
 +
}
 +
#cssmenu .has-sub ul {
 +
  display: none;
 +
  position: absolute;
 +
  width: 200px;
 +
  top: 100%;
 +
  left: 0;
 +
}
 +
#cssmenu .has-sub ul li {
 +
  *margin-bottom: -1px;
 +
}
 +
#cssmenu .has-sub ul li a {
 +
  background: #C3A7F3;
 +
  border-bottom: 1px dotted #C3A7F3;
 +
  filter: none;
 +
  font-size: 11px;
 +
  display: block;
 +
  line-height: 120%;
 +
  padding: 10px;
 +
  color: black;
 +
}
 +
#cssmenu .has-sub ul li:hover a {
 +
  background: #C3A7F3;
 +
}
 +
#cssmenu .has-sub .has-sub:hover > ul {
 +
  display: block;
 +
}
 +
#cssmenu .has-sub .has-sub ul {
 +
  display: none;
 +
  position: absolute;
 +
  left: 100%;
 +
  top: 0;
 +
}
 +
#cssmenu .has-sub .has-sub ul li a {
 +
  background: #C3A7F3;
 +
  border-bottom: 1px dotted #C3A7F3;
 +
}
 +
#cssmenu .has-sub .has-sub ul li a:hover {
 +
  background: #C3A7F3;
}
}
-
#nav li:hover ul li a:hover{ <span class="code-comment">/* Here we define the most explicit hover states--what happens when you hover each individual link. */</span>
 
-
    background:#333;
 
-
}</code>
 
-
 
</style>
</style>
</html>
</html>

Latest revision as of 12:52, 4 October 2013

Retrieved from "http://2013.igem.org/Template:Team:NTNU-Trondheim/Press/css"