User:Lucas.schirmer

From 2009.igem.org

(Difference between revisions)
 
(44 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<style type="text/css">
 
-
.wrapper{
 
-
margin:0;
 
-
padding:0;
 
-
font-size:13px;
 
-
font-family:verdana, Arial, Helvetica, sans-serif;
 
-
color:#333333;
 
-
background-color:#FFFFFF;
 
-
}
 
 +
<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/jquery.min.js"></script>
 +
<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/cloud-carousel.js"></script>
 +
<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/slimbox/js/slimbox2.js"></script>
 +
<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/navigation/menu.js"></script>
-
.clear{clear: both;}
+
<link media="screen" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/slimbox/css/slimbox2.css" rel="stylesheet">
-
br.clear{clear:both; margin-top:-15px;}
+
<link media="screen" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/navigation/menu.css" rel="stylesheet">
-
a{
+
-
color:#B2C629;
+
-
background-color:#FFFFFF;
+
-
outline:none;
+
-
text-decoration:none;
+
-
}
+
-
#topnav li {
+
<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=siDS6nUKbSBnppf0uONMA&v=1"></script>
-
float:left;
+
<script type="text/javascript" src="http://endo.bio.tu-dresden.de/igem/scripthost/jtwett/jtweetsanywhere.min.js"></script>
-
list-style:none outside none;
+
<link rel="stylesheet" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/jtwett/jtweetsanywhere.css" />
-
margin:0;
+
-
padding:0;
+
-
}
+
-
div.header{
+
-
text-align:left;
+
-
}
+
-
.col1{
+
-
color:#CCCCCC;
+
-
background-color:#000000;
+
-
}
+
-
</style>
+
-
<style type="text/css">
+
-
/**
+
-
*********************************************
+
-
* Prototype of styles for horizontal CSS-menu
+
-
* @data 30.06.2009
+
-
*********************************************
+
-
* (X)HTML-scheme:
+
-
*  <div id="menu">
+
-
*      <ul class="menu">
+
-
*          <li><a href="#" class="parent"><span>level 1</span></a>
+
-
*              <div><ul>
+
-
*                  <li><a href="#" class="parent"><span>level 2</span></a>
+
-
*                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
+
-
*                  </li>
+
-
*              </ul></div>
+
-
*          </li>
+
-
*          <li class="last"><a href="#"><span>level 1</span></a></li>
+
-
*      </ul>
+
-
*  </div>
+
-
*********************************************
+
-
*/
+
-
/* menu::base */
+
<script src="http://endo.bio.tu-dresden.de/igem/scripthost/countdown/kk_countdown.min.js" type="text/javascript"></script>
-
div#menu {
+
<link rel="stylesheet" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/countdown/rrclock.css" />
-
    height:55px;
+
-
    background:url(images/nav-bg.png) repeat-x;
+
-
    _background:url(images/nav-bg.gif) repeat-x;
+
-
}
+
-
div#menu ul {
 
-
    margin: 0;
 
-
    padding: 0;
 
-
    list-style: none;
 
-
    float: left;
 
-
}
 
-
div#menu ul.menu {
 
-
    padding-left: 30px;
 
-
}
 
-
div#menu li {
+
<script  type="text/JavaScript">
-
    position: relative;
+
$(document).ready(function(){  
-
    z-index: 9;
+
// This initialises carousels on the container elements specified, in this case, carousel1.
-
    margin: 0;
+
$("#carousel1").CloudCarousel(
-
    padding: 0;
+
{
-
    display: block;
+
xPos: 400,
-
    float: left;
+
xRadius:300,
-
}
+
yPos: 120,
-
 
+
buttonLeft: $("#left-but"),
-
div#menu li:hover>ul {
+
buttonRight: $("#right-but"),
-
    left: -2px;
+
altBox: $("#alt-text"),
-
}
+
titleBox: $("#title-text")
 +
}
 +
);
 +
});
-
div#menu li div {
+
$(document).ready(function(){
-
    list-style: none;
+
     $('#tweetsFeed').jTweetsAnywhere({
-
    float: left;
+
        username: 'igem_biotec',
-
    position: absolute;
+
        count: 10,
-
    top: 50px;
+
        showFollowButton: true
-
    left: 0;
+
-
    width: 208px;
+
-
    z-index: 11;
+
-
    visibility: hidden;
+
-
    padding: 0 0 9px 7px;
+
-
    _padding: 0 0 9px 3px;
+
-
    background: url(images/submenu-bottom.png) no-repeat 7px bottom;
+
-
     _background-image: url(images/submenu-bottom.gif);
+
-
    margin: 0 0 0 -9px;
+
-
}
+
-
div#menu li:hover>div {
+
-
    visibility: visible;
+
-
}
+
-
div#menu li.current a {}
+
    });
 +
});
 +
</script>
 +
 +
</head>
 +
    <body>
 +
    <!-- This is the container for the carousel. -->
 +
        <div id = "carousel1" style="width:800px; height:500px;background:#000;overflow:scroll;">                     
 +
<!-- Define left and right buttons. -->
 +
        <input id="left-but"  type="button" value="Left" />
 +
        <input id="right-but" type="button" value="Right" />
 +
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
 +
            <!-- You can place links around these images -->
 +
<a href="https://static.igem.org/mediawiki/igem.org/8/8e/BiotecDresden_Circle_Adi.jpg" rel="lightbox" title="Image of Adi"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/8/8e/BiotecDresden_Circle_Adi.jpg/300px-BiotecDresden_Circle_Adi.jpg" alt="Image of Adi" title="Image of Adi" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/b/bf/BiotecDresden_Circle_Svea.jpg" rel="lightbox" title="Image of Svea"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/b/bf/BiotecDresden_Circle_Svea.jpg/300px-BiotecDresden_Circle_Svea.jpg" alt="Image of Svea" title="Image of Svea" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/5/54/BiotecDresden_Circle_Sarah.jpg" rel="lightbox" title="Image ofSarah"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/5/54/BiotecDresden_Circle_Sarah.jpg/300px-BiotecDresden_Circle_Sarah.jpg" alt="Image of Sarah" title="Image of Sarah" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/a/a4/BiotecDresden_Circle_Mareike.jpg" rel="lightbox" title="Image of Mareike"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/a/a4/BiotecDresden_Circle_Mareike.jpg/300px-BiotecDresden_Circle_Mareike.jpg" alt="Image of Mareike" title="Image of Mareike" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/f/f0/BiotecDresden_Circle_Habib.jpg" rel="lightbox" title="Image of Habib"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/f/f0/BiotecDresden_Circle_Habib.jpg/300px-BiotecDresden_Circle_Habib.jpg" alt="Image of Habib" title="Image of Habib" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/0/07/BiotecDresden_Circle_Jon.jpg" rel="lightbox" title="Image of Jon"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/0/07/BiotecDresden_Circle_Jon.jpg/300px-BiotecDresden_Circle_Jon.jpg" alt="Image of Jon" title="Image of Jon" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/e/e8/BiotecDresden_Circle_Charanya.jpg" rel="lightbox" title="Image of Charanya"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/e/e8/BiotecDresden_Circle_Charanya.jpg/300px-BiotecDresden_Circle_Charanya.jpg" alt="Image of Charanya" title="Image o Charanya" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/5/51/BiotecDresden_Circle_Rahul.jpg" rel="lightbox" title="Image of Rahul"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/5/51/BiotecDresden_Circle_Rahul.jpg/300px-BiotecDresden_Circle_Rahul.jpg" alt="Image of Rahul" title="Image of Rahul" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/3/35/BiotecDresden_Circle_Viktor.jpg" rel="lightbox" title="Image of Viktor"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/3/35/BiotecDresden_Circle_Viktor.jpg/300px-BiotecDresden_Circle_Viktor.jpg" alt="Image of Victor" title="Image of Victor" /></a>
 +
<a href="https://static.igem.org/mediawiki/igem.org/2/27/BiotecDresden_Circle_Lucas.jpg" rel="lightbox" title="Image of Lucas"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/2/27/BiotecDresden_Circle_Lucas.jpg/300px-BiotecDresden_Circle_Lucas.jpg" alt="Image of Lucas" title="Image of Lucas" /></a>
 +
</div>
 +
       
 +
       
 +
        <!-- Define elements to accept the alt and title text from the images. -->
 +
        <p id="title-text"></p>
 +
        <p id="alt-text"></p>
 +
<h2>Menu Idea</h2>
 +
<a href="http://apycom.com/menus/1-dim-gray.html">more ideas</a>
 +
<div id="menu">
 +
    <ul class="menu">
 +
        <li><a href="#" class="parent"><span>Home</span></a>
 +
            <div><ul>
 +
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
 +
                    <div><ul>
 +
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
 +
                            <div><ul>
 +
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
 +
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
 +
                            </ul></div>
 +
                        </li>
 +
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
 +
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
 +
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
 +
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
 +
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
 +
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
 +
                            <div><ul>
 +
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
 +
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
 +
                            </ul></div>
 +
                        </li>
 +
                    </ul></div>
 +
                </li>
 +
                <li><a href="#"><span>Sub Item 2</span></a></li>
 +
                <li><a href="#"><span>Sub Item 3</span></a></li>
 +
            </ul></div>
 +
        </li>
 +
        <li><a href="#"><span>Product Info</span></a>
 +
            <div><ul>
 +
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
 +
                    <div><ul>
 +
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
 +
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
 +
                    </ul></div>
 +
                </li>
 +
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
 +
                    <div><ul>
 +
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
 +
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
 +
                    </ul></div>
 +
                </li>
 +
                <li><a href="#"><span>Sub Item 3</span></a></li>
 +
                <li><a href="#"><span>Sub Item 4</span></a></li>
 +
                <li><a href="#"><span>Sub Item 5</span></a></li>
 +
                <li><a href="#"><span>Sub Item 6</span></a></li>
 +
                <li><a href="#"><span>Sub Item 7</span></a></li>
 +
            </ul></div>
 +
        </li>
 +
        <li><a href="#"><span>Help</span></a></li>
 +
        <li class="last"><a href="#"><span>Contacts</span></a></li>
 +
    </ul>
 +
</div>
-
/* menu::level1 */
+
<h2>our twitter box</h2>
-
div#menu a {
+
<div id="tweetsFeed"></div>
-
    position: relative;
+
-
    z-index: 10;
+
-
    height: 55px;
+
-
    display: block;
+
-
    float: left;
+
-
    padding: 0 10px 0 10px;
+
-
    line-height: 55px;
+
-
    text-decoration: none;
+
-
}
+
-
div#menu span {
+
-
    font: normal 12px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
+
-
    padding-top: 18px;
+
-
    color: #dbff92;
+
-
    font-weight:bold;
+
-
    text-transform:uppercase;
+
-
    display: block;
+
-
    cursor: pointer;
+
-
    background-repeat: no-repeat;
+
-
}
+
-
div#menu ul a:hover span {
+
-
    color: #455821;
+
-
}
+
-
div#menu li { background: url(images/nav_separator.png) top left no-repeat; }
+
<h2>AddThis</h2>
-
div#menu li.last span{
+
<!-- AddThis Button BEGIN -->
-
    background: url(images/nav_separator.png) top right no-repeat;
+
<div class="addthis_toolbox addthis_default_style">
-
    padding: 18px 10px 16px 0;
+
<a class="addthis_button_favorites"></a>
-
}
+
<a class="addthis_button_email"></a>
 +
<a class="addthis_button_print"></a>
 +
<span class="addthis_separator">|</span>
 +
<a class="addthis_button_facebook"></a>
 +
<a class="addthis_button_twitter"></a>
 +
<a class="addthis_button_stumbleupon"></a>
 +
<span class="addthis_separator"> </span>
 +
<a class="addthis_button_facebook_like"></a>
-
/* menu::level2 */
+
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=igembiotec" class="addthis_button_expanded">More</a>
-
div#menu ul ul li {
+
</div>
-
    background: url(images/nav_dropdown_sep.gif) left bottom repeat-x;
+
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=igembiotec"></script>
-
    padding: 4px 0;
+
<!-- AddThis Button END -->
-
    z-index: 9;
+
<h2>count down - without flash ^^</h2>
-
}
+
        <script type="text/javascript">
-
div#menu ul ul {
+
            $(document).ready(function(){
-
    z-index: 12;
+
                $("body").kkCountDown();
-
    padding: 0;
+
            });
-
    background: rgb(102,136,35) url(images/nav_dropdown_grad.png) right top no-repeat;
+
        </script>
-
    margin-top:0px;
+
-
    margin-left:4px;
+
-
    margin-right:5px;
+
-
}
+
-
div#menu ul ul a {
+
-
  width: 184px;
+
-
  padding: 0px 7px 3px 8px;
+
-
    height: auto;
+
-
    float: none;
+
-
    display: block;
+
-
    background:none;
+
-
    margin-bottom: 2px;
+
-
    z-index: -1;
+
-
}
+
-
div#menu ul ul a span {
+
-
  padding: 0 10px 0px 10px;
+
-
    line-height: 20px;
+
-
    color: #364619;
+
-
    font-weight:normal;
+
-
    text-transform: none;
+
-
    background:none;
+
-
}
+
-
div#menu ul ul a:hover {
+
-
    background: url(images/submenu-selected-bottom.gif) no-repeat 8px bottom;
+
-
}
+
-
div#menu ul ul a:hover span {
+
-
    background: url(images/submenu-selected-top.gif) no-repeat 0px 0px;
+
-
    color: #fff;
+
-
}
+
-
div#menu ul ul li.last { background: none; }
+
        <div id="content">
-
div#menu ul ul li {
+
            <div id="count-box">
-
    width: 100%;
+
                <span time="1288915200" class="kkcount-down"></span>
-
}
+
            </div>
 +
        </div>
-
/* menu::level3 */
+
  okay a few coverflow ideas
-
div#menu ul ul div {
+
-
    width: 208px;
+
-
    margin: -50px 0 0 190px !important;
+
-
    height: auto;
+
-
    _padding: 0 0 9px 3px;
+
-
}
+
-
div#menu ul ul ul {
+
-
_padding-right:1px;
+
-
}
+
-
/* lava lamp */
+
http://folio.vndv.com/jcoverflow/
-
div#menu li.back {
+
http://www.classycode.co.uk/CoverFlow/rwmCoverFlow%20-%20demo.htm
-
}
+
http://finnrudolph.de/ImageFlow/Examples#Default
-
div#menu li.back .left {
+
-
}
+
-
</style>
+
-
<script language="javascript" src="http://apycom.com/ssc-data/themes/default/scripts/jquery.js"></script>
+
-
<script language="javascript" src="http://apycom.com/ssc-data/themes/default/scripts/menu.js"></script>
+
-
</head>
+
-
+
-
<!-- ############################# BODY!!!!! #################################### -->
+
    </body>
-
<body>
+
</html>
-
<div class="wrapper col1">
+
-
  <div id="header">
+
-
    <div id="logo">
+
-
      <h1><a href="#">+Business</a></h1>
+
-
      <p>Free Open Source CSS Website Template</p>
+
-
    </div>
+
-
    <div id="topnav">
+
-
      <ul>
+
-
        <li class="active"><a href="index.html">Home</a></li>
+
-
        <li><a href="style-demo.html">Style Demo</a></li>
+
-
        <li><a href="full-width.html">Full Width</a></li>
+
-
        <li><a href="#">DropDown</a>
+
-
          <ul>
+
-
            <li><a href="#">Link 1</a></li>
+
-
            <li><a href="#">Link 2</a></li>
+
-
            <li><a href="#">Link 3</a></li>
+
-
          </ul>
+
-
        </li>
+
-
        <li class="last"><a href="#">A Long Link Text</a></li>
+
-
      </ul>
+
-
    </div>
+
-
    <br class="clear" />
+
-
  </div>
+
-
</div>
+
-
</body></html>
+

Latest revision as of 23:42, 18 June 2010

Image of Adi Image of Svea Image of Sarah Image of Mareike Image of Habib Image of Jon Image of Charanya Image of Rahul Image of Victor Image of Lucas

Menu Idea

more ideas

our twitter box

AddThis

| More

count down - without flash ^^

okay a few coverflow ideas http://folio.vndv.com/jcoverflow/ http://www.classycode.co.uk/CoverFlow/rwmCoverFlow%20-%20demo.htm http://finnrudolph.de/ImageFlow/Examples#Default