我患有“divitis”？ （需要CSS专家） [英] Am I suffering "divitis"? (CSS especialist needed)

问题描述

我读过很多文章，谴责过度使用div。我有一种感觉，我可能在做以下标记：

HTML：

 < div id =header> 
< div class =container> 
< div id =banner> 
< h1>< a href =http://widerdesign.co.nr/>更宽的设计< / a>< / h1> 
< ul id =lang> 
< li>< a href =index.php>英语< / 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>右< / h2> 
< p> Pellentesque faucibus est eu tellus varius in susc ...< / p> 
< / div> 
< / div><！ -  #intro  - > 
< / div><！ -  .container  - > 
< / div><！ -  #header  - > 
  

CSS：

  .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的说明： / p>

header：定义扩展到窗口结束的背景颜色（位于 div .container ）。

容器：使内容居中（但不是背景）。

banner：可定义 ul＃lang code> h1 。与 #tagline 和

intro： > #about （否则我必须为tagline和个别地定义padding或margin）。

/ div>

它看起来很完美。

divitis的一个症状是当你看到< div>的而不是使用< ul> 。

I've read lots of articles that condemn the excessive use of divs. I have a feeling that I might be doing that in the following mark up:

HTML:

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

CSS:

.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;
}

Explanation of the use of those divs:

header: Defines the background color which expands until the end of the window (lies outside of the div .container).

container: centers the content (but not the background).

banner: to define the background or border color around ul#lang and h1.

intro: same as above but for #tagline and #about (otherwise I have to define say padding or margin for tagline and about individually).

Am I overusing divs?

Can this be simplified?

解决方案

It looks perfect. This should be taken as an example!

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

这篇关于我患有“divitis”？ （需要CSS专家）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！