1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222
|
/* for authentification */
#form-area1 {
/*max-width: 600px;*/
width: 100%;
height:260px; /* for the height of the picture of the authentification's form (html2-milieu.php) (3 lines below) */
width:440px;
padding: 30px;
margin: 20px auto;
background: url(../images/Login-Page_gimp_extended.gif) no-repeat;
/*background-repeat: */
background: url(http://www.quebecwoodexport.com/images/stories/slideshow/resineux/cedre/_ccedre.jpg) no-repeat;
font-family: Arial, sans-serif;
color: #6f5430;/*marron*/
border-radius:10px;
box-shadow:5px 10px 10px #999;
box-sizing : border-box;
}
#form-area1 h2 {
font-size: 160%;
font-weight: bold;
text-shadow: 2px 2px 0px #decfbb;/*beige clair*/
}
#form-area1 h2 i.fa {
font-size: 140%;
}
#form-area1 label {
position: relative;
display: inline-block;
width: 30%;
font-weight: bold;
text-shadow: 2px 2px 0px #decfbb;/*beige clair*/
padding-left: 20px;
}
#form-area1 label:before {
position: absolute;
display: block;
content: '';
top: 50%;
margin-top: -6px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #6f5430;/*marron*/
}
#form-area1 input {
display: inline-block;
border-radius: 50px;
background: transparent;
}
#form-area1 input:not([type=submit]) {
/*width: 60%;*/
padding: 6px 20px;
border: 1px inset #decfbb;/*beige clair*/
box-shadow: 0 10px 10px #6f5430 inset;/*marron*/
}
.width_form {
/* min-width:1px!important;*/
height: 14px;
width: 50px;
font-size: 3.5em;
padding: 0;
box-sizing: border-box;
}
.margin_top_form2 {
margin-top :30px;
}
.margin_top_form1 {
margin-top :60px;
}
input {
height:50px;
width:50px;
}
* {
margin:0;
padding:0;
border:0; }
html, body {
font-family:Arial,sans-serif;
font-size:100%; }
#navMain li {
position:relative; /* nécessaire pour positionner les sous-menus et les flèches ! */
width:500px;
}
#navMain a {
display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
padding:10px;
font-family:Arial, sans-serif;
color: #fff;
background: #2980b9;
text-decoration: none; /* ne pas souligner les liens */
}
#navMain a:hover {
background: #20638f; /*change la couleur de fond*/
}
/* MENU */
#navMain ul {
height:120px;
}
#navMain ul,
#navMain li {
list-style: none;
top:100%; left:0; /* sous le niveau 1 */
}
#navMain ul ul,#navMain ul ul ul {/* menus de niveau 2*/
position:relative;
width:100%;
display:none;
}
#navMain ul ul a {
background:#333;
}
#navMain ul ul ul a {
background:#444;
}
#navMain ul li:hover > ul {
display:block;/*on affiche menu niveau 2 au survol */
}
/* flèche */
#navMain li.hasSub:after {
position:absolute;
content:"\25BC";
color:#fff;
top: 10px;
right: 10px;
}
#navMain li:hover.hasSub:after {
color:yellow;
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*---------------- */
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 100% */
@media screen and (min-width: 641px)
{
#navMain > ul {/* slt niveau 1 */
display:table; /* se comporte comme une table */
width:100%; /* largeur du menu */
margin:0 auto;/* centrage. Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.*/
min-width:640px;
}
#navMain > ul > li {
display:table-cell; /* se comporte comme une cellule de table */
width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
}
#navMain ul li {/* on positionne le parent des niveau 2 pour que le position de l'enfant soit pris en compte */
position:relative;
}
/* niveau 2 (et suivants) */
#navMain ul ul {
position: absolute;/* positionné en absolu (SORT DU FLUX) */
width: 100%;
top:100%; /* positionné en absolu SOUS le niveau 1 */
left:0;
}
/* niveau 3 (et suivants) */
#navMain ul ul ul {
position: absolute;/* positionné en absolu (SORT DU FLUX) */
top:0;
left:100%; /* A DROITE du niveau 2 */
}
#navMain li li.hasSub:after {
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#navMain li li:hover.hasSub:after {
color:yellow;
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
} |
Partager