Заливка фона цветом

[nickostyle]

У меня есть див, я заливаю его цветом:

.div {background: #000;}

Мне нужно чтобы эта заливка фона как бы делала отступ от правого края на определенное количество пикселей, т.е. не заливала определенный участок дива справа.

Сорри за формулировку, не знаю, как лучше объяснить) Существуют какие то способы? Может направите, где что почитать. Спасибо)

[psywalker]

Существуют какие то способы? Может направите, где что почитать. Спасибо)

Существует. Делаешь диву заливку одним цветом, а кусок справа делаешь фоновой картинкой.

[nickostyle]

ГениальНО!!!!

[nickostyle]

Опять же вопрос: примерно такие же требование появились к форме (textarea)

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

В процентах тоже не выход...

upd: хотя....решение с фоновой картинкой и тут рулит :)

Edited October 9, 2010 by nickostyle

[psywalker]

upd: хотя....решение с фоновой картинкой и тут рулит :)

Вот и отлчино

[Babyaka]

Здравствуйте, у меня такая проблема. Нужно сделать так, чтобы после фоновой картинки блока шла заливка цветом, но на 200 пикселей вниз, а не на весь блок. Как можно это реализовать? Вот CSS код данного блока:

#column_one{
width:200px;
min-width:200px;
max-width:200px;
height:auto;
float:left; 
position:relative; 
background: url(../images/pan0.png) #3c93c9 no-repeat;
z-index:2;
}

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

[wwt]

http://jsfiddle.net/C2Bcq/ с помощью :before (поймет только IE8+)

http://jsfiddle.net/ecVsp/ или так с доп.блоком внутри

[Babyaka]

http://jsfiddle.net/C2Bcq/ с помощью :before (поймет только IE8+)

http://jsfiddle.net/ecVsp/ или так с доп.блоком внутри

Спасибо большое! Решил благодаря вашему второму примеру. В таблице написал так:

#column_one{
width:200px;
min-width:200px;
max-width:200px;
height:auto;
float:left; 
position:relative; 
background: url(../images/pan0.png) no-repeat;
z-index:2;
overflow:hidden;
}
#column_one .one {
content: "";
display: block;
position: absolute;
top:200px;
left:0;
width:100%;
height:65px;
background: #3c93c9;
z-index:-1;
}

А в код добавил:

<div id="column_one"><div class="one"></div></div>

[wwt]

content: "";

уберите он нужен только если используются псевдоклассы :before :after я просто переписал селекторы и не убрал во втором примере ))