Template:Http://2014.igem.org/Team:Colombia

From 2013.igem.org

(Difference between revisions)
Line 172: Line 172:
</style>
</style>
-
 
-
 
-
<style>
 
-
.example {
 
-
    position:relative;
 
-
    background: transparent;
 
-
    width:670px;
 
-
    height:470px;
 
-
    border:1px #000 solid;
 
-
    margin:20px auto;
 
-
    padding:15px;
 
-
    border-radius:3px;
 
-
    -moz-border-radius:3px;
 
-
    -webkit-border-radius:3px;
 
-
}
 
-
 
-
/* main menu styles */
 
-
.menuholder {
 
-
    float:left;
 
-
    font:normal bold 11px/35px verdana, sans-serif;
 
-
    overflow:hidden;
 
-
    position:relative;
 
-
}
 
-
.menuholder .shadow {
 
-
    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
 
-
    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
 
-
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
 
-
    background:#888;
 
-
    box-shadow:0 0 20px rgba(0, 0, 0, 1);
 
-
    height:10px;
 
-
    left:5%;
 
-
    position:absolute;
 
-
    top:-9px;
 
-
    width:90%;
 
-
    z-index:100;
 
-
}
 
-
.menuholder .back {
 
-
    -moz-transition-duration:.4s;
 
-
    -o-transition-duration:.4s;
 
-
    -webkit-transition-duration:.4s;
 
-
    background-color:rgba(0, 0, 0, 0.5);
 
-
    height:0;
 
-
    width:100%;
 
-
}
 
-
.menuholder:hover div.back {
 
-
    height:250px;
 
-
}
 
-
ul.menu {
 
-
    display:block;
 
-
    float:left;
 
-
    list-style:none;
 
-
    margin:0;
 
-
    padding:0 125px;
 
-
    position:relative;
 
-
}
 
-
ul.menu li {
 
-
    float:left;
 
-
    margin:0 5px 0 0;
 
-
}
 
-
ul.menu li > a {
 
-
    -moz-border-radius:0 0 10px 10px;
 
-
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
 
-
    -moz-transition:all 0.2s ease-in-out;
 
-
    -o-border-radius:0 0 10px 10px;
 
-
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
 
-
    -o-transition:all 0.2s ease-in-out;
 
-
    -webkit-border-bottom-left-radius:10px;
 
-
    -webkit-border-bottom-right-radius:10px;
 
-
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
 
-
    -webkit-transition:all 0.2s ease-in-out;
 
-
    border-radius:0 0 10px 10px;
 
-
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
 
-
    color:#eee;
 
-
    display:block;
 
-
    padding:0 10px;
 
-
    text-decoration:none;
 
-
    transition:all 0.2s ease-in-out;
 
-
}
 
-
ul.menu li a.red {
 
-
    background:#a00;
 
-
}
 
-
ul.menu li a.orange {
 
-
    background:#da0;
 
-
}
 
-
ul.menu li a.yellow {
 
-
    background:#aa0;
 
-
}
 
-
ul.menu li a.green {
 
-
    background:#060;
 
-
}
 
-
ul.menu li a.blue {
 
-
    background:#00a;
 
-
}
 
-
ul.menu li a.violet {
 
-
    background:#682bc2;
 
-
}
 
-
.menu li div.subs {
 
-
    left:0;
 
-
    overflow:hidden;
 
-
    position:absolute;
 
-
    top:35px;
 
-
    width:0;
 
-
}
 
-
.menu li div.subs dl {
 
-
    -moz-transition-duration:.2s;
 
-
    -o-transition-duration:.2s;
 
-
    -webkit-transition-duration:.2s;
 
-
    float:left;
 
-
    margin:0 130px 0 0;
 
-
    overflow:hidden;
 
-
    padding:40px 0 5% 2%;
 
-
    width:0;
 
-
}
 
-
.menu dt {
 
-
    color:#fc0;
 
-
    font-family:arial, sans-serif;
 
-
    font-size:12px;
 
-
    font-weight:700;
 
-
    height:20px;
 
-
    line-height:20px;
 
-
    margin:0;
 
-
    padding:0 0 0 10px;
 
-
    white-space:nowrap;
 
-
}
 
-
.menu dd {
 
-
    margin:0;
 
-
    padding:0;
 
-
    text-align:left;
 
-
}
 
-
.menu dd a {
 
-
    background:transparent;
 
-
    color:#fff;
 
-
    font-size:12px;
 
-
    height:20px;
 
-
    line-height:20px;
 
-
    padding:0 0 0 10px;
 
-
    text-align:left;
 
-
    white-space:nowrap;
 
-
    width:80px;
 
-
}
 
-
.menu dd a:hover {
 
-
    color:#fc0;
 
-
}
 
-
.menu li:hover div.subs dl {
 
-
    -moz-transition-delay:0.2s;
 
-
    -o-transition-delay:0.2s;
 
-
    -webkit-transition-delay:0.2s;
 
-
    margin-right:2%;
 
-
    width:21%;
 
-
}
 
-
ul.menu li:hover > a,ul.menu li > a:hover {
 
-
    background:#aaa;
 
-
    color:#fff;
 
-
    padding:10px 10px 0;
 
-
}
 
-
ul.menu li a.red:hover,ul.menu li:hover a.red {
 
-
    background:#c00;
 
-
}
 
-
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
 
-
    background:#fc0;
 
-
}
 
-
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
 
-
    background:#cc0;
 
-
}
 
-
ul.menu li a.green:hover,ul.menu li:hover a.green {
 
-
    background:#080;
 
-
}
 
-
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
 
-
    background:#00c;
 
-
}
 
-
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
 
-
background:#8a2be2;
 
-
}
 
-
.menu li:hover div.subs,.menu li a:hover div.subs {
 
-
    width:100%;
 
-
}
 
-
 
-
</style>
 
-
 
-
 
-
 
Line 367: Line 186:
 +
<!--Force IE6 into quirks mode with this comment tag-->
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 +
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 +
<title>Dynamic Drive: CSS Right Frame Layout</title>
 +
<style type="text/css">
 +
body{
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
overflow: hidden;
 +
height: 100%;
 +
max-height: 100%;
 +
}
 +
#framecontent{
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
right: 0;
 +
width: 200px; /*Width of frame div*/
 +
height: 100%;
 +
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
 +
background: navy;
 +
color: white;
 +
}
 +
#maincontent{
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
right: 200px; /*Set right value to WidthOfFrameDiv*/
 +
bottom: 0;
 +
overflow: auto;
 +
background: #fff;
 +
}
-
<!-- page content begins-->
+
.innertube{
 +
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
 +
}
-
<table width="975px" align="center">
+
* html body{ /*IE6 hack*/
-
<tr ><td coslpan="2" height="35px"></td></tr>
+
padding: 0 200px 0 0; /*Set value to (0 WidthOfFrameDiv 0 0)*/
-
<tr>
+
}
-
<td width="35%" valign="top">
+
* html #maincontent{ /*IE6 hack*/
-
<h3>Welcome ! </h3>
+
height: 100%;
-
<p>
+
width: 100%;
-
This is a basic template you may use to customize your wiki,
+
}
-
you can take it apart and modify it as much as you want. The
+
</style>
-
links and tabs provided here are basic suggestions, feel free
+
<script type="text/javascript">
-
 
+
/*** Temporary text filler function. Remove when deploying template. ***/
-
to adapt it for your team and your project. </p>
+
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
-
<p>
+
function filltext(words){
-
If you are looking for general  wiki guidelines,
+
for (var i=0; i<words; i++)
-
 
+
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
-
restrictions, design tips and more, visit the <br><a
+
}
-
 
+
</script>
-
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To
+
-
 
+
-
Page</a></p>
+
-
</p>
+
-
 
+
-
 
+
-
</td>
+
-
 
+
-
<td width="5%" > </td>
+
-
 
+
-
 
+
-
<!-- here you can place an image related to your project or
+
-
 
+
-
your logo! -->
+
-
<td width="60%" > <img
+
-
 
+
-
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima
+
-
 
+
-
ge.jpg" width="600px" height="300px"></td>
+
-
 
+
-
 
+
-
 
+
-
<tr ><td coslpan="2" height="35px"></td></tr>
+
-
</tr>
+
-
</table>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<!-- 3 columns content
+
-
this area is divided intro 3 columns, you can add more
+
-
 
+
-
information about your team, project, city or mention your
+
-
 
+
-
sponsors! -->
+
-
<table width="975px" align="center">
+
-
 
+
-
 
+
-
<tr>
+
-
<!-- first column -->
+
-
<td width="30%">
+
-
<!-- you can have an image related to your paragraph -->
+
-
<img
+
-
 
+
-
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima
+
-
 
+
-
ge.jpg" width="300px" height="200px">
+
-
<h4> Results</h4>
+
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii
+
-
 
+
-
accumsan euripidis in, eum liber
+
-
hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit
+
-
 
+
-
ridens inciderint id. </p>
+
-
 
+
-
</td>
+
-
 
+
-
<td width="5%"></td>
+
-
 
+
-
 
+
-
<!-- second column -->
+
-
<td width="30%">
+
-
<img
+
-
 
+
-
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima
+
-
ge.jpg" width="300px" height="200px">
+
</head>
-
<h4>Human Practice</h4>
+
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii
+
-
accumsan euripidis in,
+
<body>
-
eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo
+
-
dicit ridens inciderint id. </p>
+
<div id="framecontent">
-
</td>
+
<div class="innertube">
-
<td width="5%"></td>
+
 +
<h1>CSS Right Frame Layout</h1>
 +
<h3>Sample text here</h3>
-
<!-- third column -->
+
</div>
-
<td width="30%">
+
</div>
-
<img
+
-
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima
 
-
ge.jpg" width="300px" height="200px">
+
<div id="maincontent">
-
<h4>Follow us on Twitter/Facebook!</h4>
+
<div class="innertube">
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii
+
-
accumsan euripidis in,
+
<h1>Dynamic Drive CSS Library</h1>
-
eum liber hendrerit an. Qui ut wisi vocibus suscipiantur,
+
<p><script type="text/javascript">filltext(255)</script></p>
 +
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
-
quo dicit ridens inciderint id. </p>
+
</div>
-
</td>
+
</div>
-
</tr>
+
-
</table>
+
</body>
-
<!-- end of 3 column content -->
+
</html>
<ul class="flatflipbuttons">
<ul class="flatflipbuttons">

Revision as of 00:58, 21 August 2014

'

Dynamic Drive: CSS Right Frame Layout

CSS Right Frame Layout

Sample text here

Dynamic Drive CSS Library

Credits: Dynamic Drive CSS Library

  • <a href="https://2014.igem.org/Team:Colombia" title="Home"></a> Home
  • <a href="http://www.uniandes.edu.co"></a> University
  • <a href="http://www.facebook.com/colombia.igem"></a> Facebook
  • <a href="http://twitter.com/Colombia_igem1"></a> Twitter




</div> </html>


Retrieved from "http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia"