Пара вопростов по css

[severum]

1. css не наследуется, но стили можно складывать?

Есть такие заголовки:

<div class="header_bg" ><div class="header_news" ></div></div>

<div class="header_bg" ><div class="header_tyres" ></div></div>

<div class="header_bg" ><div class="header_disk" ></div></div>

такие css:

.header_bg{

float:none;

width:100%;

height:38px;

margin: 0px;

padding: 0px;

background-color:#4a84c3;

}

.header_news{

float:none;

width:100%;

height:38px;

background-position: right top;

background-image: url(../img/header_news.jpg);

background-repeat: no-repeat;

}

.header_tyres{

float:none;

width:100%;

height:38px;

background-position: right top;

background-image: url(../img/header_tyres.jpg);

background-repeat: no-repeat;

}

.header_disk{

float:none;

width:100%;

height:38px;

background-position: right top;

background-image: url(../img/header_disk.jpg);

background-repeat: no-repeat;

}

как их можно правильно красиво объединить чтобы не дублировались параметры?

2. в продолжении хочетя сделать еще стили для коротких заголовков.

картинки (header_news.jpg) выглядит типа:

(градиент из фона в надпись)-(надпись)-(картинка предмета)

т.е. хочется както свинуть правее картинку чтобы (картинка предмета) размером например в 100px отрезалась.

т.е. стиль должен быть что то типа background-position: right+100px top;

и хочется указать значение не в процентах (background-position: 60% 0px;) чтобы картинка не ползала.

а зафиксировать ее справа.

Спасибо заранее.

[MehOlOLBuC]

Эрик Мейер - css. подробное руководство

[rus]

Ничего вообще не понял

Можете на нормальном языке написать что хотите?

Скрин того что хотите на выходе и того как есть сейчас (с ошибкой).

[VJiK]

Если внутри этого блока будут ещё слои, то можно сделать с помощью добавления дополнительного селектора:

<div class="header_bg" ><div class="header-in header_news" ></div></div>
<div class="header_bg" ><div class="header-in header_tyres" ></div></div>
<div class="header_bg" ><div class="header-in header_disk" ></div></div>

.header_bg{
float:none;
width:100%;
height:38px;
margin: 0px;
padding: 0px;
background-color:#4a84c3;
}
.header-in {
float:none;
width:100%;
height:38px;
background-position: right top;
background-repeat: no-repeat;
}
.header_news{
background-image: url(../img/header_news.jpg);
}
.header_tyres{
background-image: url(../img/header_tyres.jpg);
}
.header_disk{
background-image: url(../img/header_disk.jpg);
}

Если внутри ничего не будет, то ещё проще:

<div class="header_bg" ><div class="header_news" ></div></div>
<div class="header_bg" ><div class="header_tyres" ></div></div>
<div class="header_bg" ><div class="header_disk" ></div></div>

.header_bg{
float:none;
width:100%;
height:38px;
margin: 0px;
padding: 0px;
background-color:#4a84c3;
}
.header_bg DIV {
float:none;
width:100%;
height:38px;
background-position: right top;
background-repeat: no-repeat;
}
.header_news{
background-image: url(../img/header_news.jpg);
}
.header_tyres{
background-image: url(../img/header_tyres.jpg);
}
.header_disk{
background-image: url(../img/header_disk.jpg);
}

[severum]

Ничего вообще не понял

Можете на нормальном языке написать что хотите?

Скрин того что хотите на выходе и того как есть сейчас (с ошибкой).

Второй

вверху это первый вариант как сейчас.

внизу это хочется еще один стиль для узких колонок чтобы картинка фона сдвинулась правее на 100px

выводится соотвественно так <div class="header_bg" ><div class="header_news" ></div></div>

Первый вопрос (Спасибо,все понял, решено)

на тему уменьшения дублирования кода

Как сделать что то типа:

.header_absolute{

float:none;

width:100%;

height:38px;

background-position: right top;

background-repeat: no-repeat;

}

//так понятно нельзя это типа наследование )

.header_news (header_absolute){

background-image: url(../img/header_news.jpg);

}

.header_tyres (header_absolute){

background-image: url(../img/header_tyres.jpg);

}

———--

Спасибо, пока набирал ответ не заметил ответ на первый вопрос.

Edited February 10, 2010 by severum

[Justnewone]

background-position поправьте.

[severum]

background-position поправьте.

Ну это я понял только туплю и не могу понять как сделать чтобы бакграунд был прижат к правому боку и еще немного правее сдвинут. ширина колонки может тянуться и мне надо чтобы картинка была справа всегда.

Так он будет относительно левого края картинки считать:

background-position: 100px top;

Надо что то типа:

background-position: right+100px top;

[Justnewone]

Надо что то типа:

background-position: right+100px top;

так не получится.

1. поправить картинку, отрезав от нее 100px справа.

2. главному блоку сказать ширину и оверфлоу:хидден, внутри вставить еще блок, в который перенести бекграунд и назначить ему левый отрицательный маргин 100px.

[severum]

так не получится.

1. поправить картинку, отрезав от нее 100px справа.

2. главному блоку сказать ширину и оверфлоу:хидден, внутри вставить еще блок, в который перенести бекграунд и назначить ему левый отрицательный маргин 100px.

Понял, спасибо большое.

Никак мозг под дивы не раскорячить.