Team:IIT Madras

From 2009.igem.org

(Difference between revisions)
Line 6: Line 6:
<head><style>
<head><style>
-
body
+
#container {
-
{
+
 
-
background: #000;
+
width: 850px;
 +
 
 +
margin-right: auto;
 +
 
 +
margin-left: auto;
 +
 
}
}
-
#top-section, #content, #footer-box
+
#header {
-
{
+
 
-
margin-top: 40px;
+
height: 100px;
 +
 
 +
width: 850px;
 +
 
 +
background-image: transparent url(https://static.igem.org/mediawiki/2009/c/c8/IITM.png) top right no-repeat;
}
}
-
#content
+
 
-
{
+
 
-
padding: 0;
+
#content {
 +
 
 +
width: 500px;
 +
 
 +
padding: 10px;
 +
 
 +
margin-right: 160px;
 +
 
 +
margin-left: 160px;
 +
 
}
}
-
input.searchButton
+
#leftnav {
-
{
+
 
-
color: #fff;
+
float: left;
 +
 
 +
width: 140px;
 +
 
 +
height: 400px;
 +
 
 +
background-color: #30D9F4;
 +
 
 +
padding: 5px;
 +
 
 +
 +
 
}
}
-
.firstHeading, #contentSub
+
 
 +
 
 +
#leftnav ul
 +
 
{
{
-
display: none;
+
 
 +
margin-left: 0;
 +
 
 +
padding-left: 0;
 +
 
 +
list-style-type: none;
 +
 
 +
font-family: Arial, Helvetica, sans-serif;
 +
 
 +
font-size: 12px;
 +
 
}
}
-
#aHome
+
 
 +
 
 +
#leftnav a
 +
 
{
{
-
color: #343434;
+
 
-
font-size: 1.2em;
+
display: block;
-
font-face: Verdana, Calibri, Georgia, sans-serif;
+
 
 +
width: 130px;
 +
 
 +
padding-top: 3px;
 +
 
 +
padding-right: 3px;
 +
 
 +
padding-bottom: 3px;
 +
 
 +
padding-left: 3px;
 +
 
 +
border-bottom-width: 1px;
 +
 
}
}
-
#aHome *
+
 
 +
 
 +
#leftnav a:link, .navlist a:visited
 +
 
{
{
-
margin: 0;
+
 
-
padding: 0;
+
color: #ffffff;
-
border: none;
+
 
 +
text-decoration: underline;
 +
 
 +
font-weight: bold;
 +
 
}
}
-
#aHeading
+
 
 +
 
 +
#leftnav a:visited
 +
 
{
{
-
background: transparent url(https://static.igem.org/mediawiki/2009/c/c8/IITM.png) top right no-repeat;
+
 
-
height: 125px;
+
  color: #ffffff;
-
margin: 0 auto;
+
 
-
width: 900px;
+
  text-decoration: underline;
-
position: relative;
+
 
 +
  font-weight: bold;
 +
 
}
}
-
#aHeading h1
+
 
 +
 
 +
#leftnav a:hover
 +
 
{
{
-
border-bottom: 4px solid #08f;
+
 
-
font-family: /*"Trajan Pro",*/ "Georgia", serif;
+
text-decoration: none;
-
font-size: 300%;
+
 
-
font-weight: lighter;
+
color: #0000ff;
-
letter-spacing: 2px;
+
 
-
padding: 5px;
+
-
position: absolute;
+
-
  left: 0;
+
-
  top: 40px;
+
}
}
-
#aNav
+
 
-
{
+
 
-
background: #08f;
+
#sidebar {
-
clear: right;
+
 
-
display: block;
+
padding: 10px;
-
float: left;
+
 
-
margin: 20px 0 50px 0;
+
float: right;
-
padding: 0 0 0 20px;
+
 
-
width: 945px;
+
width: 130px;
 +
 
 +
background-color: #30D9F4;
 +
 
 +
height: 390px;
 +
 
 +
 
 +
 
}
}
-
#aNav li
+
 
-
{
+
 
-
display: block;
+
#footer {
-
float: left;
+
 
 +
background-color: #2F77F1;
 +
 
 +
padding: 10px;
 +
 
 +
clear: both;
 +
 
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
 
 +
font-size: 12px;
 +
 
 +
font-weight: bold;
 +
 
}
}
-
#aNav li a
+
 
-
{
+
 
-
background: #08f;
+
 
-
color: #fff;
+
 
-
display: block;
+
h1 {
-
line-height: 120%;
+
 
-
padding: 2px 7px;
+
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
 
 +
font-size: 22px;
 +
 
 +
font-weight: bold;
 +
 
 +
color: #1A2373;
 +
 
 +
line-height: 24px;
 +
 
}
}
-
#aNav li a:hover, #aNav li a.aSelected
+
h2 {
-
{
+
 
-
background: #fff;
+
font-family: Verdana, Arial, Helvetica, sans-serif;
-
color: #08f;
+
 
 +
font-size: 17px;
 +
 
 +
font-weight: bold;
 +
 
 +
color: #2F77F1;
 +
 
 +
line-height: 20px;
 +
 
}
}
-
#aContent
+
h3 {
-
{
+
 
-
margin: 50px auto;
+
font-family: Verdana, Arial, Helvetica, sans-serif;
-
padding: 10px 10px 60px 10px;
+
 
-
width: 800px;
+
font-size: 14px;
 +
 
 +
font-weight: bolder;
 +
 
 +
color: #000000;
 +
 
 +
line-height: 20px;
 +
 
}
}
 +
 +
 +
 +
p {
 +
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
 +
font-size: 12px;
 +
 +
line-height: 11pt;
 +
 +
margin-top: 3px;
 +
 +
margin-right: 0;
 +
 +
margin-bottom: 3px;
 +
 +
margin-left: 0;
 +
 +
padding-bottom: 9px;
 +
 +
}
 +
 +
 +
 +
a {
 +
 +
color: #E82525;
 +
 +
font-weight: bold;
 +
 +
text-decoration: underline;
 +
 +
}
 +
 +
a:visited {
 +
 +
color: #E82525;
 +
 +
text-decoration: underline;
 +
 +
font-weight : bold;
 +
 +
}
 +
 +
a:hover {
 +
 +
color: #901BBE;
 +
 +
text-decoration: none;
 +
 +
}
 +
 +
 +
 +
 +
 +
.box1 {
 +
 +
background:#ffffff;
 +
 +
color: #000;
 +
 +
border:1px solid #00ffff;
 +
 +
width: 400px;
 +
 +
height: 165px;
 +
 +
padding-top: 5;
 +
 +
padding-right: 6px;
 +
 +
padding-bottom: 0;
 +
 +
padding-left: 6px;
 +
 +
line-height: 16px;
 +
 +
}
 +
 +
 +
 +
.smalltext {
 +
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
 +
font-size: 10px;
 +
 +
padding: 3px 0;
 +
 +
    margin: 3px 0;
 +
 +
line-height: 12pt
 +
 +
}
 +
 +
</style>
</style>
Line 111: Line 320:
<body>
<body>
-
 
+
</head>
-
<div id="aHome">
+
<body>
-
 
+
<div id="container">
-
<div id="aHeading">
+
<div id="header"><span class="style1"> </span></div>
-
<h1 class="pageTitle">IIT Madras</h1>
+
<div id="leftnav">
 +
<ul id="navlist">
 +
  <li><a href="https://2009.igem.org/Team:IIT_Madras">Home</a></li>
 +
  <li><a href="https://2009.igem.org/Team:IIT_Madras/team">Team</a></li>
 +
  <li><a href="https://2009.igem.org/Team:IIT_Madras/project">Project</a></li>
 +
  <li><a href="https://2009.igem.org/Team:IIT_Madras/modelling">Modelling</a></li>
 +
  <li><a href="https://2009.igem.org/Team:IIT_Madras/who_we_are">Who
 +
we are</a></li>
 +
  <li><a href="http://www.yahoo.com">Links</a></li>
 +
</ul>
 +
<p>The entire left column layout and color is controlled by the
 +
"leftnav" section on the style sheet. </p>
 +
<p>The nav links above are controlled by the a leftnav, a
 +
leftnav, leftnav a:hover and leftnav ul section.</p>
 +
<p>Play around with different attributes to see different results.</p>
</div>
</div>
 +
<div id="sidebar">
 +
<p> This is where you put sidebar text. It's a great place for
 +
text and banner ads or news items.</p>
 +
<p>Define the look and feel of this area by editing the <strong>sidebar</strong>
 +
section in the style.css file that came with this template.</p>
 +
<p>You can also adjust the color, height, etc. of this area if
 +
you wish.</p>
 +
</div>
 +
<div id="content">
 +
<h1>PLASMID</h1>
 +
<p>This area is controlled by the "container" section on your
 +
style sheet. If you want to adjust the size of this space, change the
 +
gray background color, etc. then you can play with the values
 +
underneath "container" section in the style.css file.</p>
 +
<p>To change the font size and style, edit the "p" attribute.</p>
 +
<p><a href="http://www.yahoo.com">This is a hyperlink</a>.
 +
To change the color of the hyperlink and the color it changes when you
 +
mouseover it, edit the "a", "a: visited" and "a: hover" sections in
 +
style.css.</p>
 +
<h2>This is H2 Subtitle Text. Change the H2 tag in the style
 +
sheet to change the design of this text.</h2>
 +
<h3>This is H3 Subtitle Text. Change the H3 tag in the style
 +
sheet to change the design of this text.<br />
 +
</h3>
 +
</div>
 +
<div id="footer" align="center">
 +
<p>This is the footer section. To edit the colors, font style,
 +
etc. Edit the "footer" section in style.css</p>
 +
<p class="smalltext">© 2008 Your copyright notice </p>
 +
<p class="smalltext">(The size of the copyright notice is
 +
controlled by "smalltext" in the style sheet.)</p>
-
<ul id="aNav">
 
-
<li><a class="aSelected" href="https://2009.igem.org/Team:IIT_Madras">Home</a></li>
 
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Team">Team</a></li>
 
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Project">Project</a></li>
 
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Notebook">Notebook</a></li>
 
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Test">Test</a></li>
 
-
</ul>
+
<div id="aHome">
 +
 
 +
<div id="aHead
-
<div id="aContent">
 
-
This is the second time that IIT Madras has sent a team to iGEM. Our team in iGEM 08, the only team to represent India in the competition that year, won the “Best Foundational advance” award, the "Best New Biobrick" award and a Silver, for their work on hybrid promoters which have now been added under the category of promoters (IIT Madras Stresskit promoters). This year, the team is composed of 9 Undergraduates, all from the Department of Biotechnology. We hope to go one step better this year with our design of a combinatorial lock system, and thereby set the standard for future competitions.
 
-
</div>
 
</div><!-- home -->
</div><!-- home -->

Revision as of 17:36, 12 October 2009


The entire left column layout and color is controlled by the "leftnav" section on the style sheet.

The nav links above are controlled by the a leftnav, a leftnav, leftnav a:hover and leftnav ul section.

Play around with different attributes to see different results.

PLASMID

This area is controlled by the "container" section on your style sheet. If you want to adjust the size of this space, change the gray background color, etc. then you can play with the values underneath "container" section in the style.css file.

To change the font size and style, edit the "p" attribute.

This is a hyperlink. To change the color of the hyperlink and the color it changes when you mouseover it, edit the "a", "a: visited" and "a: hover" sections in style.css.

This is H2 Subtitle Text. Change the H2 tag in the style sheet to change the design of this text.

This is H3 Subtitle Text. Change the H3 tag in the style sheet to change the design of this text.