Team:Evry/Template:Menu

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<script src="workbook/html/js/config.js"></script>
+
body {
 +
margin:0;
 +
padding:0;
 +
border:0; /* This removes the border around the viewport in old versions of IE */
 +
width:100%;
 +
background:#fff;
 +
min-width:600px;    /* Minimum width of layout - remove line if not required */
 +
/* The min-width property does not work in old versions of Internet Explorer */
 +
font-size:90%;
 +
}
 +
a {
 +
color:#369;
 +
}
 +
a:hover {
 +
color:#fff;
 +
background:#369;
 +
text-decoration:none;
 +
}
 +
h1, h2, h3 {
 +
margin:.8em 0 .2em 0;
 +
padding:0;
 +
}
 +
p {
 +
margin:.4em 0 .8em 0;
 +
padding:0;
 +
}
 +
img {
 +
margin:10px 0 5px;
 +
}
 +
#ads img {
 +
display:block;
 +
padding-top:10px;
 +
}
 +
 
 +
/* Header styles */
 +
#header {
 +
clear:both;
 +
float:left;
 +
width:100%;
 +
}
 +
#header {
 +
border-bottom:1px solid #000;
 +
}
 +
#header p,
 +
#header h1,
 +
#header h2 {
 +
padding:.4em 15px 0 15px;
 +
margin:0;
 +
}
 +
#header ul {
 +
clear:left;
 +
float:left;
 +
width:100%;
 +
list-style:none;
 +
margin:10px 0 0 0;
 +
padding:0;
 +
}
 +
#header ul li {
 +
display:inline;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
}
 +
#header ul li a {
 +
display:block;
 +
float:left;
 +
margin:0 0 0 1px;
 +
padding:3px 10px;
 +
text-align:center;
 +
background:#eee;
 +
color:#000;
 +
text-decoration:none;
 +
position:relative;
 +
left:15px;
 +
line-height:1.3em;
 +
}
 +
#header ul li a:hover {
 +
background:#369;
 +
color:#fff;
 +
}
 +
#header ul li a.active,
 +
#header ul li a.active:hover {
 +
color:#fff;
 +
background:#000;
 +
font-weight:bold;
 +
}
 +
#header ul li a span {
 +
display:block;
 +
}
 +
/* 'widths' sub menu */
 +
#layoutdims {
 +
clear:both;
 +
background:#eee;
 +
border-top:4px solid #000;
 +
margin:0;
 +
padding:6px 15px !important;
 +
text-align:right;
 +
}
 +
/* column container */
 +
.colmask {
 +
position:relative; /* This fixes the IE7 overflow hidden bug */
 +
clear:both;
 +
float:left;
 +
width:100%; /* width of whole page */
 +
overflow:hidden; /* This chops off any overhanging divs */
 +
}
 +
/* common column settings */
 +
.colright,
 +
.colmid,
 +
.colleft {
 +
float:left;
 +
width:100%;
 +
position:relative;
 +
}
 +
.col1,
 +
.col2,
 +
.col3 {
 +
float:left;
 +
position:relative;
 +
padding:0 0 1em 0;
 +
overflow:hidden;
 +
}
 +
/* 2 Column (left menu) settings */
 +
.leftmenu {
 +
background:#fff; /* right column background colour */
 +
}
 +
.leftmenu .colleft {
 +
right:75%; /* right column width */
 +
background:#f4f4f4; /* left column background colour */
 +
}
 +
.leftmenu .col1 {
 +
width:71%; /* right column content width */
 +
left:102%; /* 100% plus left column left padding */
 +
}
 +
.leftmenu .col2 {
 +
width:21%; /* left column content width (column width minus left and right padding) */
 +
left:6%; /* (right column left and right padding) plus (left column left padding) */
 +
}
 +
/* Footer styles */
 +
#footer {
 +
clear:both;
 +
float:left;
 +
width:100%;
 +
border-top:1px solid #000;
 +
}
 +
#footer p {
 +
padding:10px;
 +
margin:0;
 +
}
 +
</style>
 +
<script src="workbook/html/js/config.js"></script>
<script src="workbook/html/js/skel.min.js"></script>
<script src="workbook/html/js/skel.min.js"></script>
Line 35: Line 185:
<style>
<style>
 +
 +
/* Initial body */
 +
body {
 +
  left: 0;
 +
  margin: 0;
 +
  overflow: hidden;
 +
  position: relative;
 +
}
 +
 +
/* Initial menu */
 +
.menu {
 +
  background: #04084E;
 +
  left: 10px;  /* start off behind the scenes */
 +
  height: 25%;
 +
  position: fixed;
 +
  width: 285px;
 +
}
/* Menu accordéon */
/* Menu accordéon */
Line 92: Line 259:
#menu-accordeon li:hover li {
#menu-accordeon li:hover li {
   max-height: 15em;
   max-height: 15em;
 +
}
 +
/* Fin menu accordeon */
 +
 +
 +
/* Basic styling */
 +
 +
.jumbotron {
 +
 +
 +
/*  background-image: url('/home/wdigan/Desktop/igem/wiki/imagewiki/BernardEvry.JPG'); */
 +
background: rgb(240,249,255); /* Old browsers */
 +
background: -moz-linear-gradient(left, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* IE10+ */
 +
background: linear-gradient(to right, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=1 ); /* IE6-9 */
 +
  height: 100%;
 +
  -webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
      -o-background-size: cover;
 +
          background-size: cover;
 +
}
 +
 +
.menu ul {
 +
  border-top: 4px solid #636366;
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 +
.menu li {
 +
  border-bottom: 1px solid #636366;
 +
  font-family: 'Open Sans', sans-serif;
 +
  line-height: 20px;
 +
  padding-bottom: 3px;
 +
  padding-left: 20px;
 +
  padding-top: 3px;
 +
}
 +
 +
/*icon tab*/
 +
.menu a {
 +
  color: white;
 +
  font-size: 15px;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
}
 +
 +
.icon-close {
 +
  cursor: pointer;
 +
  padding-left:5px;
 +
  padding-top: 5px;
 +
}
 +
 +
/*contents tab*/
 +
.icon-menu {
 +
  color: black;
 +
  cursor: pointer;
 +
  font-family: 'Open Sans', sans-serif;
 +
  font-size: 25px;
 +
  padding-bottom: 25px;
 +
  padding-left: 25px;
 +
  padding-top: 25px;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
}
 +
 +
.icon-menu i {
 +
  margin-right: 5px;
}
}
</style>
</style>

Revision as of 16:43, 23 August 2014

body { margin:0; padding:0; border:0; /* This removes the border around the viewport in old versions of IE */ width:100%; background:#fff; min-width:600px; /* Minimum width of layout - remove line if not required */ /* The min-width property does not work in old versions of Internet Explorer */ font-size:90%; } a { color:#369; } a:hover { color:#fff; background:#369; text-decoration:none; } h1, h2, h3 { margin:.8em 0 .2em 0; padding:0; } p { margin:.4em 0 .8em 0; padding:0; } img { margin:10px 0 5px; } #ads img { display:block; padding-top:10px; } /* Header styles */ #header { clear:both; float:left; width:100%; } #header { border-bottom:1px solid #000; } #header p, #header h1, #header h2 { padding:.4em 15px 0 15px; margin:0; } #header ul { clear:left; float:left; width:100%; list-style:none; margin:10px 0 0 0; padding:0; } #header ul li { display:inline; list-style:none; margin:0; padding:0; } #header ul li a { display:block; float:left; margin:0 0 0 1px; padding:3px 10px; text-align:center; background:#eee; color:#000; text-decoration:none; position:relative; left:15px; line-height:1.3em; } #header ul li a:hover { background:#369; color:#fff; } #header ul li a.active, #header ul li a.active:hover { color:#fff; background:#000; font-weight:bold; } #header ul li a span { display:block; } /* 'widths' sub menu */ #layoutdims { clear:both; background:#eee; border-top:4px solid #000; margin:0; padding:6px 15px !important; text-align:right; } /* column container */ .colmask { position:relative; /* This fixes the IE7 overflow hidden bug */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; position:relative; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; overflow:hidden; } /* 2 Column (left menu) settings */ .leftmenu { background:#fff; /* right column background colour */ } .leftmenu .colleft { right:75%; /* right column width */ background:#f4f4f4; /* left column background colour */ } .leftmenu .col1 { width:71%; /* right column content width */ left:102%; /* 100% plus left column left padding */ } .leftmenu .col2 { width:21%; /* left column content width (column width minus left and right padding) */ left:6%; /* (right column left and right padding) plus (left column left padding) */ } /* Footer styles */ #footer { clear:both; float:left; width:100%; border-top:1px solid #000; } #footer p { padding:10px; margin:0; }