Template:Lyon-INSA/2012style
From 2012.igem.org
(Difference between revisions)
(Created page with "<html> <style type="text/css"> /* - - - - - - - - - - - Source : http://casualconnect.net/iGEM/overall.css - - - - - - - - - - - */ - →BEGIN CSS RESET v1.0 | 20080212: html...") |
|||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
+ | p { | ||
+ | line-height: 2em; | ||
+ | text-indent: 20px; | ||
+ | text-align:justify; | ||
+ | font-family:Verdana, "Trebuchet MS", Arial, police3, police4,serif; | ||
+ | } | ||
- | /* | + | |
- | + | ||
- | + | /* -------------------------------------------------------------------------------------------- */ | |
- | + | /* --------------------- position des différentes "boîtes de textes" -------------------------- */ | |
- | + | /* -------------------------------------------------------------------------------------------- */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | #corps p a {font-weight: bold; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .colonnedroite p a {font-weight: bold; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | { | |
- | + | text-indent: 30px; | |
- | + | text-align: justify; | |
- | + | color : #0101DF; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | /* | + | #contenu { |
- | : | + | padding: 10px; |
- | + | /* border: 3px solid;*/ | |
+ | text-indent: 40px; | ||
+ | text-align: justify; | ||
+ | background-color:#666666; | ||
+ | |||
} | } | ||
- | + | h2 { | |
- | + | text-indent: 40px; | |
- | text- | + | text-align: justify; |
+ | font-weight: bold; | ||
} | } | ||
- | + | h3 { | |
- | text- | + | text-indent: 30px; |
+ | text-align: justify; | ||
} | } | ||
- | /* | + | |
- | + | h5 { | |
- | + | /* color : #0101DF; */ | |
- | + | color : #006600; | |
+ | font-size: medium; | ||
+ | text-align: center; | ||
+ | font-size: 2.5em; | ||
} | } | ||
- | |||
- | + | h6 { | |
- | + | color : #006600; | |
- | + | font-size: medium; | |
- | + | text-align: center; | |
- | + | font-size: 1.5em; | |
- | + | ||
- | + | ||
- | + | ||
- | . | + | |
- | + | ||
- | + | ||
} | } | ||
- | + | /* -------------------------------------------------------------------------------------------- */ | |
- | + | /* --------------------- position des différentes "boîtes de textes" -------------------------- */ | |
- | + | /* -------------------------------------------------------------------------------------------- */ | |
+ | |||
+ | |||
+ | #language{ | ||
+ | text-align : right; | ||
+ | margin-right : 20 px; | ||
} | } | ||
- | + | ||
- | + | #bandeau { | |
- | + | /* text-indent: 100px;*/ | |
- | + | width:100%; | |
- | + | height:50px; | |
- | + | background-color:transparent; #00CCFF; | |
- | + | /*text-align:center; */ | |
- | + | } | |
- | + | ||
- | + | #menu { | |
- | + | ||
- | + | float:left; | |
- | + | width:180px; | |
- | + | background-color:transparent; /*#00CCFF;*/ | |
- | width: | + | margin-right: 10px; |
- | height: | + | min-height: 100%; |
- | + | margin-left : 15px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | text-align: center; | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | float: left; | + | |
- | + | ||
- | + | ||
- | + | ||
- | margin: | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | #menu ul { | ||
+ | padding: 0; | ||
+ | width: 170px; | ||
+ | border:0px solid; | ||
+ | margin:0px; | ||
+ | margin-top:80px; | ||
+ | } | ||
+ | #menu ul li { | ||
+ | background: #333333 ; | ||
+ | color:#008000 ; | ||
+ | position:relative; | ||
+ | list-style: none; /*on enleve les icones de liste*/ | ||
+ | height : auto; | ||
+ | margin-bottom: 25px; | ||
+ | padding : 10px; | ||
+ | /*border: 10px solid; */ | ||
+ | border-color : #333333 ; | ||
+ | -moz-border-radius: 10px; | ||
+ | -webkit-border-radius: 10px; | ||
+ | -goog-ms-border-radius: 10px; | ||
+ | border-radius:10px; | ||
+ | } | ||
- | |||
- | # | + | #menu li a, #menu li .selflink { |
- | + | text-decoration: none ; | |
- | + | color : white; | |
+ | position : relative; | ||
+ | padding : 10px 15 px; | ||
+ | font-family : Times; | ||
+ | font-weight :bold; | ||
+ | font-size : large; | ||
+ | margin-left : 15px; | ||
+ | } | ||
+ | #menu li.actif a, #menu li.actif .selflink { | ||
+ | text-decoration: underline; | ||
} | } | ||
- | # | + | #menu li.sousmenu { |
- | background-color: | + | background: #008000 ; |
- | border: | + | } |
+ | |||
+ | |||
+ | #menu li:hover { | ||
+ | background:#228B22; | ||
+ | border-color:#228B22; | ||
+ | } | ||
+ | |||
+ | #menu ul li.actif { | ||
+ | |||
+ | height: auto; | ||
+ | /*border: 15px solid #555;*/ | ||
+ | border-color :#666666; | ||
+ | font-family : Times; | ||
+ | font-weight: bold; | ||
+ | font-size : large; | ||
+ | color: white; | ||
+ | background:#666666; | ||
+ | |||
} | } | ||
- | # | + | |
+ | |||
+ | |||
+ | #menudroite { | ||
+ | float:right; | ||
+ | width:210px; | ||
+ | |||
+ | background-color:#00CCFF; | ||
+ | margin-right: 10px; | ||
+ | min-height: 100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | body { | ||
+ | height: 100%; | ||
+ | background-color: #CCFFCC; | ||
+ | -moz-border-radius: 10px; | ||
+ | -webkit-border-radius: 10px; | ||
+ | -goog-ms-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .contenu { | ||
position : relative; | position : relative; | ||
- | + | top : -50px; | |
- | + | margin-left: 10px; | |
- | + | margin-right : 5px; | |
- | + | float:left; | |
- | + | width:100%; | |
- | + | position: relative; | |
- | - | + | min-height: 100%; |
- | - | + | background-color: transparent; /*#FFCC00;*/ |
- | - | + | font-family:Verdana, "Trebuchet MS", Arial, police3, police4,serif; |
- | + | } | |
- | } | + | |
- | + | .contenugrand { | |
- | { | + | float:left; |
- | + | width:95%; | |
- | + | margin-right : 10px; | |
- | + | position: relative; | |
- | + | min-height: 100%; | |
- | margin- | + | background-color:transparent; /* #FFCC00;*/ |
- | + | font-family:Verdana, "Trebuchet MS", Arial, police3, police4,serif; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | background-color: transparent; | + | |
- | + | ||
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
+ | .contenugrand2 { | ||
+ | float:left; | ||
+ | width:75%; | ||
+ | margin-right : 5px; | ||
+ | margin-left : 10px; | ||
+ | position: relative; | ||
+ | min-height: 100%; | ||
+ | background-color:transparent; /* #FFCC00;*/ | ||
+ | font-family:Verdana, "Trebuchet MS", Arial, police3, police4,serif; | ||
+ | } | ||
- | + | .contenusupergrand { | |
- | + | float:left; | |
- | } | + | width:100%; |
+ | position: relative; | ||
+ | min-height: 100%; | ||
+ | background-color:transparent; /*#FFCC00;*/ | ||
+ | font-family:Verdana, "Trebuchet MS", Arial, police3, police4,serif; | ||
+ | } | ||
- | + | .titredroite{ | |
- | + | text-align:center; | |
- | + | background-color:#FFCC00; | |
- | -moz-border-radius: | + | border: 1px solid #7caed4; |
- | -webkit-border-radius: | + | -moz-border-radius: 10px; |
- | -goog-ms-border-radius: | + | -webkit-border-radius: 10px; |
- | border-radius: | + | -goog-ms-border-radius: 10px; |
- | + | border-radius: 10px; | |
- | background | + | text-indent: 20px; background:white; color:#6e6e6e; border-bottom: 1px solid #6e6e6e; margin-bottom: -25px; |
- | + | width: 210px; | |
- | + | height: 100%; | |
- | + | /* float: left; */ | |
- | + | /* margin-top: 30px; */ | |
- | + | /* margin-right: 5px; */ | |
- | + | /*padding: 8px;*/ | |
- | float: left; | + | position: relative; |
- | margin-top: | + | |
- | margin- | + | |
- | + | ||
- | + | ||
} | } | ||
- | + | .cadre{ | |
- | margin-left: | + | text-align:center; |
- | + | width :600px; | |
- | width: | + | height:float; |
- | + | margin-top : 20px; | |
- | margin- | + | border: 4px solid green; |
+ | -moz-border-radius: 10px; | ||
+ | -webkit-border-radius: 10px; | ||
+ | -goog-ms-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px; | ||
+ | -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px; | ||
+ | -goog-ms-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px; | ||
+ | box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px; | ||
+ | } | ||
+ | |||
+ | /****** pour page plan du site *****/ | ||
+ | |||
+ | #colonne11{ | ||
+ | float: left; | ||
+ | margin-left : 20px; | ||
+ | width: 30%; | ||
+ | } | ||
+ | #colonne21 { | ||
+ | float: right; | ||
+ | width: 35%; | ||
+ | } | ||
+ | #centre1 { | ||
+ | margin-left: 34%; | ||
+ | margin-right: 30%; | ||
} | } | ||
- | |||
+ | /* ----------------------------------------------------------------------------------------------- */ | ||
+ | /* ----------------------------- Code used in the sponsors page ---------------------------------- */ | ||
+ | /* ----------------------------------------------------------------------------------------------- */ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .important{ | |
- | + | color:maroon; | |
} | } | ||
- | . | + | .sponsorsH1 { |
- | margin-top: | + | font-family: Verdana, Serif; |
+ | padding-left: 30px; | ||
+ | margin-top: 50px | ||
} | } | ||
- | + | .sponsors { | |
- | + | margin: 10px 8px 20px 8px; | |
- | + | padding: 10px; | |
+ | 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; | |
} | } | ||
- | + | .sponsors p{ | |
- | + | padding: 5px; | |
- | + | text-align: justify; | |
} | } | ||
- | + | /* End of the code used in the sponsors page */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | + | .support { | |
- | + | border:2px solid #95b3d7; | |
- | + | background-color:#fff; | |
+ | top:-3px; | ||
+ | left:-3x; | ||
+ | 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- | + | padding-top:0; |
- | + | padding-right:3px; | |
- | border- | + | border-left:0; |
- | -moz- | + | -moz-border-radius: 10px; |
- | -webkit- | + | -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 { | ||
+ | position : relative; | ||
+ | top : -50px; | ||
+ | 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 ------------------------------- */ | |
- | + | /* ----------------------------------------------------------------------------------------------- */ | |
- | + | ||
+ | |||
+ | |||
+ | .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; | ||
} | } | ||
- | + | ||
- | margin- | + | |
- | margin- | + | .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; | ||
} | } | ||
- | + | ||
- | + | ||
- | width: | + | |
+ | |||
+ | .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 { | |
+ | width: 120px; | ||
+ | margin: 30px 10px 10px 10px; | ||
+ | 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; | ||
} | } | ||
- | # | + | |
- | width: | + | #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; | ||
} | } | ||
- | # | + | |
- | margin- | + | |
+ | #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; | ||
} | } | ||
- | # | + | |
- | + | ||
- | color: | + | #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: 3px 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 50px; | ||
+ | padding: 8px; | ||
+ | background-color : blue; | ||
+ | border: 3px solid black; | ||
+ | -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 { | ||
+ | border:2px solid #95b3d7; | ||
+ | background-color:#fff; | ||
+ | top:-3px; | ||
+ | left:-3x; | ||
+ | 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; | ||
+ | } | ||
+ | </style> | ||
</html> | </html> |
Revision as of 12:29, 5 May 2012