Я страдаю "дивитом"? (Необходим CSS-специалист)

Я прочитал много статей, которые осуждают чрезмерное использование div. У меня есть ощущение, что я мог бы сделать это в следующей разметке:

.container {
  margin: 0 auto;
  overflow: hidden;
  width: 960px;
}

/* header */

#header {
  background: #EEE;
}

#header h1 {
  float: left;
}

#header h2,
#header a,
#header p {
  color: #999;
}

#header h1 a {
  background: url(../images/logo.png) no-repeat scroll 0 0;
  float: left;
  height: 30px;
  text-indent: -9999px;
  width: 500px;
}

#banner {
  border-bottom: 1px solid #DDD;
  padding: 0 0 15px 0;
  margin: 30px 0 30px 0;
  overflow: hidden;
  width: 960px;
}

#lang {
  float: right;
  padding: 9px 0 0 0;
}

#lang li {
  float: left;
  margin: 0 0 0 20px;
}

#lang li a {
  font-size: 10px;
}


/* intro */

#intro {
  overflow: hidden;
  padding: 0 0 30px 0;
}

#tagline {
  float: left;
  margin: 0 40px 0 0;
  width: 540px;
  /* 560 */
}

#tagline h2 {
  font-size: 24px;
}

#about {
  float: right;
  width: 380px;
}

<div id="header">
  <div class="container">
    <div id="banner">
      <h1><a href="#" onclick="location.href='http://widerdesign.co.nr/'; return false;">wider design</a></h1>
      <ul id="lang">
        <li><a href="index.php">English</a></li>
        <li><a href="es/index.php">Español</a></li>
        <li><a href="tw/index.php">中文(繁體)</a></li>
        <li><a href="cn/index.php">中文(简体)</a></li>
      </ul>
    </div>
    <div id="intro">
      <div id="tagline">
        <h2>Nulla vitae tortor mauris</h2>
        <p>Pellentesque faucibus est eu tellus varius in susc...</p>
      </div>
      <div id="about">
        <h2>right</h2>
        <p>Pellentesque faucibus est eu tellus varius in susc...</p>
      </div>
    </div>
    <!-- #intro -->
  </div>
  <!-- .container -->
</div>
<!-- #header -->

Ответы

Ответ 1

Это выглядит отлично. Это нужно сделать в качестве примера!

Один из симптомов "divitis" - это когда вы видите список <div>'s вместо <ul>.

Ответ 2

По большей части ваша разметка в порядке. На каждом сайте представлены несколько разные проблемы. Я бы сказал, что ваш код можно было бы улучшить, удалив #intro и просто применив CSS к двум столбцам.

В зависимости от остальной части вашей страницы вы можете обойтись без #header div.

Кроме того, при необходимости можно использовать html AND body, чтобы помочь с несколькими фонами/контейнерами. Просто помните, что body начинает действовать как a div (не распространяется на нижнюю часть браузера), как только вы начинаете применять стили к html.

Использование divs или новых элементов блока HTML 5 - это все о семантическом значении, и дает местам повесить ваш CSS второй.

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

Для записи это divitis:

<div class='image'>
  <div class='shadow'>
    <div class='bottom-shadow'>
       <img src="..." alt="" />
    </div>
  </div>
  <div class="clear"></div>
</div>

Ответ 3

Вы используете <ul> для навигации и <h1><h2> для заголовков - это достаточно хорошо для меня. Я не мог придумать более подходящий элемент для любого из div, который вы используете. Прошел бы мою проверку качества без дальнейших церемоний.

Ответ 4

Вы используете <p>, <h*>, когда они вам нужны, чтобы он исправлялся.

Что плохого, так это использование div вместо соответствующего элемента. Здесь нет такой вещи.

Ответ 5

У каждого может быть другое мнение по этому вопросу, но здесь мое мнение:

Вы используете не, используя <div>.

Если вы использовали <div>, когда вы должны использовать <h2>, <p> и т.д., то вы, конечно, делаете это неправильно. Другими словами, если вы изгибаете <div>, чтобы соответствовать вашим целям, у вас возникла проблема.

К сожалению, когда CSS начал получать популярность, было написано много статей, пропагандирующих эту практику с названиями/темами после "Использовать <div> вместо <tagX>!". шаблон.

Ответ 6

Теперь вы можете начать использовать новые элементы HTML 5 с несколькими трюками JS.

Затем вы получаете действительно полезные заголовки, нижние колонтитулы, статьи, в сторону и элементы меню.

Объедините это с стилями CSS3 для закругленных углов, тени... у divitis может быть лекарство, но нам придется подождать, чтобы получить полную поддержку для этого.

Ответ 7

Это отличная разметка. Хорошее семантическое использование всех элементов. И красивое использование комментариев. (Да, я видел, что на это уже были ответы и голосовали правильно, но я новичок и ищу некоторые моменты, если бы я был здесь первым, wammo!)

Ответ 8

Не слишком употребляется. Это чистый, семантический код всего 2 div, связанный непосредственно с стилем (не знаю, имеет ли ваш .container div стили - я бы предположил, что вы используете их в других местах, потому что это класс). Семантический код - вот что! Я думаю, вы отлично поработали.

Ответ 9

На ум сразу приходит одно изменение:
Если это действительно все ваши стили, выровняйте div .container. Поскольку он не имеет стилей, он лишний.

Ответ 10

Я пробовал код в FF3.5 и IE8. Цвет фона, определенный для div "header", в FF3.5 весь заголовок div имеет этот цвет. Но в IE8 цвет фона отображается только для баннера и заголовка h2 в intro div.

Итак, вопрос в том, должен ли цвет фона применяться ко всему заголовку заголовка или он предназначен только для определенной части?

И для контейнера div класс атрибута имеет значение "container". Этот класс не определен в css.

Ответ 11

Я бы предложил никогда не использовать id в объявлениях правил CSS. На самом деле, я сторонник того, чтобы не использовать id вообще, это просто не стоит. Классы работают отлично, с меньшей степенью сложности.

Ответ 12

Я использую divs?

В зависимости от ваших потребностей, но IMHO нет.

Можно ли это упростить?

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