Разные CSS для одного элемента

12
loed
На сайте с 10.03.2007
Offline
196
1255

Как правильно прописать стили для Н1,H2,H3 такой конструкции т.е стили для заголовков в дивах osnova и h1 должны быть разные :

<div id="osnova">

<H1>Заголовок </H1>

<H2>Заголовок </H2>

<H3>Заголовок </H3>

<div id="1"><H1>Заголовок </H1></div>

<div id="1"><H2>Заголовок </H2></div>

<div id="1"><H3>Заголовок </H3></div>

</div>

Вот так у меня не работает т.е всем заголовкам в диве 1 присваиваются стили osnova:

#osnova H1, H2, H3,{

FONT-SIZE: 17px;

COLOR: #4f7ba6;

background-COLOR: #f3f3f3;

font-style: normal;

font-weight: bold;

margin: 0px;

text-align: right;

background-image: url(/images/h1_strela.gif);

padding: 0px 5px 0px 0px;

BACKGROUND-REPEAT: no-repeat;

BACKGROUND-POSITION: 1% 50%;

FONT-FAMILY: Arial, sans-serif;

border: 1px solid #c5d4e2;

}

#1 H1, H2, H3 {

FONT-SIZE: 17px;

COLOR: #4f7ba6;

background-COLOR: #f3f3f3;

font-style: normal;

font-weight: bold;

margin: 0px;

text-align: right;

FONT-FAMILY: Arial, sans-serif;

border-bottom: 1px solid #c5d4e2;

}

ewg777
На сайте с 04.06.2007
Offline
225
#1

Поменять порядок + использовать important.

T.R.O.N
На сайте с 18.05.2004
Offline
314
#2

loed, ID это уникальный указатель

<div id="osnova">

<H1>Заголовок </H1>

<H2>Заголовок </H2>

<H3>Заголовок </H3>

</div>

<div id="1"><H1>Заголовок </H1>

<H2>Заголовок </H2>

<H3>Заголовок </H3></div>

И еще, прижерживайтесь всетаки правила, что имена как и ид, должны начинаться с буквы. Не критично но более естественно

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
loed
На сайте с 10.03.2007
Offline
196
#3
T.R.O.N:
loed, ID это уникальный указатель

<div id="osnova">
<H1>Заголовок </H1>
<H2>Заголовок </H2>
<H3>Заголовок </H3>
</div>

<div id="1"><H1>Заголовок </H1>
<H2>Заголовок </H2>
<H3>Заголовок </H3></div>

И еще, прижерживайтесь всетаки правила, что имена как и ид, должны начинаться с буквы. Не критично но более естественно

1.Так не не могу тк структура именно такая :<div id="osnova"><div id="1"></div></div>

2. имя у меня с букы начинается, просто тут использовал 1 для сокращения

T.R.O.N
На сайте с 18.05.2004
Offline
314
#4
loed:
Так не не могу тк структура именно такая

это значения не имеет, зачем. Главное чтобы ID были уникальными и не повторялись

loed
На сайте с 10.03.2007
Offline
196
#5
T.R.O.N:
это значения не имеет, зачем. Главное чтобы ID были уникальными и не повторялись

Если после дива osnova поставлю </div> то полетит все позиционирование слоев.

loed добавил 21.08.2009 в 10:54

Сформулирую проще: для всех заголовков на сайте использутся стиль:

#osnova H1, H2, H3,{

FONT-SIZE: 17px;

COLOR: #4f7ba6;

background-COLOR: #f3f3f3;

font-style: normal;

font-weight: bold;

margin: 0px;

text-align: right;

background-image: url(/images/h1_strela.gif);

padding: 0px 5px 0px 0px;

}

и только на одной из страниц сайта надо задать другой стиль для заголовков в диве 1:

<div id="osnova">

<div id="1"><H1>Заголовок </H1>

<H2>Заголовок </H2>

<H3>Заголовок </H3></div></div>

kapyceJlb
На сайте с 06.12.2008
Offline
23
#6

1) заменить:


#osnova H1, H2, H3{
...}
#1 H1, H2, H3 {
...
}

на

#osnova H1, #osnova  H2, #osnova H3 {

...}
#1 H1, #1 H2, #1 H3 {
...}

2) для перекрытия стилей использовать !important, если потребуется.

html/css/jQuery верстка http://tony-art.ru/ (http://tony-art.ru/) icq: 295-249
loed
На сайте с 10.03.2007
Offline
196
#7
kapyceJlb:
1) заменить:

#osnova H1, H2, H3{
...}
#1 H1, H2, H3 {
...
}


на

#osnova H1, #osnova  H2, #osnova H3 {

...}
#1 H1, #1 H2, #1 H3 {
...}

2) для перекрытия стилей использовать !important, если потребуется.

Не помогает...

T.R.O.N
На сайте с 18.05.2004
Offline
314
#8
loed:
Не помогает...

вы сделали чтобы ID не повторялся?

kapyceJlb
На сайте с 06.12.2008
Offline
23
#9

Метки ID и NAME должны начинаться с буквы ([A-Za-z]), за которой может следовать любое число букв, цифр ([0-9]), символов переноса ("-"), символов подчеркивания ("_"), двоеточий (":") и точек (".").

Так что с моим вариантом, вам надо только переименовать id="1", к примеру, в такой id="my1"

loed
На сайте с 10.03.2007
Offline
196
#10

Сейчас вот такой css который не пашет те для H1 применяется стиль osnova а надо мне стиль aindex:

<div id="osnova">

<div id="aindex"><H1>Заголовок </H1></div></div>

#osnova H1, H2, H3, H4 {

FONT-SIZE: 17px;

COLOR: #4f7ba6;

background-COLOR: #f3f3f3;

font-style: normal;

font-weight: bold;

margin: 0px;

text-align: right;

background-image: url(/images/h1_strela.gif);

padding: 0px 5px 0px 0px;

BACKGROUND-REPEAT: no-repeat;

BACKGROUND-POSITION: 1% 50%;

FONT-FAMILY: Arial, sans-serif;

border: 1px solid #c5d4e2;

}

#aindex H1, H2, H3 {

FONT-SIZE: 17px;

COLOR: #4f7ba6;

background-COLOR: #f3f3f3;

font-style: normal;

font-weight: bold;

margin: 0px;

text-align: right;

FONT-FAMILY: Arial, sans-serif;

border-bottom: 1px solid #c5d4e2;

}

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий