Team:Amsterdam/Sandbox

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team:Amsterdam/Header}}
{{:Team:Amsterdam/Header}}
-
<html>
+
 
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
+
-
<script type="text/javascript">
+
-
$(document).ready(function(){
+
-
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
+
-
});
+
-
</script>
+
<div id="contentgrid">
<div id="contentgrid">
-
<h3>&raquo; Featured Content Slider Using jQuery</h3>
 
-
 
-
<div id="featured" >
 
-
  <ul class="ui-tabs-nav">
 
-
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
 
-
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
 
-
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
 
-
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
 
-
      </ul>
 
-
    <!-- First Content -->
 
-
    <div id="fragment-1" class="ui-tabs-panel" style="">
 
-
<img src="images/image1.jpg" alt="" />
 
-
<div class="info" >
 
-
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
 
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
 
-
</div>
 
-
    </div>
 
-
 
-
    <!-- Second Content -->
 
-
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
 
-
<img src="images/image2.jpg" alt="" />
 
-
<div class="info" >
 
-
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
 
-
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
 
-
</div>
 
-
    </div>
 
-
 
-
    <!-- Third Content -->
 
-
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
 
-
<img src="images/image3.jpg" alt="" />
 
-
<div class="info" >
 
-
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
 
-
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
 
-
        </div>
 
-
    </div>
 
-
 
-
    <!-- Fourth Content -->
 
-
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
 
-
<img src="images/image4.jpg" alt="" />
 
-
<div class="info" >
 
-
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
 
-
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
 
-
        </div>
 
-
    </div>
 
-
 
-
</div>
 
-
</div>
 
</div>
</div>
Line 70: Line 16:
#contentgrid {border: 1px solid #529bc7;width:975px;background-color: #cfe7fa; margin-left:-6px; height:1200px; }
#contentgrid {border: 1px solid #529bc7;width:975px;background-color: #cfe7fa; margin-left:-6px; height:1200px; }
.firstHeading{width: 0px; height: 0px; margin-bottom: 0px; display: none; position: relative; top:0; left:0; margin:0;}  
.firstHeading{width: 0px; height: 0px; margin-bottom: 0px; display: none; position: relative; top:0; left:0; margin:0;}  
-
 
-
#featured{
 
-
width:400px;
 
-
padding-right:250px;
 
-
position:relative;
 
-
border:5px solid #ccc;
 
-
height:250px;
 
-
background:#fff;
 
-
}
 
-
#featured ul.ui-tabs-nav{
 
-
position:absolute;
 
-
top:0; left:400px;
 
-
list-style:none;
 
-
padding:0; margin:0;
 
-
width:250px;
 
-
}
 
-
#featured ul.ui-tabs-nav li{
 
-
padding:1px 0; padding-left:13px; 
 
-
font-size:12px;
 
-
color:#666;
 
-
}
 
-
#featured ul.ui-tabs-nav li img{
 
-
float:left; margin:2px 5px;
 
-
background:#fff;
 
-
padding:2px;
 
-
border:1px solid #eee;
 
-
}
 
-
#featured ul.ui-tabs-nav li span{
 
-
font-size:11px; font-family:Verdana;
 
-
line-height:18px;
 
-
}
 
-
#featured li.ui-tabs-nav-item a{
 
-
display:block;
 
-
height:60px;
 
-
color:#333;  background:#fff;
 
-
line-height:20px;
 
-
}
 
-
#featured li.ui-tabs-nav-item a:hover{
 
-
background:#f2f2f2;
 
-
}
 
-
#featured li.ui-tabs-selected{
 
-
background:url('images/selected-item.gif') top left no-repeat; 
 
-
}
 
-
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
 
-
background:#ccc;
 
-
}
 
-
#featured .ui-tabs-panel{
 
-
width:400px; height:250px;
 
-
background:#999; position:relative;
 
-
}
 
-
#featured .ui-tabs-panel .info{
 
-
position:absolute;
 
-
top:180px; left:0;
 
-
height:70px;
 
-
background: url('images/transparent-bg.png');
 
-
}
 
-
#featured .info h2{
 
-
font-size:18px; font-family:Georgia, serif;
 
-
color:#fff; padding:5px; margin:0;
 
-
overflow:hidden;
 
-
}
 
-
#featured .info p{
 
-
margin:0 5px;
 
-
font-family:Verdana; font-size:11px;
 
-
line-height:15px; color:#f0f0f0;
 
-
}
 
-
#featured .info a{
 
-
text-decoration:none;
 
-
color:#fff;
 
-
}
 
-
#featured .info a:hover{
 
-
text-decoration:underline;
 
-
}
 
-
#featured .ui-tabs-hide{
 
-
display:none;
 
-
}
 
</style>
</style>
</html>
</html>

Revision as of 14:21, 13 June 2011



<style type="text/css">

  1. globalWrapper {background-color: #b9e5ff;}
  2. top-section { height: 14px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important;}
  3. p-logo { height: 0px; margin: -1px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important;}
  4. menubar.left-menu { background-color:#606060; width:975px; float:left; border: none;}
  5. menubar.left-menu a {color:white;}
  6. search-controls {display:none; }
  7. contentgrid {border: 1px solid #529bc7;width:975px;background-color: #cfe7fa; margin-left:-6px; height:1200px; }

.firstHeading{width: 0px; height: 0px; margin-bottom: 0px; display: none; position: relative; top:0; left:0; margin:0;} </style> </html>