Как вы измените цвет этой информационной панели, не меняя цвет div?

Question

На этой странице вы увидите сообщение в блоге с миниатюрой, набором тегов и другой информацией в боковой панели слева: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.

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

Сначала я попытался просто создать двухцветное изображение шириной в один пиксель и использовать repeat-y, чтобы расширить макет «искусственного двух столбца» сверху вниз.Тем не менее, этот div динамически изменяет размер, поэтому во многих случаях черный текст из поста попадает на эту боковую панель.

Затем я попытался использовать то же изображение таким же образом, но присвоил белому div черту «position: absolute».Это привело к тому, что боковые панели справа перетекли в контент поста.

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

Я унаследовал много CSS, которые я не уверен, как изменить.Любой совет будет принята с благодарностью.`

Я добавлю сюда файл style.CSS, если найду способ сделать это.Это мой первый раз на сайте.

Answer 1

Глядя на CSS, он говорит, что все, что вы сказали, находится в его собственном div:

<div class="info-panel">

При этом вы просто вносите свои CSS-изменения в этот класс.Вы бы сделали что-то вроде:

.info-panel {
    background-color: #000;
}

Но имейте в виду, что для того, чтобы он выглядел хорошо, вы должны поиграть с отступами и полями для классов информационной панели и пост-контента.

Я просто сделал так, чтобы он выглядел лучше и сохранил общую ширину, добавив следующее:

.post-content {
    background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
    padding: 0 4% 30px 1%;
}

.info-panel {
    background: none repeat scroll 0 0 #000000;
    float: left;
    margin-right: 1%;
    padding: 2% 0 2% 2%;
    width: 29%;
}

Последние два фрагмента кода из CSS - всего лишь несколько советов о том, что я буду делать, еслиРешение сработало для вас.Это не значит, что у вас есть , поэтому, пожалуйста, не относитесь к этому как таковому.Он просто не дает области выглядеть ужасно.

Answer 2

Трудно понять, что именно вы пытаетесь сделать, но посмотрите, поможет ли это:

.post-content.info-panel {
    background-color: black;
    padding: 4px;
    width: 28%;
}