тело выталкивается вниз

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я работал над этим сайтом, http://hidden.xx Проблема в том, что <body> он сдвинут примерно на 20 пикселей вниз от верха. И это вызывает проблемы в нижней части страницы, где вы можете видеть, что градиент фона повторяется последние 20 пикселей. Если вы попытаетесь удалить firebug или любую другую панель, область, в которой происходит повторение, становится больше.

Я пытался решить эту проблему, но firebug не дает мне никаких указаний на то, что вызывает такое поведение. Я пытаюсь полностью расположить тело вверху, и это вроде как решает проблему, но повторяющаяся область появляется снова, если вы открываете панель снизу браузера, например firebug и т. Д.

редактировать: было две проблемы, первая проблема была проблемой краха полей и была решена благодаря @zzzzBov. И вторая проблема была решена путем добавления background-repeat:repeat-x; в тело, благодаря @Alex

Ответ №1:

Крах полей снова наносит удар!

_{поле на #wrapper уменьшается body . Вы могли бы изменить его на padding: 20px 0 и margin: 0 auto;}

1. Тай, это помогло мне. Но проблема по-прежнему в том, что когда я вывожу панель firebug снизу, появляется повторяющийся цвет.

2. у вас возникнут проблемы с повторяющимся цветом, если по какой-либо причине появится полоса прокрутки.

Ответ №2:

Попробуйте так:

body{ background: -moz-linear-gradient(#377AA8, #589CCB) repeat-x scroll 0 0 #579BCA; }

Повторите фон только до «X» (по горизонтали) и измените цвет фона на самый светлый цвет градиента.

Ответ №3:

Не видя вашей таблицы стилей, я бы посоветовал попытаться очистить оба padding и margin в вашем body теге (установите для них значение 0). Если это не удастся, я бы посоветовал очистить оба на панели навигации.

Ответ №4:

Измените цвет фона в строке 3 на #589CCB :

 html {   background-color: #589CCB;}

/* line 20, ../sass/screen.scss */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: #589CCB; /*OLD: background: #377aa8;*/
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #377aa8), color-stop(100%, #589ccb));
    background-image: -webkit-linear-gradient(#377aa8, #589ccb);
    background-image: -moz-linear-gradient(#377aa8, #589ccb);
    background-image: -o-linear-gradient(#377aa8, #589ccb);
    background-image: -ms-linear-gradient(#377aa8, #589ccb);
    background-image: linear-gradient(#377aa8, #589ccb);
    }