Team:IIT Madras

From 2009.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
<html>
-
<style><head>
+
<head>
 +
 
 +
<style>
#container {
#container {
-
clear:both
+
 
-
+
width: 850px;
 +
 
 +
margin-right: auto;
 +
 
 +
margin-left: auto;
 +
 
}
}
#header {
#header {
-
background: #000;
+
 
-
height: 125px;
+
height: 100px;
-
margin: 0 auto;
+
 
-
clear: both
+
width: 1000px;
-
position: relative;
+
 
 +
background-image:url(https://static.igem.org/mediawiki/2009/c/c8/IITM.png) top right no-repeat;
 +
 
}
}
 +
 +
#content {
#content {
-
        width: 600px;
+
 
-
        padding: 10px;
+
width: 500px;
-
        margin-right: 160px;
+
 
 +
padding: 10px;
 +
 
 +
margin-right: 160px;
 +
 
margin-left: 160px;
margin-left: 160px;
-
+
}
-
}
+
 
#leftnav {
#leftnav {
 +
float: left;
float: left;
-
        width: 140px
+
 
 +
width: 140px;
 +
 
height: 400px;
height: 400px;
 +
background-color: #30D9F4;
background-color: #30D9F4;
 +
padding: 5px;
padding: 5px;
 +
 +
 +
}
}
 +
 +
#leftnav ul
#leftnav ul
 +
{
{
 +
margin-left: 0;
margin-left: 0;
 +
padding-left: 0;
padding-left: 0;
 +
list-style-type: none;
list-style-type: none;
 +
font-family: Arial, Helvetica, sans-serif;
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 12px;
font-size: 12px;
 +
}
}
 +
 +
 +
 +
#leftnav a
 +
 +
{
 +
 +
display: block;
 +
 +
width: 130px;
 +
 +
padding-top: 3px;
 +
 +
padding-right: 3px;
 +
 +
padding-bottom: 3px;
 +
 +
padding-left: 3px;
 +
 +
border-bottom-width: 1px;
 +
 +
}
 +
 +
#leftnav a:link, .navlist a:visited
#leftnav a:link, .navlist a:visited
 +
{
{
 +
color: #ffffff;
color: #ffffff;
 +
text-decoration: underline;
text-decoration: underline;
 +
font-weight: bold;
font-weight: bold;
 +
}
}
 +
 +
#leftnav a:visited
#leftnav a:visited
 +
{
{
 +
   color: #ffffff;
   color: #ffffff;
 +
   text-decoration: underline;
   text-decoration: underline;
 +
   font-weight: bold;
   font-weight: bold;
 +
}
}
 +
 +
#leftnav a:hover
#leftnav a:hover
 +
{
{
 +
text-decoration: none;
text-decoration: none;
 +
color: #0000ff;
color: #0000ff;
 +
}
}
 +
 +
#sidebar {
#sidebar {
 +
padding: 10px;
padding: 10px;
 +
float: right;
float: right;
 +
width: 130px;
width: 130px;
 +
background-color: #30D9F4;
background-color: #30D9F4;
 +
height: 390px;
height: 390px;
 +
 +
}
}
 +
 +
#footer {
#footer {
 +
background-color: #2F77F1;
background-color: #2F77F1;
 +
padding: 10px;
padding: 10px;
 +
clear: both;
clear: both;
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
font-size: 12px;
font-size: 12px;
 +
font-weight: bold;
font-weight: bold;
 +
}
}
 +
 +
 +
h1 {
h1 {
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
font-size: 22px;
font-size: 22px;
 +
font-weight: bold;
font-weight: bold;
 +
color: #1A2373;
color: #1A2373;
 +
line-height: 24px;
line-height: 24px;
 +
}
}
 +
 +
h2 {
 +
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
 +
font-size: 17px;
 +
 +
font-weight: bold;
 +
 +
color: #2F77F1;
 +
 +
line-height: 20px;
 +
 +
}
 +
 +
h3 {
 +
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
 +
font-size: 14px;
 +
 +
font-weight: bolder;
 +
 +
color: #000000;
 +
 +
line-height: 20px;
 +
 +
}
 +
p {
p {
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
font-size: 12px;
font-size: 12px;
 +
line-height: 11pt;
line-height: 11pt;
 +
margin-top: 3px;
margin-top: 3px;
 +
margin-right: 0;
margin-right: 0;
 +
margin-bottom: 3px;
margin-bottom: 3px;
 +
margin-left: 0;
margin-left: 0;
 +
padding-bottom: 9px;
padding-bottom: 9px;
 +
}
}
 +
 +
a {
a {
 +
color: #E82525;
color: #E82525;
 +
font-weight: bold;
font-weight: bold;
 +
text-decoration: underline;
text-decoration: underline;
 +
}
}
 +
a:visited {
a:visited {
 +
color: #E82525;
color: #E82525;
 +
text-decoration: underline;
text-decoration: underline;
 +
font-weight : bold;
font-weight : bold;
 +
}
}
 +
a:hover {
a:hover {
 +
color: #901BBE;
color: #901BBE;
 +
text-decoration: none;
text-decoration: none;
 +
}
}
 +
 +
 +
.box1 {
.box1 {
 +
background:#ffffff;
background:#ffffff;
 +
color: #000;
color: #000;
 +
border:1px solid #00ffff;
border:1px solid #00ffff;
 +
width: 400px;
width: 400px;
 +
height: 165px;
height: 165px;
 +
padding-top: 5;
padding-top: 5;
-
padding-right: 0;
+
 
 +
padding-right: 6px;
 +
 
padding-bottom: 0;
padding-bottom: 0;
-
padding-left: 0;
+
 
 +
padding-left: 6px;
 +
 
line-height: 16px;
line-height: 16px;
 +
}
}
 +
 +
.smalltext {
.smalltext {
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
font-size: 10px;
font-size: 10px;
 +
padding: 3px 0;
padding: 3px 0;
 +
     margin: 3px 0;
     margin: 3px 0;
 +
line-height: 12pt
line-height: 12pt
 +
}
}
-
</style></head>
+
</style>
-
 
+
-
<body>  
+
 +
  <link rel="shortcut icon" type="image/vnd.microsoft.icon"
 +
href="http://www.flat-stomach-exercises.com/favicon.ico" />
 +
  <title>iGEM 2009 IIT MADRAS</title>
 +
  <meta name="Description" content="description" />
 +
  <meta name="Keywords" content="keywords separated by commas" />
 +
  <link rel="Shortcut Icon" href="/favicon.ico" />
 +
 
 +
</head>
 +
<body>
<div id="container">
<div id="container">
-
 
+
<div id="header"><span class="style1"> </span>
-
<div id="header">
+
</div>
</div>
-
 
<div id="leftnav">
<div id="leftnav">
-
<ul id="navlist">  
+
<ul id="navlist">
-
<li><a class="aSelected" href="https://2009.igem.org/Team:IIT_Madras">Home</a></li>
+
  <li><a href="http://www.thisisyourhomepage.com">Home</a></li>
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Team">Team</a></li>
+
  <li><a href="http://www.yahoo.com">Links</a></li>
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Project">Project</a></li>
+
  <li><a href="http://www.yahoo.com">Links</a></li>
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Protocols">Protocols</a></li>
+
  <li><a href="http://www.yahoo.com">Links</a></li>
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Notebook">Notebook</a></li>
+
  <li><a href="http://www.yahoo.com">Links</a></li>
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Abdul">Abdul</a></li>
+
  <li><a href="http://www.yahoo.com">Links</a></li>
-
<li><a href="https://2009.igem.org/Team:IIT_Madras/Pawan">Pawan</a></li>
+
</ul>
</ul>
-
 
+
<p>The entire left column layout and color is controlled by the
-
<p>The entire left column layout and color is controlled by the &quot;leftnav&quot; section on the style sheet. </p>
+
"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>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>
<p>Play around with different attributes to see different results.</p>
</div>
</div>
-
 
-
 
<div id="sidebar">
<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> This is where you put sidebar text. It's a great place for
-
<p>Define the look and feel of this area by editing the <strong>sidebar</strong> section in the style.css file  
+
text and banner ads or news items.</p>
-
  that came with this template.</p>
+
<p>Define the look and feel of this area by editing the <strong>sidebar</strong>
-
<p>You can also adjust the color, height, etc. of this area if you wish.</p>
+
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>
-
 
<div id="content">
<div id="content">
-
 
+
<h1>Title of Page (Edit the H1 Tag on style sheet to change look
-
  <h1>Title of Page (Edit the H1 Tag on style sheet to change look of title.)</h1>
+
of title.)</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
-
  <p>This area is controlled by the &quot;container&quot; 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 &quot;container&quot; section in the style.css file.</p>
+
gray background color, etc. then you can play with the values
-
  <p>To change the font size and style, edit the &quot;p&quot; attribute.</p>
+
underneath "container" section in the style.css file.</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 &quot;a&quot;, &quot;a: visited&quot; and &quot;a: hover&quot; sections in style.css.</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>
+
<h2>This is H2 Subtitle Text. Change the H2 tag in the style
-
  <h3>This is H3 Subtitle Text. Change the H3 tag in the style sheet to change the design of this text.<br />
+
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>
</h3>
-
  </div>
 
-
 
-
 
-
<div align="center" id="footer">
 
-
<p>This is the footer section. To edit the colors, font style, etc. Edit the &quot;footer&quot; section in style.css</p>
 
-
<p class="smalltext">&copy; 2008 Your copyright notice </p>
 
-
<p class="smalltext">(The size of the copyright notice is controlled by &quot;smalltext&quot; in the style sheet.)</p>
 
</div>
</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>
 +
</div>
</div>
</div>
-
 
-
 
-
 
</body>
</body>
</html>
</html>

Revision as of 06:23, 13 October 2009

iGEM 2009 IIT MADRAS

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.

Title of Page (Edit the H1 Tag on style sheet to change look of title.)

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.

Retrieved from "http://2009.igem.org/Team:IIT_Madras"