1)Как сделать чтобы сайт располагался по центру даже при изменение масштаба(ctrl+колесиком мыши), у меня уходит в левую сторону.
2)Как сделать footer и header до конца экрана. а то при изменение масштаба только до середины
@charset "utf-8";
* {
margin: 0;
padding: 0;
outline: none;
}
html {height: 100%}
body {
width: 100%;
min-width: 1024px;
max-width: 1920px;
height: 100%;
background-color: #EFFFF4;
color: #333;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 1em;
line-height: 135%;
float: left;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* InternetExplor 8 */
}
a {
color: #000000;
text-decoration: none;
}
a, a:hover {
-webkit-transition: all.0s ease;
-moz-transition: all.0s ease;
-o-transition: all.0s ease;
-ms-transition: all.0s ease;
transition: all.0s ease;
}
.clear {
clear: both;
}
/* Стили для шапки */
header {
width: 98%;
float: left;
padding: 1%;
background-color: #BFE7E9;
border-bottom: 2px solid #BFE7E9;
margin-bottom: 20px;
}
header #logo {
width: 30%;
float: left;
}
header #logo a{
color: #939393;
font-size: 2em;
font-family: Times New Roman, sans-serif;
}
header #logo span {
color: #e36565;
}
header #menuHead {
width: 34%;
float: left;
}
header #menuHead div {
float: left;
padding: 5px;
background-color: #c8c8c8;
border-radius: 5px;
color: #ffffff;
}
header #menuHead div:hover {
background-color: #e7e7e7;
}
header #regAuth {
text-align: right;
font-size: 1.2em;
}
header #link_logout {
float: right;
padding: 5px;
background-color: #c8c8c8;
border-radius: 5px;
}
header #link_logout a {
color: #ffffff;
}
/* Стили для всего документа*/
#wrapper {
width: 80%;
margin-left: 10%;
float: left;
}
#wrapper #bigArticle{
width: 78%;
margin-left: 10%;
background-color: #f6f6f6;
padding: 1%;
float: left;
}
#wrapper #bigArticle img, #wrapper .article img {
width: 100%;
float: left;
margin-bottom: 10px;
}
#wrapper #bigArticle h2, #wrapper .article h2 {
font-weight: normal;
font-size: 1.4em;
color: #636363;
font-family: Comic Sans MS, sans-serif;
}
#wrapper #bigArticle p, #wrapper .article p {
width: 90%;
margin-left: 5%;
}
#wrapper #bigArticle div.more, #wrapper .article div.more {
padding: 5px;
border-radius: 5px;
background-color: #878787;
color: #fff;
width: 10%;
text-align: center;
margin-top: 10px;
}
#wrapper #bigArticle div.more:hover, #wrapper .articlediv.more:hovers {
background-color: #a2a2a2;
}
#wrapper .article {
width: 40%;
margin-left: 5%;
background-color: #f6f6f6;
padding: 1%;
float: left;
}
#wrapper .article div.more {
width: 20%;
}
/* Техподдержка */
#wrapper input {
width: 25%;
margin-left: 37%;
float: left;
border-radius: 5px;
border: 1px solid silver;
padding: 5px;
color: black;
margin-bottom: 10px;
font-size: 1.2em;
}
#wrapper input:focus {
border: 2px solid black;
}
#wrapper input#done:hover {
border: 2px solid #000000;
cursor: pointer;
}
#wrapper textarea {
width: 50%;
height: 150px;
margin-left: 25%;
float: left;
border-radius: 5px;
border: 2px solid silver;
padding: 5px;
color: black;
margin-bottom: 10px;
font-size: 1.2em;
resize: none;
}
#wrapper #messageShow {
font-size: 1.2em;
float: left;
color: red;
width: 100%;
text-align: center;
}
/* Регистрация */
#regy input {
width: 76%;
margin-left: 12%;
float: left;
border-radius: 20px;
border: 1px solid silver;
padding: 6px;
color: black;
margin-bottom: 10px;
font-size: 1.2em;
}
#regy input:focus {
border: 2px solid black;
}
#pacl input {
width: 80.3%;
margin-left: 12%;
float: left;
border-radius: 20px;
border: 1px solid silver;
padding: 6px;
color: black;
margin-bottom: 10px;
font-size: 1.1em;
background-color: yellowgreen;
}
#wrapper #pacl {
font-size: 1.2em;
float: left;
color: red;
width: 100%;
text-align: center;
}
#pacl input {
cursor: pointer;
}
h1 {
margin-bottom: 40px;
margin-top: 15%;
}
#regy {
border: 2px solid #00B870;
padding-bottom: 21%;
margin-left: 35%;
margin-right: 33.3%;
margin-top: 60px;
}
#authorized h2 {
text-align: center;
}
#svalid_email_message {
color: red;
position: absolute;
bottom: 45px;
left: 500px;
border: 1px solid transparent;
margin-left: 13px;
padding: 10px;
width: 319px;
height: 65px;
text-align: center;
}
#svalid_password_message {
color: red;
position: absolute;
bottom: 60px;
left: 500px;
border: 1px solid transparent;
margin-left: 13px;
padding: 10px;
width: 319px;
height: 65px;
text-align: center;
}
p.mesage_error {
color: red;
position: absolute;
bottom: 96px;
left: 500px;
border: 1px solid transparent;
margin-left: 13px;
padding: 10px;
width: 319px;
height: 65px;
text-align: center;
}
/* Авторизация */
#log input {
width: 76%;
margin-left: 12%;
float: left;
border-radius: 20px;
border: 1px solid silver;
padding: 6px;
color: black;
margin-bottom: 10px;
font-size: 1.2em;
}
#log input:focus {
border: 2px solid black;
}
#recl input {
width: 80%;
margin-left: 12%;
float: left;
border-radius: 20px;
border: 1px solid silver;
padding: 6px;
color: black;
margin-bottom: 10px;
font-size: 1.2em;
background-color: yellowgreen;
}
#recl input {
cursor: pointer;
}
#leg h1 {
margin-bottom: 40px;
margin-top: 15%;
font-size: 32px;
}
#log {
border: 2px solid #00B870;
padding-bottom: 15%;
margin-left: 35%;
margin-right: 33.3%;
margin-top: 60px;
}
p.amesage_error {
color: red;
position: absolute;
bottom: 195px;
left: 500px;
border: 1px solid transparent;
margin-left: 13px;
padding: 10px 10px 10px 10px;
width: 319px;
height: 50px;
text-align: center;
}
#lvalid_email_message {
color: red;
position: absolute;
bottom: 195px;
left: 501px;
border: 1px solid transparent;
margin-left: 13px;
padding: 10px 10px 10px 10px;
width: 319px;
height: 50px;
text-align: center;
}
#lvalid_password_message {
color: red;
position: absolute;
bottom: 195px;
left: 501px;
border: 1px solid transparent;
margin-left: 13px;
padding: 10px 10px 10px 10px;
width: 319px;
height: 50px;
text-align: center;
}
/* Стили для личной странице */
#wrapper #personal_page {
width: 76%;
margin-left: 10%;
border: 2px solid silver;
background-color: #f4f4f4;
padding: 2%;
}
#wrapper .banner {
width: 100%;
float: left;
margin-bottom: 20px;
}
/* Стили для Footer */
footer {
width: 98%;
float: left;
padding: 1%;
background-color: #FF0004;
border-top: 1px solid #BFE7E9;
margin-top: 10px;
}
footer #social {
float: left;
width: 50%;
}
footer #social img {
width: 36px;
height: 36px;
float: left;
margin-right: 3px;
}
footer #Vk img {
width: 32px;
height: 32px;
float: left;
margin-right: 3px;
}
footer #rights {
float: right;
width: 50%;
text-align: right;
font-size: 1.1em;
}
#page-wrap:after {
content: "";
display: block;
}
footer, #page-wrap:after {height: 10px}
#page-wrap {
min-height: 100%;
margin-bottom: -10px;
}