VPF::порядок div в описании css - Форум программистов

GrafF812

Дата 19.1.2010, 08:33 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет

здравствуйте. в html есть такой код

Код


<div id="head">
        <div></div>
                <div></div>
    </div>

для первого div описываю стиль так:

Код


div#head div {
background:url('../img/1.png') no-repeat;
width:100px;
height:10px;
}

подскажите как описать стили для второго div не привязывая его к id ?
наверное как-то так:

Код


div#head div[1]

только так не работает ))

patap

Дата 19.1.2010, 10:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 893
Регистрация: 7.5.2005
Где: Украина, Зп

Репутация: нет
Всего: 40

Код


<html>
<head>
<style>
  #head {
    width: 300px;
    height: 300px;
    border: solid 1px #000;
  }
  #head div  {
    margin: 15px;
    background: #0f0;
    width:40px;
    height: 40px;
  }
</style>

</head>
<body>
  <div id="head">
    <div></div>
    <div></div>
  </div>
</body>
</html>

--------------------

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

Mavrun

Дата 19.1.2010, 13:09 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13

для дива "хеад" в цсс лучше прописать как было предложено чуть выше (строки 4-8).
внутри хеда есть два дива и собственно как я понял стиль нужен первому. есть два способа. первый - либо задать ему класс или ид, либо прописать в самом диве нужные настройки

Код


<div style="margin: 15px; background: #0f0;  width:40px;  height: 40px;"></div>

И это оптимально.
Второй вариант уже через javascript, чтобы он в теге с ид хеад нашёл первый тег див и задал ему настройки. Но это трудоёмко, куда проще класс прописать.

Это сообщение отредактировал(а) Mavrun - 19.1.2010, 13:10

HARDMID

Дата 19.1.2010, 13:10 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 10.12.2007

Репутация: нет
Всего: нет

почти все правильно, только по условию задачи, вернее было бы так:

Код


<style type="text/css">
  #head {
    width: 300px;
    height: 300px;
    border: solid 1px #000;
  }
  #head div  { /* все-все дивы, вложенные в div#head */
    margin: 15px;
    background: #0f0;
    width:40px;
    height: 40px;
  }
  #head div:first-child  { /* только первый дочерний див, вложенный в div#head */
    margin: 10px;
    background: red;
    width:20px;
    height: 20px;
  }
</style>

Это сообщение отредактировал(а) HARDMID - 19.1.2010, 13:29

patap

Дата 19.1.2010, 13:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 893
Регистрация: 7.5.2005
Где: Украина, Зп

Репутация: нет
Всего: 40

HARDMID, интересно как обратиться допустим к 10му чаилду? или можно только к первому?

Код

#head div:first-child {...}

нашел только обращение к последнему чаилду - last-child

Код

#head div:last-child {...}

мда, по ходу это все. вот тут можно ознакомиться selectors

Это сообщение отредактировал(а) patap - 19.1.2010, 13:55

--------------------

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

Mavrun

Дата 19.1.2010, 14:01 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13

минус в том, что эксплорер 6 и ниже, а также огнелис ниже второго не понимают first-child и схожие=(

HARDMID

Дата 19.1.2010, 14:05 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 10.12.2007

Репутация: нет
Всего: нет

Да, конкретно 10-му чайлду (дочернему объекту) прописать свойства через CSS вряд ли получится.
Разве только попробовать средствами Javascript.
А надо ли? Не проще присвоить в CSS div.class10 все необходимые свойства, да в коде обозначить 10-му диву класс? Да мало ли...

Добавлено @ 14:12

Цитата(Mavrun @ 19.1.2010, 14:01

)

минус в том, что эксплорер 6 и ниже, а также огнелис ниже второго не понимают first-child и схожие=(

Может быть, тогда это поможет?
http://centricle.com/ref/css/filters/?highlight_columns=true
или http://dimox.name/personal_css_hacks_for_opera_firefox_ie/
или http://html-css.info/2009/06/css-hacks/

Это сообщение отредактировал(а) HARDMID - 19.1.2010, 14:14

GrafF812

Дата 19.1.2010, 23:47 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

Репутация: нет
Всего: нет

Спасибо большое за ответы но мне нужно обращаться к обоим дивам, через css

comcon1

Дата 20.1.2010, 01:04 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 11.6.2005
Где: Москва ДАС-МГУ

Репутация: нет
Всего: 17

GrafF812, тебе и писали решения.

У тебя нет вариантов, если нужна поддержка ослов. В норм. браузерах есть всякие div.class1 > div например и прочая жажа, но не в ослах. Твоя задача не решаема в таком виде. Либо нумеруй дивы, либо общайся через JS.

P.S.: Не ну в ослах, наверно, можно намутить через expression, но лучше уж тогда просто JS.

--------------------

comcon1 on twitter

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »