Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > порядок div в описании css

Автор: GrafF812 19.1.2010, 08:33

здравствуйте. в 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

Код


<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

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

Код


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

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

Автор: HARDMID 19.1.2010, 13:10

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

Код


<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>

Автор: patap 19.1.2010, 13:40

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

Код

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

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

Код

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

мда, по ходу это все. вот тут можно ознакомиться http://www.w3.org/TR/CSS2/selector.html

Автор: Mavrun 19.1.2010, 14:01

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

Автор: HARDMID 19.1.2010, 14:05

Да, конкретно 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/

Автор: GrafF812 19.1.2010, 23:47

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

Автор: comcon1 20.1.2010, 01:04

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

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

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