Блог

Главная - Вопросы по программированию - Я не могу понять, как избавиться от пробелов

Я не могу понять, как избавиться от пробелов

#html #css

#HTML #css — код

Вопрос:

Я работаю над сайтом и не могу понять, почему там появляются пробелы. У меня есть div-оболочка страницы и все остальное, установленное на ширину: 100%; Мой верхний и нижний колонтитулы и использование всей ширины экрана, но мой другой контент не использует всю ширину страницы. Я думаю, это как-то связано с позиционированием.

Кроме того, мой jsfiddle портит мой заголовок. Для этого я использую PHP, и он отлично работает на моей машине. Пожалуйста, игнорируйте это.

Скрипка: http://jsfiddle.net/WH5jZ /

 .pageWrapper {
    width: 100%;
    height: 700px;
    margin: 0 auto;
}


#mainPage {
    width: 100%;
    background-image: url('http://i34.photobucket.com/albums/d101/Lee45276/food1_zps6cb55c3d.jpg');
    background-repeat: no-repeat;
    background-size: cover;
     margin: 0 auto;
}

РЕДАКТИРОВАТЬ: я понял это, но не могу опубликовать ответ:

Я все понял. Мне пришлось удалить отступы в навигации и нижнем колонтитуле.

Старый

 nav, footer {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
     padding: 1% 2.5%;
}

новое

 nav, footer {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
}

Ответ №1:

Если вы имеете в виду основное содержимое

ОРИГИНАЛ

 /***************
CONTENT
***************/

.contentDiv, #bulkdel {
    width: 95%;
    height: 400px;
    padding: 10px;
    margin: 5% auto 0;
    background-color: rgba(0, 0, 0, .8);
    text-align: center;
}

Ваша ширина установлена на 95% вот почему она не используется 100%

Измените его на

 /***************
CONTENT
***************/

.contentDiv, #bulkdel {
    width: 100%;
    height: 400px;
    padding: 10px;
    margin: 5% auto 0;
    background-color: rgba(0, 0, 0, .8);
    text-align: center;
}

Кроме этого, я думаю, что все остальное выглядит нормально на вашей странице

Комментарии:

1. #bulkdel сейчас не используется. И .contentDiv — это черный div в середине — это не влияет на фоновое изображение (тарелка с тако).

Ответ №2:

Похоже, что вы добавили дополнение к нижнему колонтитулу, которое выталкивает его за пределы остального содержимого. Я уверен, что удаление отступов решит вашу проблему.

РЕДАКТИРОВАТЬ: я вижу, вы обновили свой вопрос ответом.

Другими словами, измените это:

 nav, footer {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    padding: 1% 2.5%; /* remove this */
}

к этому:

 nav, footer {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
}
Метки: