Template:Team:UNAM-Genomics Mexico/Templates/Main2

From 2010.igem.org

(Difference between revisions)
(New page: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Dynamic Drive: CSS Liquid Layou...)
Line 5: Line 5:
<style type="text/css">
<style type="text/css">
 +
/* Getting rid of IGEM elements */
 +
 +
#contentSub {
 +
display:none;
 +
}
 +
 +
#siteSub {
 +
display:none;
 +
}
 +
 +
#search-controls {
 +
display:none;
 +
}
 +
 +
.firstHeading {
 +
display:none;
 +
}
 +
 +
#search-controls {
 +
margin-top:30px;
 +
}
 +
 +
#footer-box {
 +
display:none;
 +
}
 +
 +
 +
/* This is the REAL background to the whole page */
body{
body{
-
margin:0;
+
background: -moz-linear-gradient(center top, #0000, #bb4444 25%, #44bb44 50%, #4444bb 75%, #0000);
-
padding:0;
+
background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(25%, #bb4444), color-stop(50%, #44bb44), color-stop(75%, #4444bb), to(#000000));
-
line-height: 1.5em;
+
color: white;
}
}
-
b{font-size: 110%;}
+
/* This is the next layer, on top of the body background */
-
em{color: red;}
+
#content{
 +
background: black;
 +
color: white;
 +
}
#contentwrapper{
#contentwrapper{
Line 20: Line 51:
#contentcolumn{
#contentcolumn{
-
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
+
margin-left: 25%; /*Set left margin to LeftColumnWidth*/
 +
margin-right: 3%;
}
}
#leftcolumn{
#leftcolumn{
float: left;
float: left;
-
width: 200px; /*Width of left column*/
+
width: 20%;
-
margin-left: -100%;
+
margin-left: -97%;
-
background: -moz-linear-gradient(left, #ffffff, #bb4444 25%, #44bb44 50%, #4444bb 75%, #ffffff);
+
-
background: -webkit-gradient(linear, left center, right center, from(#ffffff), color-stop(25%, #bb4444), color-stop(50%, #44bb44), color-stop(75%, #4444bb), to(#ffffff));
+
}
}
Line 34: Line 64:
clear: left;
clear: left;
width: 100%;
width: 100%;
-
background: black;
+
background: #414141;
color: #FFF;
color: #FFF;
text-align: center;
text-align: center;
Line 47: Line 77:
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
margin-top: 0;
 +
}
 +
 +
#overall {
 +
background: -moz-linear-gradient(left, #000000, #ffffff 3%, #ffffff 96%, #000000 99%, #000000);
 +
background: -webkit-gradient(linear, left center, right center, from(#000000), color-stop(3%, #ffffff), color-stop(96%, #ffffff), color-stop(99%, #000000), to(#000000));
 +
color: black;
}
}
Line 62: Line 98:
</head>
</head>
<body>
<body>
 +
<div id="overall">
<div id="maincontainer">
<div id="maincontainer">
<div id="topsection"></html><div id="header">{{Template:Team:UNAM-Genomics_Mexico/Templates/Header}}</div><html></div>
<div id="topsection"></html><div id="header">{{Template:Team:UNAM-Genomics_Mexico/Templates/Header}}</div><html></div>
 +
 +
<br />
<div id="contentwrapper">
<div id="contentwrapper">
Line 74: Line 113:
<div id="leftcolumn">
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
<div class="innertube"><b>Left Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
 +
</div>
 +
<div id="footer">
 +
This is the Footer.
</div>
</div>
-
<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
 
 +
 +
</div>
 +
</div>
 +
<br/>
 +
<div align="right">
 +
<a href="http://www2.clustrmaps.com/counter/maps.php?url=https://2010.igem.org/Team:UNAM-Genomics_Mexico" id="clustrMapsLink"><img src="http://www2.clustrmaps.com/counter/index2.php?url=https://2010.igem.org/Team:UNAM-Genomics_Mexico" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com';" /></a>
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 08:05, 1 August 2010

Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)

Content Column: Fluid
Left Column: 200px

Locations of visitors to this page