SORU
29 Ocak 2010, Cuma


"Acı duyuyorum;divitis"? (CSS especialist gerekli)

Divs aşırı kullanımını kınıyoruz yazılar çok okudum. Aşağıdaki mark bunu yapmamın bir his var:

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

Bu kullanım açıklama divs:

başlık:Arka pencere (div .container dışında yalan) sonuna kadar genişler hangi renk tanımlar.

konteyner:merkezleri içeriği (ama arka plan değil).

başlık:arka plan tanımlamak için veya ul#lang h1 etrafında renkli kenarlık.

intro:yukarıdaki ile aynı ama #tagline #about (aksi halde ve hakkında ayrı ayrı slogan söyle doldurma ve kenar boşluğu tanımlamak için var).

Divs fazla kullanmak mıyım?

Bu basitleştirilmiş olabilir?

CEVAP
29 Ocak 2010, Cuma


Mükemmel görünüyor. Bu bir örnek olarak alınmalı!

Bir belirti "divitis" <div>'s bir listesini görmek için <ul> kullanmak yerine.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ASUS

    ASUS

    22 EKİM 2005
  • NewsyTech

    NewsyTech

    2 AĞUSTOS 2010
  • njhaley

    njhaley

    24 NİSAN 2006

İLGİLİ SORU / CEVAPLAR