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;
    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;
}
3
  • было бы круто, если бы показали стили, которые у вас отвечают за footer и header, а также body или враппер сайта, от там и можна смотреть почему у вас убегает
    – Oleksandr
    27 сен 2017 в 12:57
  • пару минут, сейчас кину
    – AKNYT
    27 сен 2017 в 12:58
  • @Oleksandr готово
    – AKNYT
    27 сен 2017 в 13:00

1 ответ 1

0

1) нужно задать ширину для контейнера всего сайта и прописать margin: 0 auto; 2) насчет футера: На сайтах обычно делают так, чтобы боди был разделен на два огромных блока: мейн-контент и футер.

К мейн контенту в стилях пишут: flex: 1 0 auto;

к футеру: flex: 0 0 auto;

и к их обертке (боди):

display: flex;
flex-direction: column;
height: 100vh;

и все волшебным образом встает на свои места (не забывай для IE добавить префиксы: -ms-flex: 1 0 auto; рекомендую этот сервис на первое время https://autoprefixer.github.io/ru/)

а хедер достаточно просто вставить в мейн контент на самую высокую позицию, чтоб он был сверху

1
  • Увидел ваш код, ужас, я бы на вашем месте все удалил и заново переверстал. Совет: выучите Flexbox и забудьте про флоаты в 2017
    – Agni Kai
    27 сен 2017 в 13:03

Ваш ответ

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

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