Team:Grenoble-EMSE-LSU/Design/Content
From 2013.igem.org
(175 intermediate revisions not shown) | |||
Line 33: | Line 33: | ||
body div.back | body div.back | ||
{ | { | ||
- | width: | + | width: 100%; |
- | + | min-width: 800px; | |
- | + | padding: 0; | |
+ | margin: auto; | ||
+ | overflow: hidden; | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 0%; |
- | + | ||
/*border: 1px solid blue;*/ | /*border: 1px solid blue;*/ | ||
} | } | ||
Line 44: | Line 45: | ||
body div.back ul.texte | body div.back ul.texte | ||
{ | { | ||
- | width: | + | width: 70%; |
padding: 0; | padding: 0; | ||
margin: auto; | margin: auto; | ||
- | margin-top: | + | margin-top: 28%; |
+ | /*border: 1px solid red;*/ | ||
} | } | ||
+ | |||
+ | /***** CEA *****/ | ||
+ | body div.back ul.texte ul.cea | ||
+ | { | ||
+ | width: auto; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | margin-left: 300px; | ||
+ | } | ||
+ | |||
+ | body div.back ul.texte ul.list, body div.back ul.texte ol.list | ||
+ | { | ||
+ | width: auto; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | margin-left: 50px; | ||
+ | } | ||
+ | /********************/ | ||
/********************/ | /********************/ | ||
Line 56: | Line 76: | ||
body div.back ul.texte li | body div.back ul.texte li | ||
{ | { | ||
- | + | /*min-height: 200px;*/ | |
padding: 20px; | padding: 20px; | ||
+ | padding-top: 0px; | ||
margin: 0; | margin: 0; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
Line 66: | Line 87: | ||
background-color: white; | background-color: white; | ||
} | } | ||
+ | |||
+ | body div[id="team"] ul.texte li | ||
+ | { | ||
+ | min-height: 200px; | ||
+ | } | ||
+ | |||
+ | body div.back ul.texte li:last-child | ||
+ | { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | body div.back ul.texte li[id="next"] | ||
+ | { | ||
+ | height: auto; | ||
+ | min-height: 0; | ||
+ | text-align: center; | ||
+ | border: none; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | /***** CEA *****/ | ||
+ | body div.back ul.texte ul.cea li, body div.back ul.texte ul.list li | ||
+ | { | ||
+ | min-height: 0; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | list-style: disc; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | body div.back ul.texte ol.list li | ||
+ | { | ||
+ | min-height: 0; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | body div.back ul.texte ul.list ul li | ||
+ | { | ||
+ | list-style: circle; | ||
+ | } | ||
+ | /********************/ | ||
body div[id="home"] ul.texte li | body div[id="home"] ul.texte li | ||
Line 97: | Line 162: | ||
/********** Police **********/ | /********** Police **********/ | ||
- | + | p, h1, h2, h3, h4, h5, ul.cea li, ul.list li, ol.list li | |
{ | { | ||
padding: 0; | padding: 0; | ||
Line 105: | Line 170: | ||
/***** p et a *****/ | /***** p et a *****/ | ||
- | body div.back ul.texte li p | + | body div.back ul.texte li p strong, body div.back ul.texte li a, body div.back ul.texte li h4, body div.back ul.texte li h5 |
- | + | ||
- | + | ||
- | + | ||
- | body div.back ul.texte li | + | |
{ | { | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
- | body div.back ul.texte li p em | + | body div.back ul.texte li p em, body div.back ul.texte li h5 |
{ | { | ||
font-style: italic; | font-style: italic; | ||
+ | } | ||
+ | |||
+ | body div.back ul.texte li p sup | ||
+ | { | ||
+ | vertical-align: super; | ||
+ | font-size: 70%; | ||
+ | line-height: 80%; | ||
+ | } | ||
+ | |||
+ | body div.back ul.texte li p sub | ||
+ | { | ||
+ | vertical-align: sub; | ||
+ | font-size: 70%; | ||
+ | line-height: 80%; | ||
} | } | ||
body div.back ul.texte li p[id="legend"] | body div.back ul.texte li p[id="legend"] | ||
{ | { | ||
- | + | margin: auto; | |
+ | width: 75%; | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | body div.back ul.texte li p[id="big"] | ||
+ | { | ||
+ | font-size: 18px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | body div.back ul.texte li img | ||
+ | { | ||
+ | padding: 0; | ||
+ | margin: auto; | ||
+ | text-align: center; | ||
+ | /*border: 1px solid blue;*/ | ||
} | } | ||
Line 127: | Line 219: | ||
{ | { | ||
text-decoration: underline; | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | body div.back li[id="next"] a | ||
+ | { | ||
+ | font: normal 18px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif; | ||
+ | font-weight: bold; | ||
+ | text-align: center; | ||
} | } | ||
/********************/ | /********************/ | ||
/***** h1, h2 et h3 *****/ | /***** h1, h2 et h3 *****/ | ||
+ | body div.back ul.texte li h1, body div.back ul.texte li h2, body div.back ul.texte li h3 | ||
+ | { | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 15px; | ||
+ | font-size: 24px; | ||
+ | font-variant: small-caps; | ||
+ | } | ||
body div.back ul.texte li h1 | body div.back ul.texte li h1 | ||
{ | { | ||
- | |||
- | |||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
Line 143: | Line 247: | ||
font-variant: small-caps; | font-variant: small-caps; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
body div.back ul.texte li h3 | body div.back ul.texte li h3 | ||
{ | { | ||
- | + | font-size: 18px; | |
- | font-size: | + | |
} | } | ||
/********************/ | /********************/ | ||
Line 186: | Line 282: | ||
/********************/ | /********************/ | ||
+ | |||
+ | /********** Images miniatures **********/ | ||
+ | |||
+ | body div[id="home"] ul.texte li ul.miniature | ||
+ | { | ||
+ | width: 480px; | ||
+ | min-height: 0; | ||
+ | padding: 0; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | body div[id="home"] ul.texte li ul.miniature li | ||
+ | { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | border: none; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | body div[id="home"] ul.texte li ul.miniature li a img | ||
+ | { | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | } | ||
+ | |||
+ | body div[id="home"] ul.texte li ul.miniature | ||
+ | { | ||
+ | list-style: none; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | body div[id="home"] ul.texte li ul.miniature li | ||
+ | { | ||
+ | float: left; | ||
+ | margin: 0 20px 0 0; | ||
+ | } | ||
+ | |||
+ | body div[id="home"] ul.texte li ul.miniature li a | ||
+ | { | ||
+ | height: 150px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | body div[id="home"] ul.texte li ul.miniature li a span | ||
+ | { | ||
+ | font: normal 20px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif; | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
+ | top: 110px; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | body div[id="home"] ul.texte li ul.miniature li a:hover span | ||
+ | { | ||
+ | display: block; | ||
+ | } |
Latest revision as of 03:40, 5 October 2013
/********** Background **********/
body div[id="home"] { background: #fff0e6; }
body div[id="proj"] { background: #ffe6e6; }
body div[id="doc"] { background: #e6f5ff; }
body div[id="hp"] { background: #e6ffe6; }
body div[id="team"] { background: #f9e6ff; }
/********************/
/********** Section **********/
body div.back { width: 100%;
min-width: 800px; padding: 0; margin: auto; overflow: hidden; position: absolute; top: 0%;
/*border: 1px solid blue;*/ }
body div.back ul.texte {
width: 70%; padding: 0; margin: auto; margin-top: 28%;
/*border: 1px solid red;*/ }
/***** CEA *****/ body div.back ul.texte ul.cea {
width: auto; padding: 0; margin: 0; margin-left: 300px;
}
body div.back ul.texte ul.list, body div.back ul.texte ol.list {
width: auto; padding: 0; margin: 0; margin-left: 50px;
} /********************/
/********************/
/********** Cadres et bordures **********/
body div.back ul.texte li {
/*min-height: 200px;*/
padding: 20px;
padding-top: 0px;
margin: 0; margin-bottom: 10px; list-style: none; text-align: justify; border: solid 1px; border-radius: 5px; background-color: white; }
body div[id="team"] ul.texte li { min-height: 200px; }
body div.back ul.texte li:last-child { margin-bottom: 20px; }
body div.back ul.texte li[id="next"] { height: auto; min-height: 0; text-align: center; border: none; background-color: transparent; }
/***** CEA *****/ body div.back ul.texte ul.cea li, body div.back ul.texte ul.list li {
min-height: 0; padding: 0; margin: 0; list-style: disc; border: none;
}
body div.back ul.texte ol.list li {
min-height: 0; padding: 0; margin: 0; border: none;
}
body div.back ul.texte ul.list ul li
{
list-style: circle;
} /********************/
body div[id="home"] ul.texte li { border-color: #ff6600; }
body div[id="proj"] ul.texte li { border-color: #ff0000; }
body div[id="doc"] ul.texte li { border-color: #0099ff; }
body div[id="hp"] ul.texte li { border-color: #00cc00; }
body div[id="team"] ul.texte li { border-color: #9900cc; }
/********************/
/********** Police **********/
p, h1, h2, h3, h4, h5, ul.cea li, ul.list li, ol.list li { padding: 0; margin: 0; font: normal 14px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif; }
/***** p et a *****/ body div.back ul.texte li p strong, body div.back ul.texte li a, body div.back ul.texte li h4, body div.back ul.texte li h5 { font-weight: bold; }
body div.back ul.texte li p em, body div.back ul.texte li h5 { font-style: italic; }
body div.back ul.texte li p sup {
vertical-align: super; font-size: 70%; line-height: 80%;
}
body div.back ul.texte li p sub {
vertical-align: sub; font-size: 70%; line-height: 80%;
}
body div.back ul.texte li p[id="legend"] {
margin: auto; width: 75%; font-size: 12px; font-weight: bold;
}
body div.back ul.texte li p[id="big"] {
font-size: 18px; font-weight: bold;
}
body div.back ul.texte li img {
padding: 0; margin: auto; text-align: center;
/*border: 1px solid blue;*/ }
body div.back ul.texte li a:hover { text-decoration: underline; }
body div.back li[id="next"] a { font: normal 18px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
font-weight: bold; text-align: center;
} /********************/
/***** h1, h2 et h3 *****/ body div.back ul.texte li h1, body div.back ul.texte li h2, body div.back ul.texte li h3 {
margin-top: 20px;
margin-bottom: 15px; font-size: 24px; font-variant: small-caps; } body div.back ul.texte li h1 { text-transform: uppercase; }
body div.back ul.texte li[id="titre"] h1[id="talke"] { text-transform: none; font-variant: small-caps; }
body div.back ul.texte li h3 {
font-size: 18px;
} /********************/
/***** Couleurs *****/ body div[id="home"] ul.texte li h1, body div[id="home"] ul.texte li h2, body div[id="home"] ul.texte li h3, body div[id="home"] ul.texte li a { color: #ff6600; }
body div[id="proj"] ul.texte li h1, body div[id="proj"] ul.texte li h2, body div[id="proj"] ul.texte li h3, body div[id="proj"] ul.texte li a { color: #ff0000; }
body div[id="doc"] ul.texte li h1, body div[id="doc"] ul.texte li h2, body div[id="doc"] ul.texte li h3, body div[id="doc"] ul.texte li a { color: #0099ff; }
body div[id="hp"] ul.texte li h1, body div[id="hp"] ul.texte li h2, body div[id="hp"] ul.texte li h3, body div[id="hp"] ul.texte li a { color: #00cc00; }
body div[id="team"] ul.texte li h1, body div[id="team"] ul.texte li h2, body div[id="team"] ul.texte li h3, body div[id="team"] ul.texte li a { color: #9900cc; } /********************/
/********************/
/********** Images miniatures **********/
body div[id="home"] ul.texte li ul.miniature {
width: 480px; min-height: 0; padding: 0; margin: auto;
}
body div[id="home"] ul.texte li ul.miniature li {
padding: 0; margin: 0; border: none; background: transparent;
}
body div[id="home"] ul.texte li ul.miniature li a img {
width: 100px; height: 100px;
}
body div[id="home"] ul.texte li ul.miniature { list-style: none;
overflow: hidden; position: relative;
}
body div[id="home"] ul.texte li ul.miniature li
{
float: left;
margin: 0 20px 0 0;
}
body div[id="home"] ul.texte li ul.miniature li a
{ height: 150px;
display: block;
}
body div[id="home"] ul.texte li ul.miniature li a span
{
font: normal 20px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif; position: absolute;
left: 0px; top: 110px;
display: none; }
body div[id="home"] ul.texte li ul.miniature li a:hover span
{
display: block; }