Team:Calgary/Sandbox

From 2010.igem.org

(Difference between revisions)
 
(110 intermediate revisions not shown)
Line 1: Line 1:
-
==Preface==
+
<html>
-
This is a page to practice various HTML and CSS formatting functions. Please click [[Team:Calgary | here]] to return to the main page.
+
<head>
 +
<title> iGEM Information Tabs </title>
-
==Sandbox==
+
<script type="text/javascript" src="http://www.wikiwikiwebworks.ca/script1.js"></script>
 +
-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
<style>
 +
 +
</style>
-
<!--Colors Blue:4AC6F7, Yellow:F3F778, Green:9ECF3E, White:FFFFFF, Dark Brown:30251A-->
+
</head>
-
<head>
 
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
-
<title>Dynamic Drive: CSS Fixed Layout #2.1- (Fixed-Fixed)</title>
 
-
<style type="text/css">
 
-
body{
 
-
margin:0;
 
-
padding:0;
 
-
line-height: 1.5em;
 
-
}
 
-
b{
+
<body>
-
font-size: 110%;
+
 
-
}
+
 
 +
 
 +
<!-- text division -->
 +
 +
<div style="margin-left:auto; margin-right:auto; background:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Background.png'); width:556px; height:330px; padding-top:15px; ">
 +
 +
<div id="0" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:block ">
 +
 
 +
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
 +
 +
<img id="boximage1" src="http://www.army.forces.gc.ca/cfb_suffield/Images/CFB_Suffield1.gif"></img>
-
em{
+
</div>
-
color: red;
+
-
}
+
-
#maincontainer{
 
-
width: 940px; /*Width of main container*/
 
-
margin: 0 auto; /*Center container on page*/
 
-
}
 
-
#topsection{
+
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
background: #EAEAEA;
+
-
height: 90px; /*Height of top section*/
+
<p style="padding-left:10px;">On July 14th, 2010, iGEM Calgary visited the Defence Research and Development Canada (DRDC) facility in Suffield, Alberta.</p>
-
}
+
 +
</div>
 +
 +
</div>
-
#topsection h1{
+
-
margin: 0;
+
-
padding-top: 15px;
+
-
}
+
-
#contentwrapper{
+
<div id="1" style="background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
float: left;
+
-
width: 100%;
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
}
+
 +
<img id="boximage2" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ImageTBA-1.png"></img>
 +
</div>
-
#contentcolumn{
+
-
margin-left: 250px; /*Set left margin to LeftColumnWidth*/
+
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
}
+
 +
<p style="padding-left:10px;"> I'm generic information about Lethbridge! </p>
 +
 +
</div>
 +
 +
</div>
-
#leftcolumn{
+
-
float: left;
+
-
width: 250px; /*Width of left column*/
+
-
margin-left: -940px; /*Set left margin to -(MainContainerWidth)*/
+
-
background: #C8FC98;
+
-
}
+
-
#footer{
+
<div id="2" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
clear: left;
+
-
width: 100%;
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
background: black;
+
-
color: #FFF;
+
-
text-align: center;
+
-
padding: 4px 0;
+
-
}
+
-
#footer a{
+
<img id="boximage3" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/bhsgrnsmall.png"></img>
-
color: #FFFF80;
+
-
}
+
</div>
-
.innertube{
+
-
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
+
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
margin-top: 0;
+
-
}
+
-
</style>
+
<p style="padding-left:10px;"> I'm like burning man but better! </p>
 +
 +
</div>
 +
 +
</div>
-
</head>
+
-
<body>
+
<div id="3" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
<div id="maincontainer">
+
 
 +
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
 +
 +
<img id="boximage4" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProtocolIcon.png"></img>
 +
 +
</div>
 +
 
 +
 +
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
 +
 
 +
<p style="padding-left:10px;"> I'm a fan of cupcakes! </p>
 +
 +
</div>
 +
 +
</div>
 +
 
 +
 +
 
 +
<div id="4" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
 +
 
 +
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
 +
 
 +
<img id="boximage5" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Twitter.png"></img>
 +
 +
</div>
 +
 
 +
 +
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
 +
 
 +
<p style="padding-left:10px;"> I'm from Alberta and I'm awesome! </p>
 +
 +
</div>
 +
 +
</div>
 +
 
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
<!-- menu bar -->
 +
 +
<div style="width:524px; height:35px; margin-right:auto; margin-left:auto; margin-top:-10px; padding-left:10px; ">
 +
 
 +
 +
<div onmouseover="imgHover(1);" onmouseout="imgOff(1);" onclick="changeTab(0);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="suffield" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/SuffieldWhite.png" title="suffield" /> </div>
 +
 
 +
 +
<div onmouseover="imgHover(2);" onmouseout="imgOff(2);" onclick="changeTab(1);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="lethbridge" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/LethbridgeGrey.png" title="lethbridge" /> </div>
 +
 
 +
 +
<div onmouseover="imgHover(3);" onmouseout="imgOff(3);" onclick="changeTab(2);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="proteinman" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProteinManGrey.png" title="protein man" /> </div>
 +
 
 +
 
 +
<div onmouseover="imgHover(4);" onmouseout="imgOff(4);" onclick="changeTab(3);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="community" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/CommunityGrey.png" title="bake sale" /> </div>
 +
 
 +
 +
<div onmouseover="imgHover(5);" onmouseout="imgOff(5);" onclick="changeTab(4);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="agem" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/aGEMGrey.png" title="aGEM" /> </div>
 +
 +
</div>
-
<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.1- (Fixed-Fixed)</h1></div></div>
 
-
<div id="contentwrapper">
 
-
<div id="contentcolumn">
 
-
<div class="innertube"><b>Content Column: <em>Fixed</em></b></div>
 
-
</div>
 
-
</div>
 
-
<div id="leftcolumn">
 
-
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
 
-
</div>
 
-
<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
+
</body>
-
</div>
 
-
</body>
 
</html>
</html>

Latest revision as of 06:48, 25 October 2010

iGEM Information Tabs

On July 14th, 2010, iGEM Calgary visited the Defence Research and Development Canada (DRDC) facility in Suffield, Alberta.

I'm generic information about Lethbridge!

I'm like burning man but better!

I'm a fan of cupcakes!

I'm from Alberta and I'm awesome!

Retrieved from "http://2010.igem.org/Team:Calgary/Sandbox"