CSS: Плохая серая линия сбоку от панели навигации на моем веб-сайте
Я поддерживаю сайт Perl для начинающих и использую модифицированный шаблон из Open Source Web Designs. Теперь проблема в том, что у меня все еще есть нежелательный артефакт: серая линия в левой части основного кадра, слева от меню навигации. Вот изображение, выделяющий нежелательный эффект.
Как я могу исправить CSS, чтобы решить эту проблему?
@Onorio - getfirebug.com
@yoavf - Спасибо! :-) Я не знал, что смогу сделать это с помощью Firebug. Еще одна хорошая вещь, которую я узнал от SO.
Ответы 7
Это background-image на корпусе. Быстрое исправление (отредактируйте style.css или добавьте в другое место):
#page-container
{
background-color: white;
}
Будет ли это работать, если изображение прикреплено к стилю BODY?
Да, поскольку # page-container DIV содержится в BODY. Если я правильно понимаю намерения автора, намерение заключалось в том, чтобы изображение «просачивалось» по краям контейнера DIV, создавая тени и тому подобное. Однако для работы нужен непрозрачный контейнер.
Это изображение. (см. здесь: http://perl-begin.org/images/background.gif) Он установлен в классе BODY вашей таблицы стилей.
Думаю дело в следующем:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
Однако я не понимаю, почему не отображается правая граница ....
Серая линия должна быть там. Причина, по которой это выглядит странно, заключается в том, что самый верх скрыт элементом буфера. Удалите правило background-color из этого набора правил:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
Я серьезно сомневаюсь, что это было намеренно. Посмотрите на правый край - он дает красивый эффект тени, как если бы содержимое страницы было табличкой на белом столе. Обратите внимание, что нижний колонтитул также обрезает это изображение.
Я бы быстро исправил это, чтобы добавить стиль:
border-left:2px solid #BDBDBD;
в класс .buffer
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Я нашел проблему.
Проблема в том, что вам нужно установить белый фон на # page-container. В настоящее время у него прозрачный фон, поэтому левое поле в 5 пунктов на панели навигации-сайдбаннера показывает bg page_container ... так что измените этот bg, и все будет в порядке.
Спасибо всем, кто ответил. Проблема действительно заключалась в прозрачности # page-container и фонового изображения тела. Я исправил их оба в таблице стилей.
Вы можете разместить файл style.css или указатель на него. Думаю, будет крайне сложно ответить на этот вопрос, не увидев своего css.