0

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;
    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: #005CFF;
    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;
}
4
  • Глубоко в стили не вчитывался, но чтобы,к примеру, отцентровать body , попробуйте display:block, margin:0 auto, при этом убрав float: left;
    – zkolya
    27 сен 2017 в 17:49
  • @zkolya помогло спасибо, а можете еще помоч. У меня footer и header при уменьшении масштаба браузера идут не до конца. Подскажите как сделать чтобы было до конца
    – AKNYT
    27 сен 2017 в 17:55
  • 1
    @AKNYT вы что колесиком тестите адаптацию под размеры?
    – Bookin
    27 сен 2017 в 19:32
  • Что значит идут не до конца? Остается отступ сверху у хедера и снизу у футера что ли? Плюс сразу замечание по коду, не вижу у Вас ни одной распорки на странице, а блоки из потока выбиваете floatами... 28 сен 2017 в 3:34

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.