Template:INSA-Lyon/maincontent

From 2010.igem.org

(Difference between revisions)
m (New page: {{INSA-Lyon/stylegroningen}} <html> <style type="text/css"> #corps { width:97.5%; margin: 20px 0 60px 0; padding: 10px; border: 3px solid #c8d4de; ...)
 
(298 intermediate revisions not shown)
Line 1: Line 1:
-
{{INSA-Lyon/stylegroningen}}
 
-
 
<html>
<html>
<style type="text/css">
<style type="text/css">
 +
p {
 +
      line-height: 1.3em;
 +
      text-indent: 30px;
 +
      text-align:justify;
 +
      font-family:Verdana, "Trebuchet MS", Arial, police3, police4;
 +
}
 +
#corps2 li a {
 +
      font-weight: bold;
 +
}
 +
#corps3 li a {font-weight: bold;
 +
}
 +
#corps4 li a {font-weight: bold;
 +
}
 +
#corps li a {font-weight: bold;
 +
}
 +
#corps2 p a {
 +
      font-weight: bold;
 +
}
 +
#corps4 p a {font-weight: bold;
 +
}
 +
 +
#corps3 p a {font-weight: bold;
 +
}
 +
 +
#corps p a {font-weight: bold;
 +
}
 +
.colonnedroite p a {font-weight: bold;
 +
}
 +
 +
ol li {
 +
      line-height: 1.3em;
 +
      text-align:justify;
 +
      font-family:Verdana, "Trebuchet MS", Arial, police3, police4;
 +
}
 +
 +
exp{
 +
      vertical-align: super;
 +
      font-size: 70%;
 +
      line-height: 80%;
 +
}
 +
 +
h2 {
 +
      text-indent: 40px;
 +
      text-align: justify;
 +
      font-weight: bold;
 +
}
 +
h3 {
 +
      text-indent: 30px;
 +
      text-align: justify;
 +
}
 +
 +
 +
 +
/* -------------------------------------------------------------------------------------------- */
 +
/* --------------------- position des différentes "boîtes de textes" -------------------------- */
 +
/* -------------------------------------------------------------------------------------------- */
 +
 +
 +
.colonnegauche {
 +
        width: 130px;
 +
        height: 100%;
 +
        float: left;
 +
        margin-left: 5px;
 +
        margin-top: 60px;
 +
        padding-top: -1px;
 +
        padding-bottom:5px;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;     
 +
        border-radius: 10px;     
 +
      /* position: relative; */
 +
        background-color: white/* #1fe14d */ /* #e89024 */;
 +
}
 +
 +
 +
.colonnedroite {
 +
        width: 22.7%;
 +
        height: 100%;
 +
        float: right;
 +
        margin-top: 30px;
 +
        margin-right: 5px; 
 +
        padding: 8px;
 +
      /* position: relative; */
 +
        background-color: #d4e0e8; /* #b3e5b7 */
 +
        border: 1px solid #7caed4;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
}
 +
 +
 +
.colonnedroite2 {
 +
        width: 70%;
 +
        height: 100%;
 +
        margin-top: 5px;
 +
        margin-right: 10px; 
 +
        margin-left: 15px;
 +
        padding: 8px;
 +
      /* position: relative; */
 +
        background-color: #d4e0e8; /* #b3e5b7 */
 +
        border: 1px solid #7caed4;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
}
 +
 +
 +
.titredroite {
 +
border: 1px solid #7caed4;
 +
-moz-border-radius: 10px;
 +
-webkit-border-radius: 10px;
 +
-goog-ms-border-radius: 10px;
 +
border-radius: 10px;
 +
text-indent: 20px; background:white; color:#6e6e6e; border-bottom: 1px solid #6e6e6e; margin-bottom: -25px;
 +
width: 22.7%;
 +
height: 100%;
 +
float: right;
 +
margin-top: 30px;
 +
margin-right: 5px; 
 +
padding: 8px;
 +
/* position: relative; */
 +
}
 +
 +
.titredroite2 {
 +
border: 1px solid #7caed4;
 +
-moz-border-radius: 10px;
 +
-webkit-border-radius: 10px;
 +
-goog-ms-border-radius: 10px;
 +
border-radius: 10px;
 +
text-indent: 0px; background:white; color:#6e6e6e; border-bottom: 1px solid #6e6e6e; margin-bottom: -0px;
 +
text-align:center;
 +
width: 70%;
 +
height: 100%;
 +
margin-top: 5px;
 +
margin-right: 10px; 
 +
margin-left: 15px;
 +
padding: 8px;
 +
/* position: relative; */
 +
}
#corps {
#corps {
-
         width:97.5%;
+
         width: 56.8%;
-
         margin: 20px 0 60px 0;
+
         margin: 30px 10px 10px 10px;
-
         padding: 10px;
+
         padding: 8px;
-
         border: 3px solid #c8d4de;
+
 
 +
         border: 1px solid #6e6e6e; <!-- juste pour voir ou sa se place, sinon quand on aura les articles, on pourra les enlever -->
         background-color: white;
         background-color: white;
         -moz-border-radius: 10px;
         -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
         border-radius: 10px;
         border-radius: 10px;
-
         float: center;
+
         float: left;
}
}
 +
       
 +
#corps2 {
 +
        width: 82.3%;
 +
        margin: 30px 5px 10px 10px;
 +
        padding: 8px;
 +
        border: 1px solid #6e6e6e /* #6e6e6e */;  <!-- juste pour voir ou sa se place, sinon quand on aura les articles, on pourra les enlever -->
 +
        background-color: white;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
        float: left;
 +
}
 +
 +
 +
#corps3 {
 +
        width: 70%;
 +
        margin: 30px 5px 10px 5px;
 +
        padding: 8px;
 +
        border: 1px solid #6e6e6e;  <!-- juste pour voir ou sa se place, sinon quand on aura les articles, on pourra les enlever -->
 +
        background-color: white;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
        float: left;
 +
}
 +
 +
 +
#corps4 {
 +
        width: 97.1%;
 +
        margin: 20px 5px 10px 5px;
 +
        padding: 8px;
 +
        border: 1px solid #6e6e6e;  <!-- juste pour voir ou sa se place, sinon quand on aura les articles, on pourra les enlever -->
 +
        position: center;
 +
        background-color: white;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
        float: left;
 +
}
 +
 +
.boite1 {
 +
        width: 46.5%;
 +
        margin: 20px 5px 10px 10px;
 +
        padding: 8px;
 +
        border: 1px solid #6e6e6e;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
        float: left;
 +
}
 +
 +
.boite2 {
 +
        width: 46.5%;
 +
        margin: 20px 10px 10px 5px;
 +
        padding: 8px;
 +
        border: 1px solid #6e6e6e;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
        float: right;
 +
}
 +
 +
.boite3 {
 +
        width: 60%;
 +
        margin: 20px 2.5px 10px 5px;
 +
        padding: 8px;
 +
        border: 1px solid #6e6e6e;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
        float: left;
 +
}
 +
 +
.boite4 {
 +
        width: 35.8%;
 +
        margin: 20px 5px 10px 2.5px;
 +
        padding: 8px;
 +
        border: 1px solid #6e6e6e;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
        float: right;
 +
}
 +
 +
.boite5 {
 +
        width: 22.6%;
 +
        margin: 30px 10px 10px 0px;
 +
        padding: 8px;
 +
        border: 1px solid #6e6e6e;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
        float: right;
 +
}
 +
 +
.boite6 {
 +
        width: 30%;
 +
        margin: 20px 5px 10px 2.5px;
 +
        padding: 8px;
 +
        border: 0px solid #6e6e6e;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
}
 +
 +
.boite7 {
 +
        width: 30%;
 +
        margin: 20px 5px 10px 2.5px;
 +
        padding: 8px;
 +
        border: 0px solid #6e6e6e;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
}
 +
 +
.boite8 {
 +
        width: 30%;
 +
        margin: 20px 5px 10px 2.5px;
 +
        padding: 8px;
 +
        border: 0px solid #6e6e6e;
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
}
 +
 +
.support {
.support {
border:2px solid #95b3d7;
border:2px solid #95b3d7;
Line 25: Line 304:
padding: 10px;
padding: 10px;
-moz-border-radius : 10px;  
-moz-border-radius : 10px;  
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
}
}
div.ombre.noimg {
div.ombre.noimg {
-moz-border-radius: 10px;  
-moz-border-radius: 10px;  
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
display:block;
display:block;
}
}
Line 38: Line 323:
border-left:0;
border-left:0;
-moz-border-radius: 10px;
-moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
}
}
#coins-arrondis {
#coins-arrondis {
         -moz-border-radius: 10px;
         -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
         border-radius: 10px;
         border-radius: 10px;
}
}
Line 56: Line 346:
}
}
-
</style>
+
/* ----------------------------------------------------------------------------------------------- */
 +
/* ----------------------------- Code used in the sponsors page ---------------------------------- */
 +
/* ----------------------------------------------------------------------------------------------- */
-
<div id="corps">
 
-
</html>
 
-
==Title 1==
 
-
<html>
 
-
<p><br>lorem et cetera</p><p>corps de la page</p>
 
-
</div>
 
-
<div class="maincontent">
+
.sponsorsH1 {
-
<div class="ombre noimg"  id="coins-arrondis">
+
font-family: Verdana, Serif;
-
<div class="ombredeux">
+
padding-left: 30px;
-
<div class="support">
+
margin-top: 50px
 +
}
-
+
.sponsors {
-
<p>Un texte qui s'affiche dans une boite ombrée à gauche.</p>
+
    margin: 10px 8px 20px 8px;
-
</div>
+
    padding: 10px;
-
</div>
+
    border: 3px solid;
 +
    -moz-border-radius: 10px;
 +
    -webkit-border-radius: 10px;
 +
    -goog-ms-border-radius: 10px;
 +
    border-radius: 10px;
 +
}
 +
.sponsors img{
 +
float: left;
 +
padding: 5px;
 +
}
-
</div>
+
.sponsors p{
-
</div>
+
padding: 5px;
-
<div  class="othercontent">
+
text-align: justify;
-
<div class="ombre noimg" id="coins-arrondis">
+
}
-
<div class="ombredeux">
+
-
<div class="support">
+
-
+
/* End of the code used in the sponsors page */
-
<p>Un autre texte qui s'affiche dans une boite ombrée à droite.</p>
+
-
</div>
+
-
</div>
+
-
</div>
 
-
</div>
 
-
<br><br><br><br><br><br><br>  <!-- code stupide mais sinon les boîtes ombrées chevauchent la boîte en dessous -->
 
-
<div id="corps">
+
.support {
-
</html>
+
border:2px solid #95b3d7;
-
==Title 2==
+
background-color:#fff;
-
<html>
+
top:-3px;
-
<p><br>lorem et cetera</p><p>corps de la page</p>
+
left:-3x;
-
</div>
+
position:relative;
 +
z-index:1;
 +
padding: 10px;
 +
-moz-border-radius : 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
}
 +
div.ombre.noimg {
 +
-moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
display:block;
 +
}
 +
.ombredeux {
 +
border:0;
 +
background-color:#999;
 +
padding:0;
 +
padding-top:0;
 +
padding-right:3px;
 +
border-left:0;
 +
-moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
}
 +
#coins-arrondis {
 +
        -moz-border-radius: 10px;
 +
        -webkit-border-radius: 10px;
 +
        -goog-ms-border-radius: 10px;
 +
        border-radius: 10px;
 +
}
 +
.maincontent {
 +
        width: 600px;
 +
position: relative;
 +
        margin: 10px 10px 30px 0;
 +
        float: left;       
 +
}
 +
.othercontent {
 +
        width: 330px;
 +
position:relative;
 +
        float: right;
 +
        margin: 10px 0 30px 0;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* ----------------------------------------------------------------------------------------------- */
 +
/* ------------------------- Alignement hors template de Groningen ------------------------------- */
 +
/* ----------------------------------------------------------------------------------------------- */
 +
 
 +
</style>  
 +
 
 +
 
</html>
</html>

Latest revision as of 19:35, 24 April 2011

Retrieved from "http://2010.igem.org/Template:INSA-Lyon/maincontent"