Template:Team:DukeSafety/CSS

From 2014.igem.org

(Difference between revisions)
 
(53 intermediate revisions not shown)
Line 1: Line 1:
-
<!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">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
 
-
 
-
<!--THIS STYLE SHEET IS FOR THE SAFETY PAGE -->
 
<head>
<head>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
<style media="screen" type="text/css">
-
<style type="text/css">
+
#pictable {
 +
margin-left:5%;
 +
margin-right:5%;
 +
margin-bottom:5%;
 +
margin-top:-2.5%;
 +
}
-
/*Make sure your page contains a valid doctype at the top*/
+
#pictable img {
-
#simplegallery1{ //CSS for Simple Gallery Example 1
+
width:100px;
-
position: relative; /*keep this intact*/
+
height:100px;
-
visibility: hidden; /*keep this intact*/
+
position:relative;
-
border: 10px solid darkred;
+
z-index:50;
}
}
-
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
+
#pictable table {
-
text-align: left;
+
float:left;
-
padding: 2px 5px;
+
}
}
-
</style>
+
#bigsection {
 +
width: 60%;
 +
height: 57%;
 +
overflow:hidden;
 +
float:right;
 +
padding-left:57%;
 +
position:fixed;
 +
margin-top:-2.5%;
 +
margin-right:5%;
 +
z-index:49;
 +
color:#fff;
 +
}
-
<!-- replaced src="simplegallery.js" with the URL of the script -- hope it works! -->
+
.bigpic {
 +
        clear:both;
 +
        font-size:1em;
 +
        color:#fff;
 +
        margin-top: 0%;
 +
}
-
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/simplegallery.js.">
+
.bigpic img {
 +
/*width: 324px;
 +
height: 243px;*/
 +
width: 60%;
 +
height: 55%;
 +
}
-
/***********************************************
+
.safe {
-
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
+
        font-size:1em;
-
* This notice MUST stay intact for legal use
+
        color:#fff;
-
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
+
        margin-left: 5%;
-
***********************************************/
+
        margin-right: 5%;
 +
        margin-bottom: 5%;
 +
        margin-top: -3%;
 +
}
-
</script>
+
.safe h2 {
 +
color:#fff;
 +
}
-
<script type="text/javascript">
+
</style>
-
 
+
-
var mygallery=new simpleGallery({
+
-
wrapperid: "simplegallery1", //ID of main gallery container,
+
-
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
+
-
imagearray: [
+
-
["farnbody.jpg", "", "_new", "There's nothing like a nice swim in the Summer."],
+
-
["Cieslabody.jpg", "", "", ""]
+
-
],
+
-
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
+
-
persist: false, //remember last viewed slide and recall within same session?
+
-
fadeduration: 500, //transition duration (milliseconds)
+
-
oninit:function(){ //event that fires when gallery has initialized/ ready to run
+
-
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
+
-
},
+
-
onslide:function(curslide, i){ //event that fires after each slide is shown
+
-
//Keyword "this": references current gallery instance
+
-
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
+
-
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
+
-
}
+
-
})
+
-
 
+
-
</script>
+
</head>
</head>
<body>
<body>
-
<div id="simplegallery1"></div>
+
 
 +
 
</body>
</body>
</html>
</html>

Latest revision as of 02:29, 18 October 2014