나는“이혼”을 겪고 있습니까?

나는“이혼”을 겪고 있습니까? (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="http://widerdesign.co.nr/">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 -->

해당 div 사용에 대한 설명 :

• 머리글 : 창 끝까지 확장되는 배경색을 정의합니다 (외부에 있음 div .container).

• 컨테이너 : 콘텐츠를 중앙에 배치 (배경이 아님)

• 배너 : 배경 또는 테두리 색상을 정의 ul#lang하고h1

• intro : 위와 동일하지만 for #taglineand #about(그렇지 않으면 태그 라인에 대해 패딩 또는 여백을 정의해야합니다.)

div를 과도하게 사용하고 있습니까? 단순화 할 수 있습니까?

---

완벽 해 보입니다. 이것은 예를 들어야합니다!

One symptom of "divitis" is when you see a list of <div>'s instead of using a <ul>.

---

For the most part your markup is fine. Each site presents slightly different problems. I would argue that your code could be improved by removing #intro and just applying the CSS to the two columns.

Depending on the rest of your page, you may be able to do without the #header div.

Additionally, you can style html AND body if needed to help with multiple backgrounds/containers. Just remember that body starts acting like a div (doesn't extend to the bottom of the browser) as soon as you start applying styles to html.

Using divs or the new HTML 5 block elements, is all about making semantic sense first, and giving places to hang your CSS second.

Since each of your div elements serves a specific purpose where they provide semantic grouping of elements that go together, I would say your code is just fine.

For the record, this is divitis:

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

---

You're using <ul>s for navigation, and <h1><h2> for headings - that's good enough for me. I couldn't think of a more fitting element for any of the divs you are using. Would pass my quality check without further ado.

---

You're using <p>, <h*> when you need them so it's correct.

What is bad is using div instead of an appropriate element. There isn't such thing here.

---

Everyone may have a different opinion on this subject, but here's my opinion:

You're not over using <div>.

If you were using <div> when you should be using <h2>, <p>, etc, then you would certainly be doing it wrong. In other words, if you're bending <div> to fit your every purpose, you've got a problem.

Unfortunately, when CSS started to get popular, there were a lot of articles written promoting this practice with titles/themes following a "Use <div> instead of <tagX>!" pattern.

---

This is great markup. Good semantic use of all elements. And beautiful use of comments. (Yes I saw this was already answered and voted correct but I am new and looking for some points, had I been here first, wammo!)

---

You can start to use the new HTML 5 elements now, with a few JS tricks.

You then get the really useful header, footer, article, aside and menu elements.

Combine that with CSS3's styles for rounded corners, shadows... divitis may have a cure, but we will have to wait to get full support for that.

---

Not overused at all. It's clean, semantic code with just 2 divs related directly to styling only (don't know if your .container div has styles - I would guess so and that you use them in other places because it's a class). Semantic code - that's what counts! I think you did a great job.

---

There is one change that immediately comes to mind:
If these are really all of your styles, ditch the .container div. Since it has no styles, it's redundant.

---

I tried the code in FF3.5 and IE8. The background color defined for "header" div, in FF3.5 the entire header div has that color. But in IE8, the background color shows only for the banner and the header h2 in intro div.

So the question is should the background color apply to the entire header div or is it meant only for a specific portion?

And for container div, the attribute class has the value "container". This class is not defined in the css.

---

Am I overusing divs?

Depends on your needs, but IMHO no.

Can this be simplified?

Maybe with tables, but tables are typically rigid and unforgiving when using them across multiple browsers.

ReferenceURL : https://stackoverflow.com/questions/2164179/am-i-suffering-divitis-css-especialist-needed