< PennState | Project(Difference between revisions)
|
|
Line 1: |
Line 1: |
- | <html>
| |
- | <!-- START CSS: the following css needs to be on the page to style the podcast divs properly. Diagonal span background based on www.mezzoblue.com/zengarden/alldesigns/ -->
| |
- | <style type="text/css">
| |
- | .column {
| |
- | width: 400px;
| |
- | position: relative;
| |
- | display: block;
| |
- | float: left;
| |
- | clear: none;
| |
- | margin-right: 20px;
| |
- | }
| |
- | .podcast{
| |
- | position: relative;
| |
- | float: none;
| |
- | border: 1px dotted #c7cbce;
| |
- | height: 110px;
| |
- | background-color: #f1f1f1;
| |
- | clear: both;
| |
- | margin-bottom: 42px;
| |
- | font: 12px/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Tahoma, Arial, sans-serif;
| |
- | padding: 0;
| |
- | width: 400px;
| |
- | }
| |
- | .podcast h3{
| |
- | color: #3d3d3d;
| |
- | margin: .2em 0 .5em;
| |
- | padding: 0 0 0 4px;
| |
- | font-family: Verdana, sans-serif;
| |
- | font-size: 100%;
| |
- | }
| |
- | .podcast a:link, .podcast a:visited{
| |
- | text-decoration: none;
| |
- | color: #3d3d3d;
| |
- | }
| |
- | .podcast a:hover {
| |
- | color: #aaaaff;
| |
- | }
| |
- | a:hover.screenshot {
| |
- | }
| |
- | .podcast .screenshot {
| |
- | float: left;
| |
- | position: relative;
| |
- | clear: none;
| |
- | display: block;
| |
- | margin: 0px 0px 0px 16px;
| |
- | }
| |
- | .podcast .screenshot img {
| |
- | background: #ffffff;
| |
- | border: 1px solid #c7cbce;
| |
- | padding: 4px;
| |
- | }
| |
- | .podcast .screenshot span {
| |
- | position: absolute;
| |
- | bottom:0px;
| |
- | right: 1px;
| |
- | padding: 4px 20px 4px 26px;
| |
- | background: url(https://static.igem.org/mediawiki/2007/0/09/Podcast-download-bg.gif) no-repeat;
| |
- | font-size: 0.8em;
| |
- | line-height: 1;
| |
- | }
| |
- | .podcast .screenshot span a{
| |
- | padding: 0 0 0 0.5em;
| |
- | }
| |
- | .podcast .description {
| |
- | display: block;
| |
- | position: relative;
| |
- | float: left;
| |
- | width: 220px;
| |
- | margin-left: 3px;
| |
- | padding-left: 1.2em;
| |
- | }
| |
- | .podcast .description a{
| |
- | border-bottom: 1px dotted #aaaaff;
| |
- | }
| |
- | .podcast .description a:hover{
| |
- | border-bottom: 1px dotted #aaaaff;
| |
- | }
| |
- | .screenshot img:hover {
| |
- | border: 1px solid #aaaaff;
| |
- | }
| |
- | </style></html>
| |
| | | |
- | <html>
| |
- | <!-- PODCAST HTML: the following html structures the information for each podcast. Each podcast entry is contained in its own podcast div, which are arranged into two columns by two column divs. The last column must be cleared.-->
| |
- | <div class="column">
| |
- |
| |
- | <div class="podcast">
| |
- | <!-- this is where you need to post the link to where it will go (the second one)-->
| |
- | <h3><a rel="enclosure" href="http://openwetware.org/images/c/c9/XylRdimer1.png" onclick="window.popup_player_258600 = window.open('http://openwetware.org/images/c/c9/XylRdimer1.png','post_258600','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;">
| |
- | Introduction
| |
- | </a></h3>
| |
- | <div class="screenshot">
| |
- | <!-- little white box thing --> <a rel="enclosure" href="http://openwetware.org/images/c/c9/XylRdimer1.png"
| |
- | <img src="http://openwetware.org/images/c/c9/XylRdimer1.png" width="133" height="100" alt="" />
| |
- | </a>
| |
- | <span class="download">
| |
- | <a href="http://openwetware.org/images/c/c9/XylRdimer1.png">Link 1</a>
| |
- | <a href="http://openwetware.org/images/c/c9/XylRdimer1.png">Link 2</a>
| |
- | </span>
| |
- | </div>
| |
- | <div class="description">
| |
- | "Project home page" </div>
| |
- | </div>
| |
- | <div style="clear:both"></div>
| |
- | </html>
| |